Home Esplora Aiuto
Accedi
safwan
/
stdf
1
0
Forka 0
File Problemi 0 Pull Requests 0 Wiki
Sfoglia il codice sorgente

[create]stdf@0.4.0

dufu1991 2 anni fa
parent
3ebe1222ee
commit
2004a8af43
21 ha cambiato i file con 706 aggiunte e 186 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 1 1
      packages/create-stdf/package.json
  2. 38 0
      packages/create-stdf/templates/sveltekit-tailwind/src/app.css
  3. 1 1
      packages/create-stdf/templates/sveltekit-tailwind/src/app.html
  4. 46 0
      packages/create-stdf/templates/sveltekit-tailwind/src/data/Nintendo.js
  5. 37 20
      packages/create-stdf/templates/sveltekit-tailwind/src/routes/+page.svelte
  6. 57 24
      packages/create-stdf/templates/sveltekit-tailwind/tailwind.config.js
  7. 36 0
      packages/create-stdf/templates/sveltekit-uno/src/app.css
  8. 1 1
      packages/create-stdf/templates/sveltekit-uno/src/app.html
  9. 46 0
      packages/create-stdf/templates/sveltekit-uno/src/data/Nintendo.js
  10. 37 20
      packages/create-stdf/templates/sveltekit-uno/src/routes/+page.svelte
  11. 54 25
      packages/create-stdf/templates/sveltekit-uno/uno.config.js
  12. 1 1
      packages/create-stdf/templates/vite-tailwind/index.html
  13. 38 21
      packages/create-stdf/templates/vite-tailwind/src/App.svelte
  14. 38 0
      packages/create-stdf/templates/vite-tailwind/src/app.css
  15. 46 0
      packages/create-stdf/templates/vite-tailwind/src/data/Nintendo.js
  16. 54 25
      packages/create-stdf/templates/vite-tailwind/tailwind.config.js
  17. 1 1
      packages/create-stdf/templates/vite-uno/index.html
  18. 38 21
      packages/create-stdf/templates/vite-uno/src/App.svelte
  19. 36 0
      packages/create-stdf/templates/vite-uno/src/app.css
  20. 46 0
      packages/create-stdf/templates/vite-uno/src/data/Nintendo.js
  21. 54 25
      packages/create-stdf/templates/vite-uno/uno.config.js

+ 1 - 1
packages/create-stdf/package.json
Vedi File 

