Skip to content

Commit 32cca58

Browse files
hperrinhperrin
committed
docs: add more alternate themes
1 parent 7f35915 commit 32cca58

36 files changed

+2328
-66
lines changed

‎packages/site/.gitignore‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,5 @@ node_modules
66
.env
77
.env.*
88
!.env.example
9-
/static/smui.css
10-
/static/smui-dark.css
11-
/static/smui-fixation.css
12-
/static/smui-fixation-dark.css
13-
/static/site.css
14-
/static/site-dark.css
15-
/static/site-fixation.css
16-
/static/site-fixation-dark.css
9+
/static/smui*.css
10+
/static/site*.css

‎packages/site/package.json‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,32 @@
99
"preview": "vite preview",
1010
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
1111
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
12-
"prepare": "npm run prepare-smui && npm run prepare-site",
13-
"prepare-smui": "npm run smui-theme-light && npm run smui-theme-dark && npm run smui-fixation-light && npm run smui-fixation-dark",
14-
"prepare-site": "npm run site-light && npm run site-dark && npm run site-fixation-light && npm run site-fixation-dark",
12+
"prepare": "npm run prepare-smui && npm run prepare-fixation && npm run prepare-material && npm run prepare-metro && npm run prepare-unity",
13+
"prepare-smui": "npm run smui-theme-light && npm run smui-theme-dark && npm run site-light && npm run site-dark",
14+
"prepare-fixation": "npm run smui-fixation-light && npm run smui-fixation-dark && npm run site-fixation-light && npm run site-fixation-dark",
15+
"prepare-material": "npm run smui-material-light && npm run smui-material-dark && npm run site-material-light && npm run site-material-dark",
16+
"prepare-metro": "npm run smui-metro-light && npm run smui-metro-dark && npm run site-metro-light && npm run site-metro-dark",
17+
"prepare-unity": "npm run smui-unity-light && npm run smui-unity-dark && npm run site-unity-light && npm run site-unity-dark",
1518
"smui-theme-light": "smui-theme compile static/smui.css -s expanded -i src/theme -i node_modules/",
1619
"smui-theme-dark": "smui-theme compile static/smui-dark.css -s expanded -i src/theme/dark -i node_modules/",
1720
"smui-fixation-light": "smui-theme compile static/smui-fixation.css -s expanded -i src/theme/fixation -i node_modules/",
1821
"smui-fixation-dark": "smui-theme compile static/smui-fixation-dark.css -s expanded -i src/theme/fixation-dark -i node_modules/",
22+
"smui-material-light": "smui-theme compile static/smui-material.css -s expanded -i src/theme/material -i node_modules/",
23+
"smui-material-dark": "smui-theme compile static/smui-material-dark.css -s expanded -i src/theme/material-dark -i node_modules/",
24+
"smui-metro-light": "smui-theme compile static/smui-metro.css -s expanded -i src/theme/metro -i node_modules/",
25+
"smui-metro-dark": "smui-theme compile static/smui-metro-dark.css -s expanded -i src/theme/metro-dark -i node_modules/",
26+
"smui-unity-light": "smui-theme compile static/smui-unity.css -s expanded -i src/theme/unity -i node_modules/",
27+
"smui-unity-dark": "smui-theme compile static/smui-unity-dark.css -s expanded -i src/theme/unity-dark -i node_modules/",
1928
"site-light": "sass --no-source-map -I src/theme -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site.css",
2029
"site-dark": "sass --no-source-map -I src/theme/dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-dark.css",
2130
"site-fixation-light": "sass --no-source-map -I src/theme/fixation -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-fixation.css",
2231
"site-fixation-dark": "sass --no-source-map -I src/theme/fixation-dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-fixation-dark.css",
32+
"site-material-light": "sass --no-source-map -I src/theme/material -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-material.css",
33+
"site-material-dark": "sass --no-source-map -I src/theme/material-dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-material-dark.css",
34+
"site-metro-light": "sass --no-source-map -I src/theme/metro -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-metro.css",
35+
"site-metro-dark": "sass --no-source-map -I src/theme/metro-dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-metro-dark.css",
36+
"site-unity-light": "sass --no-source-map -I src/theme/unity -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-unity.css",
37+
"site-unity-dark": "sass --no-source-map -I src/theme/unity-dark -I node_modules -I ../smui-theme/node_modules -I ../../node_modules src/site.scss static/site-unity-dark.css",
2338
"clean": "test -d .svelte-kit && rm -r .svelte-kit || true",
2439
"test": "echo \"Error: no test specified\" && exit 1"
2540
},

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

