feat: add premade themes to svelte-material-ui package

Author: hperrin

INSTALL.md

@@ -50,6 +50,10 @@ If you want the Material Icon, Roboto, and Roboto Mono fonts, be sure to include
 
 ## Installing a Theme
 
+### A Custom Theme
+
+Check out the [theming instructions](/THEMING.md) for setting up a custom theme.
+
 ### The Default Theme
 
 You can use the prebuilt "bare.css" file from the "svelte-material-ui" package. If you use this option you _can_ mostly customize your theme, but your [theming options](/THEMING.md#theming-the-bare-css) are more limited.
@@ -59,12 +63,14 @@ npm install --save svelte-material-ui
 ```
 
 ```html
+<!-- SMUI Styles -->
 <link rel="stylesheet" href="node_modules/svelte-material-ui/bare.css" />
 ```
 
 If that's not working (probably because your dependencies aren't copied to your build folder), you can also use a CDN. Just be sure you update the version here when you update to a new version of SMUI. (This may already be an outdated version, so update it now too.)
 
 ```html
+<!-- SMUI Styles -->
 <link
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/[email protected]/bare.min.css"
@@ -73,6 +79,51 @@ If that's not working (probably because your dependencies aren't copied to your
 
 You can also use the "bare.css" files from the individual packages if you don't use many components and want smaller file sizes.
 
-### A Custom Theme
+### A Premade Theme
 
-Check out the [theming instructions](/THEMING.md) for setting up a custom theme.
+There are some premade themes as well in the "svelte-material-ui" package, including dark mode versions. These are the same themes that appear on the demo site. You won't find the CSS in the repo, because they're not git tracked, but here's a list.
+
+- `themes/svelte.css`
+- `themes/svelte-dark.css`
+- `themes/material.css`
+- `themes/material-dark.css`
+- `themes/fixation.css`
+- `themes/fixation-dark.css`
+- `themes/metro.css`
+- `themes/metro-dark.css`
+- `themes/unity.css`
+- `themes/unity-dark.css`
+
+```sh
+npm install --save svelte-material-ui
+```
+
+```html
+<!-- SMUI Styles -->
+<link
+  rel="stylesheet"
+  href="node_modules/svelte-material-ui/themes/svelte.css"
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="stylesheet"
+  href="node_modules/svelte-material-ui/themes/svelte-dark.css"
+  media="screen and (prefers-color-scheme: dark)"
+/>
+```
+
+Or with a CDN. Remember to update the version!
+
+```html
+<!-- SMUI Styles -->
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/themes/svelte.min.css"
+  media="(prefers-color-scheme: light)"
+/>
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/[email protected]/themes/svelte-dark.min.css"
+  media="screen and (prefers-color-scheme: dark)"
+/>
+```

MIGRATING.md

@@ -7,6 +7,10 @@ This doc contains information that will help you migrate your code from an older
 SMUI 7 migrated to upstream MDC 14.0 from 13.0:
 https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md#1400-2022-04-27
 
+## Themes
+
+I spent a day [flexing every graphic design muscle in my body](https://i.kym-cdn.com/entries/icons/original/000/018/929/graphic_design_is_my_passion.png), and made some THEMES! SMUI 7 can now be styled with a custom theme, the default theme, or [brand spanking new premade themes](https://sveltematerialui.com/INSTALL.md#a-premade-theme). This makes it much easier to get started with SMUI.
+
 ## Breaking Changes
 
 - The `@smui/common/elements` components are gone. Just set the `tag` prop on components now (like `<Button tag="div">`).

THEMING.md

@@ -118,7 +118,7 @@ You can [add Material typography](/TYPOGRAPHY.md) as the default for your app.
 
 ## Theming the Bare CSS
 
-If you use the bare CSS, you can set a subset of the theme options with CSS variables. Note that not all of the colors in SMUI read from CSS variables, so some parts will still use the colors defined in the original Sass compile. Below is a copy of the variables from the CSS on the SMUI website. You can use this as a starting point for your own theme.
+If you use the bare CSS (or a premade theme), you can set a subset of the theme options with CSS variables. Note that not all of the colors in SMUI read from CSS variables, so some parts will still use the colors defined in the original Sass compile. Below is a copy of the variables from the CSS on the SMUI website. You can use this as a starting point for your own theme.
 
 ```css
 /* Theme colors. */

packages/site/src/routes/+layout.svelte

@@ -138,7 +138,7 @@
                 <path fill="currentColor" d={mdiPalette} />
               </Icon>
             </IconButton>
-            <Tooltip>Pick a theme.</Tooltip>
+            <Tooltip>Pick a theme or toggle dark mode.</Tooltip>
           </Wrapper>
           <Menu bind:this={themeMenu}>
             <List>

packages/svelte-material-ui/.gitignore

@@ -0,0 +1 @@
+/themes

packages/svelte-material-ui/package.json

@@ -12,13 +12,25 @@
     "sveltejs"
   ],
   "scripts": {
-    "build": "smui-theme compile bare.css -i theme/ -i node_modules/",
+    "build": "npm run build-bare && npm run build-svelte-light && npm run build-svelte-dark && npm run build-fixation-light && npm run build-fixation-dark && npm run build-material-light && npm run build-material-dark && npm run build-metro-light && npm run build-metro-dark && npm run build-unity-light && npm run build-unity-dark",
+    "build-bare": "smui-theme compile bare.css -i theme/ -i node_modules/",
+    "build-svelte-light": "smui-theme compile themes/svelte.css -s expanded -i ../site/src/theme -i node_modules/",
+    "build-svelte-dark": "smui-theme compile themes/svelte-dark.css -s expanded -i ../site/src/theme/dark -i node_modules/",
+    "build-fixation-light": "smui-theme compile themes/fixation.css -s expanded -i ../site/src/theme/fixation -i node_modules/",
+    "build-fixation-dark": "smui-theme compile themes/fixation-dark.css -s expanded -i ../site/src/theme/fixation-dark -i node_modules/",
+    "build-material-light": "smui-theme compile themes/material.css -s expanded -i ../site/src/theme/material -i node_modules/",
+    "build-material-dark": "smui-theme compile themes/material-dark.css -s expanded -i ../site/src/theme/material-dark -i node_modules/",
+    "build-metro-light": "smui-theme compile themes/metro.css -s expanded -i ../site/src/theme/metro -i node_modules/",
+    "build-metro-dark": "smui-theme compile themes/metro-dark.css -s expanded -i ../site/src/theme/metro-dark -i node_modules/",
+    "build-unity-light": "smui-theme compile themes/unity.css -s expanded -i ../site/src/theme/unity -i node_modules/",
+    "build-unity-dark": "smui-theme compile themes/unity-dark.css -s expanded -i ../site/src/theme/unity-dark -i node_modules/",
     "clean": "git status --ignored -u --porcelain . | grep -v node_modules/ | grep -e '^!! ' | sed 's/^!! packages\\/[a-z-]*\\///g' | tr '\\n' ' ' | xargs rm",
     "prepare": "npm run build",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "files": [
-    "bare.css"
+    "bare.css",
+    "themes"
   ],
   "publishConfig": {
     "access": "public"