@@ -1,6 +1,6 @@
 
 {
 
 	"name": "create-stdf",
 
-	"version": "0.0.54",
 
+	"version": "0.0.55",
 
 	"description": "A CLI for creating new STDF projects",
 
 	"bin": {
 
 		"create-stdf": "index.js"

+ 38 - 0
packages/create-stdf/templates/sveltekit-tailwind/src/app.css
Vedi File 

@@ -2,6 +2,44 @@
 
 @tailwind components;
 
 @tailwind utilities;
 
 
+@layer base {
 
+	:root {
 
+		--theme-color-primary-50: 245, 248, 255;
 
+		--theme-color-primary-100: 232, 238, 255;
 
+		--theme-color-primary-200: 187, 203, 254;
 
+		--theme-color-primary-300: 143, 165, 253;
 
+		--theme-color-primary-400: 99, 124, 253;
 
+		--theme-color-primary-500: 55, 81, 252;
 
+		--theme-color-primary: 11, 36, 251;
 
+		--theme-color-primary-700: 7, 20, 207;
 
+		--theme-color-primary-800: 4, 9, 164;
 
+		--theme-color-primary-900: 1, 1, 120;
 
+		--theme-color-primary-950: 3, 0, 77;
 
+		--theme-color-dark-50: 255, 254, 245;
 
+		--theme-color-dark-100: 255, 251, 232;
 
+		--theme-color-dark-200: 255, 244, 199;
 
+		--theme-color-dark-300: 255, 234, 166;
 
+		--theme-color-dark-400: 255, 222, 133;
 
+		--theme-color-dark-500: 255, 209, 100;
 
+		--theme-color-dark: 255, 192, 67;
 
+		--theme-color-dark-700: 210, 148, 41;
 
+		--theme-color-dark-800: 166, 108, 22;
 
+		--theme-color-dark-900: 121, 72, 8;
 
+		--theme-color-dark-950: 77, 41, 0;
 
+		--theme-color-primaryBlack: 1, 3, 25;
 
+		--theme-color-primaryWhite: 242, 242, 243;
 
+		--theme-color-darkBlack: 25, 17, 1;
 
+		--theme-color-darkWhite: 243, 242, 242;
 
+		--theme-color-functional-success: 17, 187, 141;
 
+		--theme-color-functional-warning: 185, 80, 0;
 
+		--theme-color-functional-error: 218, 20, 20;
 
+		--theme-color-functional-info: 46, 90, 172;
 
+		--theme-color-extend0: 0, 172, 238;
 
+		--theme-color-extend1: 255, 105, 55;
 
+		--theme-color-extend2: 0, 112, 74;
 
+	}
 
+}
 
+
 
 html {
 
 	-webkit-tap-highlight-color: transparent;
 
 }

+ 1 - 1
packages/create-stdf/templates/sveltekit-tailwind/src/app.html
Vedi File 

@@ -8,7 +8,7 @@
 
 		%sveltekit.head%
 
 	</head>
 
 
-	<body data-sveltekit-preload-data="hover" class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
 
+	<body data-sveltekit-preload-data="hover" class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
 
 		<main style="display: contents">%sveltekit.body%</main>
 
 	</body>
 
 </html>

+ 46 - 0
packages/create-stdf/templates/sveltekit-tailwind/src/data/Nintendo.js
Vedi File 

@@ -0,0 +1,46 @@
 
+export default {
 
+	name: 'Nintendo',
 
+	color: {
 
+		primary: {
 
+			50: '255, 246, 245', // #FFF6F5
 
+			100: '255, 234, 232', // #FFEAE8
 
+			200: '250, 185, 182', // #FAB9B6
 
+			300: '245, 136, 134', // #F58886
 
+			400: '240, 87, 90', // #F0575A
 
+			500: '235, 43, 52', // #EB2B34
 
+			default: '230, 0, 18', // #E60012
 
+			700: '192, 0, 22', // #C00016
 
+			800: '153, 0, 23', // #990017
 
+			900: '115, 0, 21', // #730015
 
+			950: '77, 0, 17', // #4D0011
 
+		},
 
+		dark: {
 
+			50: '245, 255, 254', // #F5FFFE
 
+			100: '232, 255, 254', // #E8FFFE
 
+			200: '182, 249, 249', // #B6F9F9
 
+			300: '133, 240, 244', // #85F0F4
 
+			400: '87, 228, 238', // #57E4EE
 
+			500: '42, 214, 233', // #2AD6E9
 
+			default: '0, 195, 227', // #00C3E3
 
+			700: '0, 158, 189', // #009EBD
 
+			800: '0, 121, 152', // #007998
 
+			900: '0, 87, 114', // #005772
 
+			950: '0, 56, 77', // #00384D
 
+		},
 
+		primaryBlack: '25, 1, 3', // #190103
 
+		primaryWhite: '243, 242, 242', // #F3F2F2
 
+		darkBlack: '1, 22, 25', // #011619
 
+		darkWhite: '242, 243, 243', // #F2F3F3
 
+		functional: {
 
+			success: '0, 180, 42', // #00b42a
 
+			warning: '255, 125, 0', // #ff7d00
 
+			error: '245, 63, 63', // #f53f3f
 
+			info: '22, 93, 255', // #165dff
 
+		},
 
+		extend: [
 
+			{ color: '0, 82, 217', alias: 'Tencent' }, // #0052d9
 
+			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
 
+			{ color: '243, 112, 33', alias: 'Hermès' }, // #f37021
 
+		],
 
+	},
 
+};

+ 37 - 20
packages/create-stdf/templates/sveltekit-tailwind/src/routes/+page.svelte
Vedi File 

@@ -1,6 +1,8 @@
 
 <script>
 
 	import { setContext } from 'svelte';
 
 	import { Button, Cell, Icon, Calendar } from 'stdf';
 
+	import { stdfTheme, switchTheme, darkMode } from 'stdf/theme';
 
+	import NintendoTheme from '../data/Nintendo';
 
 	import en_US from 'stdf/lang/en_US';
 
 	import zh_CN from 'stdf/lang/zh_CN';
 
 	import Counter from './Counter.svelte';
 
@@ -17,21 +19,21 @@
 
 	}
 
 
 	//切换亮暗模式(toggle light or dark mode)
 
-	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
 
-	if (theme === 'dark') {
 
-		document.documentElement.classList.add('dark');
 
+	let mode = sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light';
 
+	if (mode === 'dark') {
 
+		darkMode(true);
 
 	}
 
 	const toggleModeFun = () => {
 
-		if (theme === 'dark') {
 
+		if (mode === 'dark') {
 
 			// 切换到(light switch to light)
 
-			theme = 'light';
 
-			document.documentElement.classList.remove('dark');
 
-			sessionStorage.setItem('theme', 'light');
 
+			mode = 'light';
 
+			darkMode(false);
 
+			sessionStorage.setItem('mode', 'light');
 
 		} else {
 
 			// 切换到(dark switch to dark)
 
-			theme = 'dark';
 
-			document.documentElement.classList.add('dark');
 
-			sessionStorage.setItem('theme', 'dark');
 
+			mode = 'dark';
 
+			darkMode(true);
 
+			sessionStorage.setItem('mode', 'dark');
 
 		}
 
 	};
 
 
@@ -57,6 +59,18 @@
 
 
 	// 日历(calendar)
 
 	let visible = false;
 
+
 
+	// 主题(theme)
 
+	let theme = 'STDF';
 
+	const toggleThemeFun = () => {
 
+		if (theme === 'STDF') {
 
+			theme = 'Nintendo';
 
+			switchTheme(NintendoTheme);
 
+		} else {
 
+			theme = 'STDF';
 
+			switchTheme(stdfTheme);
 
+		}
 
+	};
 
 </script>
 
 
 <div class="flex justify-center items-center text-center gap-4 pt-10">
 
@@ -76,7 +90,7 @@
 
 		</svg>
 
 	</a>
 
 </div>
 
-<div class="text-center my-8 text-xs">
 
+<div class="text-center my-6 text-xs">
 
 	{#if isZh}
 
 		<p>这是一个使用 SvelteKit + Tailwind + STDF 构建的模板。</p>
 
 		<p class="mt-2">点击上方 LOGO 了解更多。</p>
 
@@ -85,13 +99,13 @@
 
 		<p class="mt-2">Click the logo above to learn more.</p>
 
 	{/if}
 
 </div>
 
-<div class="my-8">
 
+<div class="my-6">
 
 	<a href="about">
 
 		<Cell title={isZh ? '跳转 ABOUT' : 'Go to ABOUT'} />
 
 	</a>
 
 </div>
 
-<div class="my-8">
 
-	<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
 
+<div class="my-6">
 
+	<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: mode === 'dark' } }} on:click={toggleModeFun} />
 
 </div>
 
 <div class="mt-8">
 
 	<Counter bind:percent />
 
@@ -101,21 +115,23 @@
 
 		<div class="flex divide-x">
 
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-			<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
+			<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-			<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
+			<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
 
+			<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={() => (percent = 20)}>
 
+				{isZh ? '重置' : 'Reset'}
 
+			</div>
 
 		</div>
 
 	</Button>
 
 </div>
 
-<div class="my-8">
 
+<div class="my-6">
 
 	<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
 
 </div>
 
 <Calendar bind:visible />
 
-<div class="my-8 px-8 flex justify-between">
 
+<div class="my-6 px-8 flex justify-between">
 
 	<Icon name="cake" theme path="symbols/Heroicons.svg" />
 
 	<Icon name="riding-line" path="symbols/Remix.svg" />
 
 	<Icon name="spy-line" theme path="symbols/Remix.svg" />
 
@@ -127,6 +143,7 @@
 
 	，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
 
 	，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
 
 </div>
 
-<div class="my-8">
 
+<div class="my-6">
 
 	<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
 
+	<Button fill="lineTheme" on:click={toggleThemeFun}>{isZh ? '切换主题' : 'Toggle theme'}</Button>
 
 </div>

+ 57 - 24
packages/create-stdf/templates/sveltekit-tailwind/tailwind.config.js
Vedi File 

@@ -4,35 +4,68 @@ export default {
 
 	theme: {
 
 		colors: {
 
 			// 主题色
 
-			primary: '#0B24FB',
 
-			dark: '#FFC043',
 
-			blue: '#0B24FB', // primary 别名
 
-			yellow: '#FFC043', // dark 别名
 
-
 
-			// 扩展色
 
-			purple: '#7356BF',
 
-			green: '#05944F',
 
-			orange: '#FF6937',
 
+			// Theme Color
 
+			primary: {
 
+				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)',
 
+			},
 
+			dark: {
 
+				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)',
 
+			},
 
+			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
 
+			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
 
+			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
 
+			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
 
 
 			// 功能色
 
-			success: '#11BB8D',
 
-			warning: '#B95000',
 
-			error: '#DA1414',
 
-			info: '#2E5AAC',
 
+			// Functional Color
 
+			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
 
+			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
 
+			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
 
+			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
 
+
 
+			// 扩展色
 
+			// Extended Color
 
+			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
 
+			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
 
+			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
 
 
 			// 中性色
 
+			// Neutral Color
 
 			black: '#000000',
 
-			white: '#fff',
 
-			gray1: '#23262B',
 
-			gray2: '#2A2B2F',
 
-			gray3: '#303239',
 
-			gray4: '#373940',
 
-			gray5: '#414249',
 
-			gray6: '#747B84',
 
-			gray7: '#DADEE3',
 
-			gray8: '#EBEEF2',
 
-			gray9: '#F4F6F9',
 
-			gray10: '#FAFAFB',
 
+			white: '#ffffff',
 
+			gray: {
 
+				50: '#f2f2f2',
 
+				100: '#e6e6e6',
 
+				200: '#cccccc',
 
+				300: '#b3b3b3',
 
+				400: '#999999',
 
+				500: '#808080',
 
+				600: '#666666',
 
+				700: '#4D4D4D',
 
+				800: '#333333',
 
+				900: '#1A1A1A',
 
+				950: '#0D0D0D',
 
+			},
 
 			transparent: 'transparent',
 
 		},
 
 		extend: {},

+ 36 - 0
packages/create-stdf/templates/sveltekit-uno/src/app.css
Vedi File 

@@ -1,3 +1,39 @@
 
+:root {
 
+	--theme-color-primary-50: 245, 248, 255;
 
+	--theme-color-primary-100: 232, 238, 255;
 
+	--theme-color-primary-200: 187, 203, 254;
 
+	--theme-color-primary-300: 143, 165, 253;
 
+	--theme-color-primary-400: 99, 124, 253;
 
+	--theme-color-primary-500: 55, 81, 252;
 
+	--theme-color-primary: 11, 36, 251;
 
+	--theme-color-primary-700: 7, 20, 207;
 
+	--theme-color-primary-800: 4, 9, 164;
 
+	--theme-color-primary-900: 1, 1, 120;
 
+	--theme-color-primary-950: 3, 0, 77;
 
+	--theme-color-dark-50: 255, 254, 245;
 
+	--theme-color-dark-100: 255, 251, 232;
 
+	--theme-color-dark-200: 255, 244, 199;
 
+	--theme-color-dark-300: 255, 234, 166;
 
+	--theme-color-dark-400: 255, 222, 133;
 
+	--theme-color-dark-500: 255, 209, 100;
 
+	--theme-color-dark: 255, 192, 67;
 
+	--theme-color-dark-700: 210, 148, 41;
 
+	--theme-color-dark-800: 166, 108, 22;
 
+	--theme-color-dark-900: 121, 72, 8;
 
+	--theme-color-dark-950: 77, 41, 0;
 
+	--theme-color-primaryBlack: 1, 3, 25;
 
+	--theme-color-primaryWhite: 242, 242, 243;
 
+	--theme-color-darkBlack: 25, 17, 1;
 
+	--theme-color-darkWhite: 243, 242, 242;
 
+	--theme-color-functional-success: 17, 187, 141;
 
+	--theme-color-functional-warning: 185, 80, 0;
 
+	--theme-color-functional-error: 218, 20, 20;
 
+	--theme-color-functional-info: 46, 90, 172;
 
+	--theme-color-extend0: 0, 172, 238;
 
+	--theme-color-extend1: 255, 105, 55;
 
+	--theme-color-extend2: 0, 112, 74;
 
+}
 
+
 
 :root {
 
 	--un-default-border-color: currentColor;
 
 }

+ 1 - 1
packages/create-stdf/templates/sveltekit-uno/src/app.html
Vedi File 

@@ -8,7 +8,7 @@
 
 		%sveltekit.head%
 
 	</head>
 
 
-	<body data-sveltekit-preload-data="hover" class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
 
+	<body data-sveltekit-preload-data="hover" class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
 
 		<main style="display: contents">%sveltekit.body%</main>
 
 	</body>
 
 </html>

+ 46 - 0
packages/create-stdf/templates/sveltekit-uno/src/data/Nintendo.js
Vedi File 

@@ -0,0 +1,46 @@
 
+export default {
 
+	name: 'Nintendo',
 
+	color: {
 
+		primary: {
 
+			50: '255, 246, 245', // #FFF6F5
 
+			100: '255, 234, 232', // #FFEAE8
 
+			200: '250, 185, 182', // #FAB9B6
 
+			300: '245, 136, 134', // #F58886
 
+			400: '240, 87, 90', // #F0575A
 
+			500: '235, 43, 52', // #EB2B34
 
+			default: '230, 0, 18', // #E60012
 
+			700: '192, 0, 22', // #C00016
 
+			800: '153, 0, 23', // #990017
 
+			900: '115, 0, 21', // #730015
 
+			950: '77, 0, 17', // #4D0011
 
+		},
 
+		dark: {
 
+			50: '245, 255, 254', // #F5FFFE
 
+			100: '232, 255, 254', // #E8FFFE
 
+			200: '182, 249, 249', // #B6F9F9
 
+			300: '133, 240, 244', // #85F0F4
 
+			400: '87, 228, 238', // #57E4EE
 
+			500: '42, 214, 233', // #2AD6E9
 
+			default: '0, 195, 227', // #00C3E3
 
+			700: '0, 158, 189', // #009EBD
 
+			800: '0, 121, 152', // #007998
 
+			900: '0, 87, 114', // #005772
 
+			950: '0, 56, 77', // #00384D
 
+		},
 
+		primaryBlack: '25, 1, 3', // #190103
 
+		primaryWhite: '243, 242, 242', // #F3F2F2
 
+		darkBlack: '1, 22, 25', // #011619
 
+		darkWhite: '242, 243, 243', // #F2F3F3
 
+		functional: {
 
+			success: '0, 180, 42', // #00b42a
 
+			warning: '255, 125, 0', // #ff7d00
 
+			error: '245, 63, 63', // #f53f3f
 
+			info: '22, 93, 255', // #165dff
 
+		},
 
+		extend: [
 
+			{ color: '0, 82, 217', alias: 'Tencent' }, // #0052d9
 
+			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
 
+			{ color: '243, 112, 33', alias: 'Hermès' }, // #f37021
 
+		],
 
+	},
 
+};

+ 37 - 20
packages/create-stdf/templates/sveltekit-uno/src/routes/+page.svelte
Vedi File 

@@ -3,6 +3,8 @@
 
 	import { Button, Cell, Icon, Calendar } from 'stdf';
 
 	import en_US from 'stdf/lang/en_US';
 
 	import zh_CN from 'stdf/lang/zh_CN';
 
+	import { stdfTheme, switchTheme, darkMode } from 'stdf/theme';
 
+	import NintendoTheme from '../data/Nintendo';
 
 	import Counter from './Counter.svelte';
 
 
 	import { browser } from '$app/environment';
 
@@ -17,21 +19,21 @@
 
 	}
 
 
 	//切换亮暗模式(toggle light or dark mode)
 
