use theme builder for #2 instead of provided bare, much easier for da…

…rk/light mode

package.json

@@ -3,10 +3,13 @@
   "version": "1.0.0",
   "private": true,
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm run prepare && rollup -c",
     "dev": "rollup -c -w",
     "start": "sirv public --no-clear",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "prepare": "npm run smui-theme-light && npm run smui-theme-dark",
+    "smui-theme-light": "smui-theme compile public/build/smui.css -i src/theme",
+    "smui-theme-dark": "smui-theme compile public/build/smui-dark.css -i src/theme/dark"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^17.0.0",
@@ -23,6 +26,7 @@
     "rollup-plugin-livereload": "^2.0.0",
     "rollup-plugin-svelte": "^7.0.0",
     "rollup-plugin-terser": "^7.0.0",
+    "smui-theme": "^6.0.0-beta.16",
     "svelte": "^3.0.0",
     "svelte-check": "^2.0.0",
     "svelte-material-ui": "^6.0.0-beta.16",
@@ -33,4 +37,4 @@
   "dependencies": {
     "sirv-cli": "^2.0.0"
   }
-}
+}

public/index.html

@@ -11,13 +11,15 @@
 	<link rel='stylesheet' href='/global.css'>
 	<link rel='stylesheet' href='/build/bundle.css'>
 
-	<link rel="stylesheet" href="https://unpkg.com/svelte-material-ui/bare.css" />
-
+	<!-- SMUI Styles -->
+	<link rel="stylesheet" href="/build/smui.css" media="(prefers-color-scheme: light)" />
+	<link rel="stylesheet" href="/build/smui-dark.css" media="screen and (prefers-color-scheme: dark)" />
+
 	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" />
 	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono" />
 
-	<script>if(!sessionStorage.getItem("_swa")&&document.referrer.indexOf(location.protocol+"//"+location.host)!== 0){fetch("https://counter.dev/track?"+new URLSearchParams({referrer:document.referrer,screen:screen.width+"x"+screen.height,user:"modischfabrications",utcoffset:"2"}))};sessionStorage.setItem("_swa","1");</script>
+	<script>if (!sessionStorage.getItem("_swa") && document.referrer.indexOf(location.protocol + "//" + location.host) !== 0) { fetch("https://counter.dev/track?" + new URLSearchParams({ referrer: document.referrer, screen: screen.width + "x" + screen.height, user: "modischfabrications", utcoffset: "2" })) }; sessionStorage.setItem("_swa", "1");</script>
 	<script defer src='/build/bundle.js'></script>
 </head>
 

src/App.svelte

@@ -46,12 +46,6 @@
 </main>
 
 <style>
-	:root {
-		--mdc-theme-primary: hsl(194, 100%, 50%);
-		--mdc-theme-secondary: hsl(232, 40%, 39%);
-		--mdc-switch-selected-track-color: hsl(193, 100%, 91%);
-	}
-
 	.content {
 		padding: 2em;
 		margin: auto;

src/theme/_smui-theme.scss

@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+@use '@material/theme/color-palette';
+
+// Svelte Colors!
+@use '@material/theme/index' as theme with (
+  $primary: #006eff,
+  $secondary: hsl(241, 79%, 44%),
+  $surface: #fff,
+  $background: #fff,
+  $error: color-palette.$red-900
+);
+
+html,
+body {
+  background-color: theme.$surface;
+  color: theme.$on-surface;
+}
+
+a {
+  color: #40b3ff;
+}
+a:visited {
+  color: color.scale(#40b3ff, $lightness: -35%);
+}

src/theme/dark/_smui-theme.scss

@@ -0,0 +1,25 @@
+@use 'sass:color';
+
+@use '@material/theme/color-palette';
+
+// Svelte Colors! (Dark Theme)
+@use '@material/theme/index' as theme with (
+  $primary: #ff3e00,
+  $secondary: color.scale(#676778, $whiteness: -10%),
+  $surface: color.adjust(color-palette.$grey-900, $blue: +4),
+  $background: #000,
+  $error: color-palette.$red-700
+);
+
+html,
+body {
+  background-color: #000;
+  color: theme.$on-surface;
+}
+
+a {
+  color: #40b3ff;
+}
+a:visited {
+  color: color.scale(#40b3ff, $lightness: -35%);
+}