Skip to content

Commit 51f469b

Browse files
elliott-with-the-longest-name-on-githubelliott-with-the-longest-name-on-github
committed
examples
1 parent 170ac93 commit 51f469b

34 files changed

+882
-94
lines changed

‎examples/multi-theme/README.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# multi-theme example
2+
3+
> An example on how to handle multiple-themes with `svelte-themes` using SvelteKit.
4+
5+
Note that, while Tailwind is in use, all colors are controlled via `--primary` and `--primary-foreground` variables, just as you could in vanilla CSS.

‎examples/multi-theme/package.json

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
{
2+
"name": "examples-multi-theme",
3+
"private": true,
4+
"version": "0.0.1",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite dev",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"prepare": "svelte-kit sync || echo ''",
11+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
12+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
13+
},
14+
"devDependencies": {
15+
"@sejohnson/svelte-themes": "workspace:*",
16+
"@sveltejs/adapter-vercel": "^5.5.2",
17+
"@sveltejs/kit": "^2.16.0",
18+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
19+
"@tailwindcss/vite": "^4.0.0",
20+
"svelte": "^5.0.0",
21+
"svelte-check": "^4.0.0",
22+
"tailwindcss": "^4.0.0",
23+
"typescript": "^5.0.0",
24+
"vite": "^6.0.0"
25+
},
26+
"pnpm": {
27+
"onlyBuiltDependencies": [
28+
"esbuild"
29+
]
30+
}
31+
}

‎examples/multi-theme/src/app.css

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
@import 'tailwindcss';
2+
3+
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
4+
5+
@layer base {
6+
:root {
7+
--primary: #1e293b;
8+
--primary-foreground: #f8fafc;
9+
}
10+
11+
html[data-theme='dark-classic'] {
12+
--primary: #cbd5e1;
13+
--primary-foreground: #0f172a;
14+
}
15+
16+
html[data-theme='tangerine'] {
17+
--primary: #fcd34d;
18+
--primary-foreground: #0f172a;
19+
}
20+
21+
html[data-theme='dark-tangerine'] {
22+
--primary: #d97706;
23+
--primary-foreground: #0f172a;
24+
}
25+
26+
html[data-theme='mint'] {
27+
--primary: #6ee7b7;
28+
--primary-foreground: #0f172a;
29+
}
30+
31+
html[data-theme='dark-mint'] {
32+
--primary: #047857;
33+
--primary-foreground: #f8fafc;
34+
}
35+
}

‎examples/multi-theme/src/app.d.ts

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
// See https://svelte.dev/docs/kit/types#app.d.ts
2+
// for information about these interfaces
3+
declare global {
4+
namespace App {
5+
// interface Error {}
6+
// interface Locals {}
7+
// interface PageData {}
8+
// interface PageState {}
9+
// interface Platform {}
10+
}
11+
}
12+
13+
export {};

‎examples/multi-theme/src/app.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en" style="background-color: var(--primary)">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
12+
</html>

‎examples/multi-theme/src/lib/theme-toggles.svelte

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script lang="ts">
2+
import { getTheme, HydrationWatcher } from '@sejohnson/svelte-themes';
3+
const theme = getTheme();
4+
5+
// The active theme is not available on the server.
6+
// If you have styling that is conditionally applied using JavaScript based on the active-theme,
7+
// you have to await the mounted state before rendering the active theme.
8+
// (If possible, it is recommended to use CSS variables for styling that is conditionally applied based on the active theme.)
9+
// If you're using Tailwind, that just means setting `attribute="class"` in the ThemeProvider and using `dark:` modifiers.
10+
const watcher = new HydrationWatcher();
11+
12+
const themeMapping: Record<string, string> = {
13+
light: 'Default',
14+
'dark-classic': 'Dark',
15+
tangerine: 'Tangerine',
16+
'dark-tangerine': 'Tangerine (dark)',
17+
mint: 'Mint',
18+
'dark-mint': 'Mint (dark)'
19+
};
20+
</script>
21+
22+
<div>
23+
<div class="mt-16 grid grid-cols-3 grid-rows-2 grid-flow-col gap-4">
24+
{#each Object.entries(themeMapping) as [key, value] (key)}
25+
<button
26+
class="px-4 py-2 font-semibold rounded-md transition-colors duration-200 bg-[var(--primary)] text-[var(--primary-foreground)] {watcher.hydrated &&
27+
theme.selectedTheme == key
28+
? 'border border-[var(--primary-foreground)]'
29+
: ''}"
30+
onclick={() => {
31+
theme.selectedTheme = key;
32+
}}
33+
>
34+
{value}
35+
</button>
36+
{/each}
37+
</div>
38+
</div>

‎examples/multi-theme/src/routes/+layout.svelte

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script lang="ts">
2+
import '../app.css';
3+
import { ThemeProvider } from '@sejohnson/svelte-themes';
4+
5+
let { children } = $props();
6+
</script>
7+
8+
<div class="min-h-dvh">
9+
<ThemeProvider
10+
defaultTheme="light"
11+
enableSystem={false}
12+
themes={['light', 'dark-classic', 'tangerine', 'dark-tangerine', 'mint', 'dark-mint']}
13+
>
14+
{@render children?.()}
15+
</ThemeProvider>
16+
</div>

‎examples/multi-theme/src/routes/+page.svelte

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<script lang="ts">
2+
import ThemeToggles from '$lib/theme-toggles.svelte';
3+
</script>
4+
5+
<div class="w-full container p-4 mx-auto">
6+
<div class="py-20 flex flex-col items-center justify-center text-[var(--primary-foreground)]">
7+
<h1 class="text-5xl text-center font-bold">
8+
Svelte Themes +{' '}
9+
<span class="text-primary-foreground bg-primary py-2 px-4 rounded">Multi</span> Themes
10+
</h1>
11+
<ThemeToggles />
12+
</div>
13+
</div>

‎examples/multi-theme/static/favicon.png

1.53 KB
Loading

‎examples/multi-theme/svelte.config.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import adapter from "@sveltejs/adapter-vercel";
2+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
3+
4+
/** @type {import('@sveltejs/kit').Config} */
5+
const config = {
6+
// Consult https://svelte.dev/docs/kit/integrations
7+
// for more information about preprocessors
8+
preprocess: vitePreprocess(),
9+
10+
kit: {
11+
adapter: adapter()
12+
}
13+
};
14+
15+
export default config;

0 commit comments

Comments
 (0)