-	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
 
-	if (theme === 'dark') {
 
-		document.documentElement.classList.add('dark');
 
+	let mode = sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light';
 
+	if (mode === 'dark') {
 
+		darkMode();
 
 	}
 
 	const toggleModeFun = () => {
 
-		if (theme === 'dark') {
 
+		if (mode === 'dark') {
 
 			// 切换到(light switch to light)
 
-			theme = 'light';
 
-			document.documentElement.classList.remove('dark');
 
-			sessionStorage.setItem('theme', 'light');
 
+			mode = 'light';
 
+			darkMode(false);
 
+			sessionStorage.setItem('mode', 'light');
 
 		} else {
 
 			// 切换到(dark switch to dark)
 
-			theme = 'dark';
 
-			document.documentElement.classList.add('dark');
 
-			sessionStorage.setItem('theme', 'dark');
 
+			mode = 'dark';
 
+			darkMode();
 
+			sessionStorage.setItem('mode', 'dark');
 
 		}
 
 	};
 
 
@@ -57,6 +59,18 @@
 
 
 	// 日历(calendar)
 
 	let visible = false;
 
+
 
+	// 主题(theme)
 
+	let theme = 'STDF';
 
+	const toggleThemeFun = () => {
 
+		if (theme === 'STDF') {
 
+			theme = 'Nintendo';
 
+			switchTheme(NintendoTheme);
 
+		} else {
 
+			theme = 'STDF';
 
+			switchTheme(stdfTheme);
 
+		}
 
+	};
 
 </script>
 
 
 <div class="flex justify-center items-center text-center gap-4 pt-10">
 
@@ -76,7 +90,7 @@
 
 		</svg>
 
 	</a>
 
 </div>
 
-<div class="text-center my-8 text-xs">
 
+<div class="text-center my-6 text-xs">
 
 	{#if isZh}
 
 		<p>这是一个使用 SvelteKit + UnoCSS + STDF 构建的模板。</p>
 
 		<p class="mt-2">点击上方 LOGO 了解更多。</p>
 
@@ -85,13 +99,13 @@
 
 		<p class="mt-2">Click the logo above to learn more.</p>
 
 	{/if}
 
 </div>
 
-<div class="my-8">
 
+<div class="my-6">
 
 	<a href="about">
 
 		<Cell title={isZh ? '跳转 ABOUT' : 'Go to ABOUT'} />
 
 	</a>
 
 </div>
 
-<div class="my-8">
 
-	<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
 
+<div class="my-6">
 
+	<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: mode === 'dark' } }} on:click={toggleModeFun} />
 
 </div>
 
 <div class="mt-8">
 
 	<Counter bind:percent />
 
