diff --git a/bun.lock b/bun.lock index 72ecd0b..bc0928e 100644 --- a/bun.lock +++ b/bun.lock @@ -4,7 +4,9 @@ "": { "name": "fpga-weblab", "dependencies": { + "log-symbols": "^7.0.0", "pinia": "^3.0.1", + "ts-log": "^2.2.7", "vue": "^3.5.13", "vue-router": "4", }, @@ -413,6 +415,8 @@ "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.29.2", "", { "os": "win32", "cpu": "x64" }, "sha512-EdIUW3B2vLuHmv7urfzMI/h2fmlnOQBk1xlsDxkN1tCWKjNFjfLhGxYk8C8mzpSfr+A6jFFIi8fU6LbQGsRWjA=="], + "log-symbols": ["log-symbols@7.0.0", "", { "dependencies": { "is-unicode-supported": "^2.0.0", "yoctocolors": "^2.1.1" } }, "sha512-zrc91EDk2M+2AXo/9BTvK91pqb7qrPg2nX/Hy+u8a5qQlbaOflCKO+6SqgZ+M+xUFxGdKTgwnGiL96b1W3ikRA=="], + "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="], "magic-string": ["magic-string@0.30.17", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0" } }, "sha512-sNPKHvyjVf7gyjwS4xGTaW/mCnF8wnjtifKBEhxfZ7E/S8tQ0rssrwGNn6q8JH/ohItJfSQp9mBtQYuTlH5QnA=="], @@ -501,6 +505,8 @@ "totalist": ["totalist@3.0.1", "", {}, "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ=="], + "ts-log": ["ts-log@2.2.7", "", {}, "sha512-320x5Ggei84AxzlXp91QkIGSw5wgaLT6GeAH0KsqDmRZdVWW2OiSeVvElVoatk3f7nicwXlElXsoFkARiGE2yg=="], + "typescript": ["typescript@5.7.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-84MVSjMEHP+FQRPy3pX9sTVV/INIex71s9TL2Gm5FG/WG1SqXeKyZ0k7/blY/4FdOzI12CBy1vGc4og/eus0fw=="], "undici-types": ["undici-types@6.20.0", "", {}, "sha512-Ny6QZ2Nju20vw1SRHe3d9jVu6gJ+4e3+MMpqu7pqE5HT6WsTSlce++GQmK5UXS8mzV8DSYHrQH+Xrf2jVcuKNg=="], diff --git a/package.json b/package.json index 5d042b9..ffb79ab 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,9 @@ "type-check": "bunx --bun vue-tsc --build" }, "dependencies": { + "log-symbols": "^7.0.0", "pinia": "^3.0.1", + "ts-log": "^2.2.7", "vue": "^3.5.13", "vue-router": "4" }, diff --git a/src/App.vue b/src/App.vue index 55ba6cc..fc43acd 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,16 +1,23 @@ diff --git a/src/components/ThemeControlButton.vue b/src/components/ThemeControlButton.vue new file mode 100644 index 0000000..3529504 --- /dev/null +++ b/src/components/ThemeControlButton.vue @@ -0,0 +1,36 @@ + + + + + diff --git a/src/components/ThemeControlToggle.vue b/src/components/ThemeControlToggle.vue new file mode 100644 index 0000000..d80f02a --- /dev/null +++ b/src/components/ThemeControlToggle.vue @@ -0,0 +1,45 @@ + + + + + diff --git a/src/stores/counter.ts b/src/stores/counter.ts index b6757ba..7a72d1f 100644 --- a/src/stores/counter.ts +++ b/src/stores/counter.ts @@ -10,3 +10,4 @@ export const useCounterStore = defineStore('counter', () => { return { count, doubleCount, increment } }) + diff --git a/src/stores/theme.ts b/src/stores/theme.ts new file mode 100644 index 0000000..55d9306 --- /dev/null +++ b/src/stores/theme.ts @@ -0,0 +1,47 @@ +import { ref, computed } from 'vue' +import { defineStore } from 'pinia' + +export const useThemeStore = defineStore('theme', () => { + const allTheme = ["winter", "night"] + const darkTheme = "night"; + const lightTheme = "winter"; + const currentTheme = ref("night") + + function setTheme(theme: string) { + const isContained: boolean = allTheme.includes(theme) + if (isContained) { + currentTheme.value = theme + } + else { + console.error('Not have such theme: ${theme}') + } + } + + function toggleTheme() { + if (currentTheme.value == darkTheme) { + currentTheme.value = lightTheme; + } else if (currentTheme.value == lightTheme) { + currentTheme.value = darkTheme; + } else { + currentTheme.value = lightTheme; + } + } + + function isDarkTheme(): boolean { + return currentTheme.value == darkTheme + } + + function isLightTheme(): boolean { + return currentTheme.value == lightTheme + } + + return { + allTheme, + currentTheme, + setTheme, + toggleTheme, + isDarkTheme, + isLightTheme + } +}) +