Lines changed: 91 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -7,40 +7,38 @@
77
<!-- Site Styles -->
88
<link rel="stylesheet" href="{assets}/site.css" />
99

10-
{#if fixationTheme}
10+
{#if theme}
1111
<!-- SMUI Styles -->
12-
<link rel="stylesheet" href="{assets}/smui-fixation.css" />
12+
<link rel="stylesheet" href="{assets}/smui-{theme}.css" />
1313

1414
<!-- Site Styles -->
15-
<link rel="stylesheet" href="{assets}/site-fixation.css" />
15+
<link rel="stylesheet" href="{assets}/site-{theme}.css" />
1616

1717
{#if lightTheme === false}
1818
<!-- SMUI Styles -->
19-
<link rel="stylesheet" href="{assets}/smui-fixation.css" />
2019
<link
2120
rel="stylesheet"
22-
href="{assets}/smui-fixation-dark.css"
21+
href="{assets}/smui-{theme}-dark.css"
2322
media="screen"
2423
/>
2524
<!-- Site Styles -->
26-
<link rel="stylesheet" href="{assets}/site-fixation.css" />
2725
<link
2826
rel="stylesheet"
29-
href="{assets}/site-fixation-dark.css"
27+
href="{assets}/site-{theme}-dark.css"
3028
media="screen"
3129
/>
3230
{:else if lightTheme !== true}
3331
<!-- SMUI Styles -->
3432
<link
3533
rel="stylesheet"
36-
href="{assets}/smui-fixation-dark.css"
34+
href="{assets}/smui-{theme}-dark.css"
3735
media="screen and (prefers-color-scheme: dark)"
3836
/>
3937

4038
<!-- Site Styles -->
4139
<link
4240
rel="stylesheet"
43-
href="{assets}/site-fixation-dark.css"
41+
href="{assets}/site-{theme}-dark.css"
4442
media="screen and (prefers-color-scheme: dark)"
4543
/>
4644
{/if}
@@ -133,41 +131,78 @@
133131
</IconButton>
134132
<Tooltip>Hunter Perrin (SMUI Author) on Mastodon</Tooltip>
135133
</Wrapper>
136-
<Wrapper>
137-
<IconButton
138-
toggle
139-
pressed={fixationTheme}
140-
on:SMUIIconButtonToggle:change={() =>
141-
(fixationTheme = !fixationTheme)}
142-
>
143-
<Icon component={Svg} viewBox="0 0 24 24" on>
144-
<path fill="currentColor" d={siSvelte.path} />
145-
</Icon>
146-
<Icon component={Svg} viewBox="0 0 24 24">
147-
<path fill="currentColor" d={mdiFormatPaint} />
148-
</Icon>
149-
</IconButton>
150-
<Tooltip
151-
>{fixationTheme
152-
? 'Go back to the Svelte theme'
153-
: 'Check out a custom theme'}</Tooltip
154-
>
155-
</Wrapper>
156-
<Wrapper>
157-
<IconButton
158-
toggle
159-
pressed={lightTheme}
160-
on:SMUIIconButtonToggle:change={() => (lightTheme = !lightTheme)}
161-
>
162-
<Icon component={Svg} viewBox="0 0 24 24" on>
163-
<path fill="currentColor" d={mdiWeatherNight} />
164-
</Icon>
165-
<Icon component={Svg} viewBox="0 0 24 24">
166-
<path fill="currentColor" d={mdiWeatherSunny} />
167-
</Icon>
168-
</IconButton>
169-
<Tooltip>{lightTheme ? 'Lights off' : 'Lights on'}</Tooltip>
170-
</Wrapper>
134+
<div style="display: inline-block;">
135+
<Wrapper>
136+
<IconButton on:click={() => themeMenu.setOpen(true)}>
137+
<Icon component={Svg} viewBox="0 0 24 24">
138+
<path fill="currentColor" d={mdiPalette} />
139+
</Icon>
140+
</IconButton>
141+
<Tooltip>Pick a theme.</Tooltip>
142+
</Wrapper>
143+
<Menu bind:this={themeMenu}>
144+
<List>
145+
<SelectionGroup>
146+
<Item
147+
on:SMUI:action={() => (lightTheme = null)}
148+
selected={lightTheme == null}
149+
>
150+
<SelectionGroupIcon>
151+
<i class="material-icons">check</i>
152+
</SelectionGroupIcon>
153+
<Text>Follow System</Text>
154+
</Item>
155+
{#each [{ label: 'Light', value: true }, { label: 'Dark', value: false }] as item}
156+
<Item
157+
on:SMUI:action={() => (lightTheme = item.value)}
158+
selected={lightTheme === item.value}
159+
>
160+
<SelectionGroupIcon>
161+
<i class="material-icons">check</i>
162+
</SelectionGroupIcon>
163+
<Text>{item.label}</Text>
164+
</Item>
165+
{/each}
166+
</SelectionGroup>
167+
<Separator />
168+
<SelectionGroup>
169+
<Item
170+
on:SMUI:action={() => (theme = null)}
171+
selected={theme == null}
172+
>
173+
<SelectionGroupIcon>
174+
<i class="material-icons">check</i>
175+
</SelectionGroupIcon>
176+
<Text>Svelte</Text>
177+
</Item>
178+
{#each themes as item}
179+
<Item
180+
on:SMUI:action={() => (theme = item.value)}
181+
selected={theme === item.value}
182+
>
183+
<SelectionGroupIcon>
184+
<i class="material-icons">check</i>
185+
</SelectionGroupIcon>
186+
<Text>{item.label}</Text>
187+
</Item>
188+
{/each}
189+
</SelectionGroup>
190+
<Separator />
191+
<Item tag="a" href="/THEMING.md" style="color: inherit;">
192+
<Text>Learn about theming</Text>
193+
</Item>
194+
<Item
195+
tag="a"
196+
href="https://github.com/hperrin/svelte-material-ui/tree/master/packages/site/src/theme"
197+
target="_blank"
198+
rel="noreferrer noorigin"
199+
style="color: inherit;"
200+
>
201+
<Text>See the theme source</Text>
202+
</Item>
203+
</List>
204+
</Menu>
205+
</div>
171206
</Section>
172207
</Row>
173208
</TopAppBar>
@@ -221,20 +256,16 @@
221256

222257
<script lang="ts">
223258
import { onDestroy, onMount } from 'svelte';
224-
import {
225-
mdiFileDocument,
226-
mdiFormatPaint,
227-
mdiWeatherSunny,
228-
mdiWeatherNight,
229-
} from '@mdi/js';
230-
import { siDiscord, siMastodon, siGithub, siSvelte } from 'simple-icons';
259+
import { mdiFileDocument, mdiPalette } from '@mdi/js';
260+
import { siDiscord, siMastodon, siGithub } from 'simple-icons';
231261
import TinyGesture from 'tinygesture';
232262
import { assets } from '$app/paths';
233263
import { page } from '$app/stores';
234264
235265
import TopAppBar, { Row, Section, Title } from '@smui/top-app-bar';
236266
import Drawer, { Content, Scrim, AppContent } from '@smui/drawer';
237267
import IconButton from '@smui/icon-button';
268+
import Menu, { SelectionGroup, SelectionGroupIcon } from '@smui/menu';
238269
import List, { Item, Text, Separator } from '@smui/list';
239270
import Tooltip, { Wrapper } from '@smui/tooltip';
240271
import { Icon, Svg } from '@smui/common';
@@ -248,8 +279,15 @@
248279
let drawerGesture: TinyGesture;
249280
let mainContentGesture: TinyGesture;
250281
251-
let lightTheme: boolean;
252-
let fixationTheme = false;
282+
const themes = [
283+
{ label: 'Material', value: 'material' },
284+
{ label: 'Fixation', value: 'fixation' },
285+
{ label: 'Metro', value: 'metro' },
286+
{ label: 'Unity', value: 'unity' },
287+
];
288+
let themeMenu: Menu;
289+
let lightTheme: boolean | null = null;
290+
let theme: string | null = null;
253291
254292
type DemoSection = {
255293
component?: InstanceType<typeof Item>;

‎packages/site/src/theme/fixation-dark/_smui-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164

165165
html,
166166
body {
167-
background-color: #000;
167+
background-color: theme.$background;
168168
color: theme.$on-surface;
169169
}
170170

‎packages/site/src/theme/fixation/_smui-theme.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@
164164

165165
html,
166166
body {
167-
background-color: #fff;
167+
background-color: theme.$background;
168168
color: theme.$on-surface;
169169
}
170170

‎packages/site/src/theme/material-dark/_smui-theme.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
@use '@material/theme/index' as theme with (
2+
$surface: #222222,
3+
$background: #000000
4+
);
5+
6+
html,
7+
body {
8+
background-color: theme.$background;
9+
color: theme.$on-surface;
10+
}

‎packages/site/src/theme/material/_smui-theme.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@use '@material/theme/index' as theme;
2+
3+
html,
4+
body {
5+
background-color: theme.$background;
6+
color: theme.$on-surface;
7+
}

‎packages/site/src/theme/metro-dark/_smui-theme.scss‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
@use 'sass:color';
2+
3+
@use '@material/theme/index' as theme with (
4+
$primary: #008299,
5+
$secondary: #8c0095,
6+
$surface: #000000,
7+
$background: #222222,
8+
$error: #ac193d
9+
);
10+
11+
// Elevation shadow color. (Since surface is #000.)
12+
@use '@material/elevation/index' as elevation with (
13+
$baseline-color: #333333
14+
);
15+
16+
// Sharp corners.
17+
@use '@material/shape/index' as shape with (
18+
$small-component-radius: 0,
19+
$medium-component-radius: 0,
20+
$large-component-radius: 0
21+
);
22+
23+
// Use custom fonts.
24+
@use '@material/typography' with (
25+
$font-family: unquote('"Selawik", "Segoe UI", sans-serif'),
26+
$styles-headline1: (
27+
font-family: unquote('"Selawik Light", "Segoe UI", sans-serif'),
28+
),
29+
$styles-headline2: (
30+
font-family: unquote('"Selawik Light", "Segoe UI", sans-serif'),
31+
),
32+
$styles-headline3: (
33+
font-family: unquote('"Selawik Light", "Segoe UI", sans-serif'),
34+
),
35+
$styles-headline4: (
36+
font-family: unquote('"Selawik Light", "Segoe UI", sans-serif'),
37+
),
38+
$styles-button: (
39+
text-transform: none,
40+
)
41+
);
42+
43+
@font-face {
44+
font-family: 'Selawik';
45+
src: url('/Selawik_Release/selawk.woff2') format('woff2'),
46+
url('/Selawik_Release/selawk.woff') format('woff'),
47+
url('/Selawik_Release/selawk.eot') format('eot'),
48+
url('/Selawik_Release/selawk.ttf') format('ttf');
49+
}
50+
51+
@font-face {
52+
font-family: 'Selawik Light';
53+
src: url('/Selawik_Release/selawkl.woff2') format('woff2'),
54+
url('/Selawik_Release/selawkl.woff') format('woff'),
55+
url('/Selawik_Release/selawkl.eot') format('eot'),
56+
url('/Selawik_Release/selawkl.ttf') format('ttf');
57+
}
58+
59+
@font-face {
60+
font-family: 'Selawik Bold';
61+
src: url('/Selawik_Release/selawkb.woff2') format('woff2'),
62+
url('/Selawik_Release/selawkb.woff') format('woff'),
63+
url('/Selawik_Release/selawkb.eot') format('eot'),
64+
url('/Selawik_Release/selawkb.ttf') format('ttf');
65+
}
66+
67+
html,
68+
body {
69+
background-color: theme.$background;
70+
color: theme.$on-surface;
71+
}
72+
73+
// Be more specific than the _Typography.scss file.
74+
html code,
75+
html pre {
76+
font-family: 'Courier New', Courier, monospace;
77+
}
78+
79+
// Be more specific than the _Typography.scss file.
80+
html b,
81+
html strong {
82+
font-family: 'Selawik Bold', 'Segoe UI', sans-serif;
83+
font-weight: bold;
84+
}
85+
86+
// Color scheme: https://coolors.co/f6f7eb-e94f37-393e41-3f88c5-44bba4
87+
a {
88+
color: #3f88c5;
89+
}
90+
a:visited {
91+
color: #44bba4;
92+
}

0 commit comments

Comments
 (0)