@@ -101,21 +115,23 @@
 
 		<div class="flex divide-x">
 
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-			<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
+			<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-			<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
+			<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-			<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
 
+			<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={() => (percent = 20)}>
 
+				{isZh ? '重置' : 'Reset'}
 
+			</div>
 
 		</div>
 
 	</Button>
 
 </div>
 
-<div class="my-8">
 
+<div class="my-6">
 
 	<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
 
 </div>
 
 <Calendar bind:visible />
 
-<div class="my-8 px-8 flex justify-between">
 
+<div class="my-6 px-8 flex justify-between">
 
 	<Icon name="cake" theme path="symbols/Heroicons.svg" />
 
 	<Icon name="riding-line" path="symbols/Remix.svg" />
 
 	<Icon name="spy-line" theme path="symbols/Remix.svg" />
 
@@ -127,6 +143,7 @@
 
 	，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
 
 	，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
 
 </div>
 
-<div class="my-8">
 
+<div class="my-6">
 
 	<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
 
+	<Button fill="lineTheme" on:click={toggleThemeFun}>{isZh ? '切换主题' : 'Toggle theme'}</Button>
 
 </div>

+ 54 - 25
packages/create-stdf/templates/sveltekit-uno/uno.config.js
Vedi File 

@@ -11,38 +11,67 @@ export default defineConfig({
 
 		colors: {
 
 			// 主题色
 
 			// Theme Color
 
-			primary: '#0B24FB',
 
-			dark: '#FFC043',
 
-			blue: '#0B24FB', // primary 别名 alias
 
-			yellow: '#FFC043', // dark 别名 alias
 
-
 
-			// 扩展色
 
-			// Extended Color
 
-			purple: '#7356BF',
 
-			green: '#05944F',
 
-			orange: '#FF6937',
 
+			primary: {
 
+				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)',
 
+			},
 
+			dark: {
 
+				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)',
 
+			},
 
+			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
 
+			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
 
+			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
 
+			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
 
 
 			// 功能色
 
 			// Functional Color
 
-			success: '#11BB8D',
 
-			warning: '#B95000',
 
-			error: '#DA1414',
 
-			info: '#2E5AAC',
 
+			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
 
+			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
 
+			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
 
+			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
 
+
 
+			// 扩展色
 
+			// Extended Color
 
+			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
 
+			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
 
+			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
 
 
 			// 中性色
 
 			// Neutral Color
 
 			black: '#000000',
 
-			white: '#fff',
 
-			gray1: '#23262B',
 
-			gray2: '#2A2B2F',
 
-			gray3: '#303239',
 
-			gray4: '#373940',
 
-			gray5: '#414249',
 
-			gray6: '#747B84',
 
-			gray7: '#DADEE3',
 
-			gray8: '#EBEEF2',
 
-			gray9: '#F4F6F9',
 
-			gray10: '#FAFAFB',
 
+			white: '#ffffff',
 
+			gray: {
 
+				50: '#f2f2f2',
 
+				100: '#e6e6e6',
 
+				200: '#cccccc',
 
+				300: '#b3b3b3',
 
+				400: '#999999',
 
+				500: '#808080',
 
+				600: '#666666',
 
+				700: '#4D4D4D',
 
+				800: '#333333',
 
+				900: '#1A1A1A',
 
+				950: '#0D0D0D',
 
+			},
 
 			transparent: 'transparent',
 
 		},
 
 		extend: {},

+ 1 - 1
packages/create-stdf/templates/vite-tailwind/index.html
Vedi File 

@@ -8,7 +8,7 @@
 
 		<title>Vite + Svelte + Tailwind + STDF</title>
 
 	</head>
 
 
-	<body class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
 
+	<body class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
 
 		<div id="app"></div>
 
 		<script type="module" src="/src/main.js"></script>
 
 	</body>

+ 38 - 21
packages/create-stdf/templates/vite-tailwind/src/App.svelte
Vedi File 

@@ -3,6 +3,8 @@
 
 	import en_US from 'stdf/lang/en_US';
 
 	import zh_CN from 'stdf/lang/zh_CN';
 
 	import { Button, Cell, Calendar, Icon } from 'stdf';
 
+	import { stdfTheme, switchTheme, darkMode } from 'stdf/theme';
 
+	import NintendoTheme from './data/Nintendo';
 
 	import Counter from './lib/Counter.svelte';
 
 
 	import viteLogo from './assets/vite.svg';
 
@@ -10,21 +12,21 @@
 
 	import tailwindLogo from './assets/tailwindcss.svg';
 
 
 	//切换亮暗模式(toggle light or dark mode)
 
-	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
 
-	if (theme === 'dark') {
 
-		document.documentElement.classList.add('dark');
 
+	let mode = sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light';
 
+	if (mode === 'dark') {
 
+		darkMode(true);
 
 	}
 
 	const toggleModeFun = () => {
 
-		if (theme === 'dark') {
 
+		if (mode === 'dark') {
 
 			// 切换到(light switch to light)
 
-			theme = 'light';
 
-			document.documentElement.classList.remove('dark');
 
-			sessionStorage.setItem('theme', 'light');
 
+			mode = 'light';
 
+			darkMode(false);
 
+			sessionStorage.setItem('mode', 'light');
 
 		} else {
 
 			// 切换到(dark switch to dark)
 
-			theme = 'dark';
 
-			document.documentElement.classList.add('dark');
 
-			sessionStorage.setItem('theme', 'dark');
 
+			mode = 'dark';
 
+			darkMode(true);
 
+			sessionStorage.setItem('mode', 'dark');
 
 		}
 
 	};
 
 
@@ -50,6 +52,18 @@
 
 
 	// 日历(calendar)
 
 	let visible = false;
 
+
 
+	// 主题(theme)
 
+	let theme = 'STDF';
 
+	const toggleThemeFun = () => {
 
+		if (theme === 'STDF') {
 
+			theme = 'Nintendo';
 
+			switchTheme(NintendoTheme);
 
+		} else {
 
+			theme = 'STDF';
 
+			switchTheme(stdfTheme);
 
+		}
 
+	};
 
 </script>
 
 
 <main>
 
@@ -73,7 +87,7 @@
 
 			</svg>
 
 		</a>
 
 	</div>
 
-	<div class="text-center my-8 text-xs">
 
+	<div class="text-center my-6 text-xs">
 
 		{#if isZh}
 
 			<p>这是一个使用 Vite + Svelte + Tailwind + STDF 构建的模板。</p>
 
 			<p class="mt-2">点击上方 LOGO 了解更多。</p>
 
@@ -82,32 +96,34 @@
 
 			<p class="mt-2">Click the logo above to learn more.</p>
 
 		{/if}
 
 	</div>
 
-	<div class="my-8">
 
-		<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
 
+	<div class="my-6">
 
+		<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: mode === 'dark' } }} on:click={toggleModeFun} />
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Counter bind:percent />
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Button heightIn="0" group fill="lineTheme">
 
 			<div class="flex divide-x">
 
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-				<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
+				<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-				<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
+				<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-				<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
 
+				<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={() => (percent = 20)}>
 
+					{isZh ? '重置' : 'Reset'}
 
+				</div>
 
 			</div>
 
 		</Button>
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
 
 	</div>
 
 	<Calendar bind:visible />
 
-	<div class="my-8 px-8 flex justify-between">
 
+	<div class="my-6 px-8 flex justify-between">
 
 		<Icon name="cake" theme path="fonts/Heroicons.svg" />
 
 		<Icon name="riding-line" path="fonts/Remix.svg" />
 
 		<Icon name="spy-line" theme path="fonts/Remix.svg" />
 
@@ -119,7 +135,8 @@
 
 		，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
 
 		，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
 
+		<Button fill="lineTheme" on:click={toggleThemeFun}>{isZh ? '切换主题' : 'Toggle theme'}</Button>
 
 	</div>
 
 </main>

+ 38 - 0
packages/create-stdf/templates/vite-tailwind/src/app.css
Vedi File 

@@ -2,6 +2,44 @@
 
 @tailwind components;
 
 @tailwind utilities;
 
 
+@layer base {
 
+	:root {
 
+		--theme-color-primary-50: 245, 248, 255;
 
+		--theme-color-primary-100: 232, 238, 255;
 
+		--theme-color-primary-200: 187, 203, 254;
 
+		--theme-color-primary-300: 143, 165, 253;
 
+		--theme-color-primary-400: 99, 124, 253;
 
+		--theme-color-primary-500: 55, 81, 252;
 
+		--theme-color-primary: 11, 36, 251;
 
+		--theme-color-primary-700: 7, 20, 207;
 
+		--theme-color-primary-800: 4, 9, 164;
 
+		--theme-color-primary-900: 1, 1, 120;
 
+		--theme-color-primary-950: 3, 0, 77;
 
+		--theme-color-dark-50: 255, 254, 245;
 
+		--theme-color-dark-100: 255, 251, 232;
 
+		--theme-color-dark-200: 255, 244, 199;
 
+		--theme-color-dark-300: 255, 234, 166;
 
+		--theme-color-dark-400: 255, 222, 133;
 
+		--theme-color-dark-500: 255, 209, 100;
 
+		--theme-color-dark: 255, 192, 67;
 
+		--theme-color-dark-700: 210, 148, 41;
 
+		--theme-color-dark-800: 166, 108, 22;
 
+		--theme-color-dark-900: 121, 72, 8;
 
+		--theme-color-dark-950: 77, 41, 0;
 
+		--theme-color-primaryBlack: 1, 3, 25;
 
+		--theme-color-primaryWhite: 242, 242, 243;
 
+		--theme-color-darkBlack: 25, 17, 1;
 
+		--theme-color-darkWhite: 243, 242, 242;
 
+		--theme-color-functional-success: 17, 187, 141;
 
+		--theme-color-functional-warning: 185, 80, 0;
 
+		--theme-color-functional-error: 218, 20, 20;
 
+		--theme-color-functional-info: 46, 90, 172;
 
+		--theme-color-extend0: 0, 172, 238;
 
+		--theme-color-extend1: 255, 105, 55;
 
+		--theme-color-extend2: 0, 112, 74;
 
+	}
 
+}
 
+
 
 html {
 
 	-webkit-tap-highlight-color: transparent;
 
 }

+ 46 - 0
packages/create-stdf/templates/vite-tailwind/src/data/Nintendo.js
Vedi File 

@@ -0,0 +1,46 @@
 
+export default {
 
+	name: 'Nintendo',
 
+	color: {
 
+		primary: {
 
+			50: '255, 246, 245', // #FFF6F5
 
+			100: '255, 234, 232', // #FFEAE8
 
+			200: '250, 185, 182', // #FAB9B6
 
+			300: '245, 136, 134', // #F58886
 
+			400: '240, 87, 90', // #F0575A
 
+			500: '235, 43, 52', // #EB2B34
 
+			default: '230, 0, 18', // #E60012
 
+			700: '192, 0, 22', // #C00016
 
+			800: '153, 0, 23', // #990017
 
+			900: '115, 0, 21', // #730015
 
+			950: '77, 0, 17', // #4D0011
 
+		},
 
+		dark: {
 
+			50: '245, 255, 254', // #F5FFFE
 
+			100: '232, 255, 254', // #E8FFFE
 
+			200: '182, 249, 249', // #B6F9F9
 
+			300: '133, 240, 244', // #85F0F4
 
+			400: '87, 228, 238', // #57E4EE
 
+			500: '42, 214, 233', // #2AD6E9
 
+			default: '0, 195, 227', // #00C3E3
 
+			700: '0, 158, 189', // #009EBD
 
+			800: '0, 121, 152', // #007998
 
+			900: '0, 87, 114', // #005772
 
+			950: '0, 56, 77', // #00384D
 
+		},
 
+		primaryBlack: '25, 1, 3', // #190103
 
+		primaryWhite: '243, 242, 242', // #F3F2F2
 
+		darkBlack: '1, 22, 25', // #011619
 
+		darkWhite: '242, 243, 243', // #F2F3F3
 
+		functional: {
 
+			success: '0, 180, 42', // #00b42a
 
+			warning: '255, 125, 0', // #ff7d00
 
+			error: '245, 63, 63', // #f53f3f
 
+			info: '22, 93, 255', // #165dff
 
+		},
 
+		extend: [
 
+			{ color: '0, 82, 217', alias: 'Tencent' }, // #0052d9
 
+			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
 
+			{ color: '243, 112, 33', alias: 'Hermès' }, // #f37021
 
+		],
 
+	},
 
+};

+ 54 - 25
packages/create-stdf/templates/vite-tailwind/tailwind.config.js
Vedi File 

@@ -5,38 +5,67 @@ export default {
 
 		colors: {
 
 			// 主题色
 
 			// Theme Color
 
-			primary: '#0B24FB',
 
-			dark: '#FFC043',
 
-			blue: '#0B24FB', // primary 别名 alias
 
-			yellow: '#FFC043', // dark 别名 alias
 
-
 
-			// 扩展色
 
-			// Extended Color
 
-			purple: '#7356BF',
 
-			green: '#05944F',
 
-			orange: '#FF6937',
 
+			primary: {
 
+				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)',
 
+			},
 
+			dark: {
 
+				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)',
 
+			},
 
+			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
 
+			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
 
+			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
 
+			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
 
 
 			// 功能色
 
 			// Functional Color
 
-			success: '#11BB8D',
 
-			warning: '#B95000',
 
-			error: '#DA1414',
 
-			info: '#2E5AAC',
 
+			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
 
+			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
 
+			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
 
+			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
 
+
 
+			// 扩展色
 
+			// Extended Color
 
+			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
 
+			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
 
+			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
 
 
 			// 中性色
 
 			// Neutral Color
 
 			black: '#000000',
 
-			white: '#fff',
 
-			gray1: '#23262B',
 
-			gray2: '#2A2B2F',
 
-			gray3: '#303239',
 
-			gray4: '#373940',
 
-			gray5: '#414249',
 
-			gray6: '#747B84',
 
-			gray7: '#DADEE3',
 
-			gray8: '#EBEEF2',
 
-			gray9: '#F4F6F9',
 
-			gray10: '#FAFAFB',
 
+			white: '#ffffff',
 
+			gray: {
 
+				50: '#f2f2f2',
 
+				100: '#e6e6e6',
 
+				200: '#cccccc',
 
+				300: '#b3b3b3',
 
+				400: '#999999',
 
+				500: '#808080',
 
+				600: '#666666',
 
+				700: '#4D4D4D',
 
+				800: '#333333',
 
+				900: '#1A1A1A',
 
+				950: '#0D0D0D',
 
+			},
 
 			transparent: 'transparent',
 
 		},
 
 		extend: {},

+ 1 - 1
packages/create-stdf/templates/vite-uno/index.html
Vedi File 

@@ -8,7 +8,7 @@
 
 		<title>Vite + Svelte + UnoCSS + STDF</title>
 
 	</head>
 
 
-	<body class="bg-gray9 dark:bg-gray3 text-black dark:text-white/90">
 
+	<body class="bg-primaryWhite dark:bg-darkBlack text-black dark:text-white">
 
 		<div id="app"></div>
 
 		<script type="module" src="/src/main.js"></script>
 
 	</body>

+ 38 - 21
packages/create-stdf/templates/vite-uno/src/App.svelte
Vedi File 

@@ -3,6 +3,8 @@
 
 	import en_US from 'stdf/lang/en_US';
 
 	import zh_CN from 'stdf/lang/zh_CN';
 
 	import { Button, Cell, Calendar, Icon } from 'stdf';
 
+	import { stdfTheme, switchTheme, darkMode } from 'stdf/theme';
 
+	import NintendoTheme from './data/Nintendo';
 
 	import Counter from './lib/Counter.svelte';
 
 
 	import viteLogo from './assets/vite.svg';
 
@@ -10,21 +12,21 @@
 
 	import unoLogo from './assets/uno.svg';
 
 
 	//切换亮暗模式(toggle light or dark mode)
 
-	let theme = sessionStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
 
-	if (theme === 'dark') {
 
-		document.documentElement.classList.add('dark');
 
+	let mode = sessionStorage.getItem('mode') === 'dark' ? 'dark' : 'light';
 
+	if (mode === 'dark') {
 
+		darkMode();
 
 	}
 
 	const toggleModeFun = () => {
 
-		if (theme === 'dark') {
 
+		if (mode === 'dark') {
 
 			// 切换到(light switch to light)
 
-			theme = 'light';
 
-			document.documentElement.classList.remove('dark');
 
-			sessionStorage.setItem('theme', 'light');
 
+			mode = 'light';
 
+			darkMode(false);
 
+			sessionStorage.setItem('mode', 'light');
 
 		} else {
 
 			// 切换到(dark switch to dark)
 
-			theme = 'dark';
 
-			document.documentElement.classList.add('dark');
 
-			sessionStorage.setItem('theme', 'dark');
 
+			mode = 'dark';
 
+			darkMode();
 
+			sessionStorage.setItem('mode', 'dark');
 
 		}
 
 	};
 
 
@@ -50,6 +52,18 @@
 
 
 	// 日历(calendar)
 
 	let visible = false;
 
+
 
+	// 主题(theme)
 
+	let theme = 'STDF';
 
+	const toggleThemeFun = () => {
 
+		if (theme === 'STDF') {
 
+			theme = 'Nintendo';
 
+			switchTheme(NintendoTheme);
 
+		} else {
 
+			theme = 'STDF';
 
+			switchTheme(stdfTheme);
 
+		}
 
+	};
 
 </script>
 
 
 <main>
 
@@ -73,7 +87,7 @@
 
 			</svg>
 
 		</a>
 
 	</div>
 
-	<div class="text-center my-8 text-xs">
 
+	<div class="text-center my-6 text-xs">
 
 		{#if isZh}
 
 			<p>这是一个使用 Vite + Svelte + UnoCSS + STDF 构建的模板。</p>
 
 			<p class="mt-2">点击上方 LOGO 了解更多。</p>
 
@@ -82,32 +96,34 @@
 
 			<p class="mt-2">Click the logo above to learn more.</p>
 
 		{/if}
 
 	</div>
 
-	<div class="my-8">
 
-		<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: theme === 'dark' } }} on:click={toggleModeFun} />
 
+	<div class="my-6">
 
+		<Cell title={isZh ? '暗模式' : 'Dark mode'} right={{ type: 'switch', switch: { check: mode === 'dark' } }} on:click={toggleModeFun} />
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Counter bind:percent />
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Button heightIn="0" group fill="lineTheme">
 
 			<div class="flex divide-x">
 
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-				<div class="flex-1 py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
+				<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={reduceFunc}>-10</div>
 
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-				<div class="flex-1 py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
+				<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={increaseFunc}>+10</div>
 
 				<!-- svelte-ignore a11y-click-events-have-key-events -->
 
 				<!-- svelte-ignore a11y-no-static-element-interactions -->
 
-				<div class="flex-1 py-2 active:opacity-80" on:click={() => (percent = 20)}>{isZh ? '重置' : 'Reset'}</div>
 
+				<div class="flex-1 border-primary dark:border-dark py-2 active:opacity-80" on:click={() => (percent = 20)}>
 
+					{isZh ? '重置' : 'Reset'}
 
+				</div>
 
 			</div>
 
 		</Button>
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Button fill="lineTheme" on:click={() => (visible = true)}>{isZh ? '日历' : 'Calendar'}</Button>
 
 	</div>
 
 	<Calendar bind:visible />
 
-	<div class="my-8 px-8 flex justify-between">
 
+	<div class="my-6 px-8 flex justify-between">
 
 		<Icon name="cake" theme path="fonts/Heroicons.svg" />
 
 		<Icon name="riding-line" path="fonts/Remix.svg" />
 
 		<Icon name="spy-line" theme path="fonts/Remix.svg" />
 
@@ -119,7 +135,8 @@
 
 		，{isZh ? '最后一个来自' : 'the last one comes from'} <a class="underline" href="https://iconpark.oceanengine.com">IconPark</a>
 
 		，{isZh ? '其余来自' : 'the rest come from'} <a class="underline" href="https://remixicon.com">Remix Icon</a> 。
 
 	</div>
 
-	<div class="my-8">
 
+	<div class="my-6">
 
 		<Button on:click={toggleLangFun}>{isZh ? '切换语言' : 'Toggle language'}</Button>
 
+		<Button fill="lineTheme" on:click={toggleThemeFun}>{isZh ? '切换主题' : 'Toggle theme'}</Button>
 
 	</div>
 
 </main>

+ 36 - 0
packages/create-stdf/templates/vite-uno/src/app.css
Vedi File 

@@ -1,5 +1,41 @@
 
 @import '@unocss/reset/tailwind.css';
 
 
+:root {
 
+	--theme-color-primary-50: 245, 248, 255;
 
+	--theme-color-primary-100: 232, 238, 255;
 
+	--theme-color-primary-200: 187, 203, 254;
 
+	--theme-color-primary-300: 143, 165, 253;
 
+	--theme-color-primary-400: 99, 124, 253;
 
+	--theme-color-primary-500: 55, 81, 252;
 
+	--theme-color-primary: 11, 36, 251;
 
+	--theme-color-primary-700: 7, 20, 207;
 
+	--theme-color-primary-800: 4, 9, 164;
 
+	--theme-color-primary-900: 1, 1, 120;
 
+	--theme-color-primary-950: 3, 0, 77;
 
+	--theme-color-dark-50: 255, 254, 245;
 
+	--theme-color-dark-100: 255, 251, 232;
 
+	--theme-color-dark-200: 255, 244, 199;
 
+	--theme-color-dark-300: 255, 234, 166;
 
+	--theme-color-dark-400: 255, 222, 133;
 
+	--theme-color-dark-500: 255, 209, 100;
 
+	--theme-color-dark: 255, 192, 67;
 
+	--theme-color-dark-700: 210, 148, 41;
 
+	--theme-color-dark-800: 166, 108, 22;
 
+	--theme-color-dark-900: 121, 72, 8;
 
+	--theme-color-dark-950: 77, 41, 0;
 
+	--theme-color-primaryBlack: 1, 3, 25;
 
+	--theme-color-primaryWhite: 242, 242, 243;
 
+	--theme-color-darkBlack: 25, 17, 1;
 
+	--theme-color-darkWhite: 243, 242, 242;
 
+	--theme-color-functional-success: 17, 187, 141;
 
+	--theme-color-functional-warning: 185, 80, 0;
 
+	--theme-color-functional-error: 218, 20, 20;
 
+	--theme-color-functional-info: 46, 90, 172;
 
+	--theme-color-extend0: 0, 172, 238;
 
+	--theme-color-extend1: 255, 105, 55;
 
+	--theme-color-extend2: 0, 112, 74;
 
+}
 
+
 
 :root {
 
 	--un-default-border-color: currentColor;
 
 }

+ 46 - 0
packages/create-stdf/templates/vite-uno/src/data/Nintendo.js
Vedi File 

@@ -0,0 +1,46 @@
 
+export default {
 
+	name: 'Nintendo',
 
+	color: {
 
+		primary: {
 
+			50: '255, 246, 245', // #FFF6F5
 
+			100: '255, 234, 232', // #FFEAE8
 
+			200: '250, 185, 182', // #FAB9B6
 
+			300: '245, 136, 134', // #F58886
 
+			400: '240, 87, 90', // #F0575A
 
+			500: '235, 43, 52', // #EB2B34
 
+			default: '230, 0, 18', // #E60012
 
+			700: '192, 0, 22', // #C00016
 
+			800: '153, 0, 23', // #990017
 
+			900: '115, 0, 21', // #730015
 
+			950: '77, 0, 17', // #4D0011
 
+		},
 
+		dark: {
 
+			50: '245, 255, 254', // #F5FFFE
 
+			100: '232, 255, 254', // #E8FFFE
 
+			200: '182, 249, 249', // #B6F9F9
 
+			300: '133, 240, 244', // #85F0F4
 
+			400: '87, 228, 238', // #57E4EE
 
+			500: '42, 214, 233', // #2AD6E9
 
+			default: '0, 195, 227', // #00C3E3
 
+			700: '0, 158, 189', // #009EBD
 
+			800: '0, 121, 152', // #007998
 
+			900: '0, 87, 114', // #005772
 
+			950: '0, 56, 77', // #00384D
 
+		},
 
+		primaryBlack: '25, 1, 3', // #190103
 
+		primaryWhite: '243, 242, 242', // #F3F2F2
 
+		darkBlack: '1, 22, 25', // #011619
 
+		darkWhite: '242, 243, 243', // #F2F3F3
 
+		functional: {
 
+			success: '0, 180, 42', // #00b42a
 
+			warning: '255, 125, 0', // #ff7d00
 
+			error: '245, 63, 63', // #f53f3f
 
+			info: '22, 93, 255', // #165dff
 
+		},
 
+		extend: [
 
+			{ color: '0, 82, 217', alias: 'Tencent' }, // #0052d9
 
+			{ color: '26, 173, 25', alias: 'WeChat' }, // #1aad19
 
+			{ color: '243, 112, 33', alias: 'Hermès' }, // #f37021
 
+		],
 
+	},
 
+};

+ 54 - 25
packages/create-stdf/templates/vite-uno/uno.config.js
Vedi File 

@@ -11,38 +11,67 @@ export default defineConfig({
 
 		colors: {
 
 			// 主题色
 
 			// Theme Color
 
-			primary: '#0B24FB',
 
-			dark: '#FFC043',
 
-			blue: '#0B24FB', // primary 别名 alias
 
-			yellow: '#FFC043', // dark 别名 alias
 
-
 
-			// 扩展色
 
-			// Extended Color
 
-			purple: '#7356BF',
 
-			green: '#05944F',
 
-			orange: '#FF6937',
 
+			primary: {
 
+				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)',
 
+			},
 
+			dark: {
 
+				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
 
+				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
 
+				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
 
+				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
 
+				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
 
+				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
 
+				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
 
+				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
 
+				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
 
+				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
 
+				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)',
 
+			},
 
+			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
 
+			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
 
+			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
 
+			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
 
 
 			// 功能色
 
 			// Functional Color
 
-			success: '#11BB8D',
 
-			warning: '#B95000',
 
-			error: '#DA1414',
 
-			info: '#2E5AAC',
 
+			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
 
+			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
 
+			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
 
+			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
 
+
 
+			// 扩展色
 
+			// Extended Color
 
+			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
 
+			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
 
+			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
 
 
 			// 中性色
 
 			// Neutral Color
 
 			black: '#000000',
 
-			white: '#fff',
 
-			gray1: '#23262B',
 
-			gray2: '#2A2B2F',
 
-			gray3: '#303239',
 
-			gray4: '#373940',
 
-			gray5: '#414249',
 
-			gray6: '#747B84',
 
-			gray7: '#DADEE3',
 
-			gray8: '#EBEEF2',
 
-			gray9: '#F4F6F9',
 
-			gray10: '#FAFAFB',
 
+			white: '#ffffff',
 
+			gray: {
 
+				50: '#f2f2f2',
 
+				100: '#e6e6e6',
 
+				200: '#cccccc',
 
+				300: '#b3b3b3',
 
+				400: '#999999',
 
+				500: '#808080',
 
+				600: '#666666',
 
+				700: '#4D4D4D',
 
+				800: '#333333',
 
+				900: '#1A1A1A',
 
+				950: '#0D0D0D',
 
+			},
 
 			transparent: 'transparent',
 
 		},
 
 		extend: {},