pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

improve ThemeController design

Browse source
This commit is contained in:
Kim, Jimin 2025-03-17 23:23:10 +09:00
parent 2e5d9dacfc
commit d8a5fcc23c
Signed by: pomp
GPG key ID: D3932F82A0667A3B
4 changed files with 111 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

19
apps/rank/components/ThemeController.vue
View file

@ -1,9 +1,24 @@
<script setup>
const colorMode = useColorMode()
const icon = computed(() => {
switch (colorMode.preference) {
case "system":
return "material-symbols:monitor-outline"
case "dark":
return "material-symbols:moon-stars-outline"
case "light":
return "material-symbols:sunny-outline-rounded"
default:
return "material-symbols:monitor-outline"
}
})
</script>
<template>
<p class="p-4 pb-2">
<div class="flex justify-end gap-2 p-2">
<Icon :name="icon" size="32" />
<select
v-model="colorMode.preference"
class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white"
@ -12,5 +27,5 @@ const colorMode = useColorMode()
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</p>
</div>
</template>

1
apps/rank/nuxt.config.ts
View file

@ -9,6 +9,7 @@ export default defineNuxtConfig({
"@nuxtjs/color-mode",
"@nuxtjs/tailwindcss",
"@nuxtjs/google-fonts",
"@nuxt/icon",
],
app: {
head: {

1
apps/rank/package.json
View file

@ -10,6 +10,7 @@
"postinstall": "nuxt prepare"
},
"dependencies": {
"@nuxt/icon": "1.11.0",
"@nuxtjs/color-mode": "3.5.2",
"@nuxtjs/google-fonts": "3.2.0",
"@pompydev/prettier-config": "workspace:*",

94
pnpm-lock.yaml generated
View file

@ -152,6 +152,9 @@ importers:
apps/rank:
dependencies:
'@nuxt/icon':
specifier: 1.11.0
version: 1.11.0(magicast@0.3.5)(vite@6.2.2(@types/node@20.12.7)(jiti@2.4.2)(sass@1.75.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.4.5))
'@nuxtjs/color-mode':
specifier: 3.5.2
version: 3.5.2(magicast@0.3.5)
@ -480,6 +483,12 @@ packages:
resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
engines: {node: '>=6.0.0'}
'@antfu/install-pkg@1.0.0':
resolution: {integrity: sha512-xvX6P/lo1B3ej0OsaErAjqgFYzYVcJpamjLAFLYh9vRJngBrMoUG7aVnrGTeqM7yxbyTD5p3F2+0/QUEh8Vzhw==}
'@antfu/utils@8.1.1':
resolution: {integrity: sha512-Mex9nXf9vR6AhcXmMrlz/HVgYYZpVGJ6YlPgwl7UnaFpnshXs6EK/oa5Gpf3CzENMjkvEx2tQtntGnb7UtSTOQ==}
'@babel/code-frame@7.22.5':
resolution: {integrity: sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==}
engines: {node: '>=6.9.0'}
@ -1274,6 +1283,20 @@ packages:
resolution: {integrity: sha512-dvuCeX5fC9dXgJn9t+X5atfmgQAzUOWqS1254Gh0m6i8wKd10ebXkfNKiRK+1GWi/yTvvLDHpoxLr0xxxeslWw==}
deprecated: Use @eslint/object-schema instead
'@iconify/collections@1.0.528':
resolution: {integrity: sha512-AfQ7FtDlLsMsv1y1nfJ1WBF6R0HdbNe+BmUZ2bmekNuOzv0z+TMNF02EFUunkH2zQ+NFAEL02O8hvMjHZhPLLA==}
'@iconify/types@2.0.0':
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
'@iconify/utils@2.3.0':
resolution: {integrity: sha512-GmQ78prtwYW6EtzXRU1rY+KwOKfz32PD7iJh6Iyqw68GiKuoZ2A6pRtzWONz5VQJbp50mEjXh/7NkumtrAgRKA==}
'@iconify/vue@4.3.0':
resolution: {integrity: sha512-Xq0h6zMrHBbrW8jXJ9fISi+x8oDQllg5hTDkDuxnWiskJ63rpJu9CvJshj8VniHVTbsxCg9fVoPAaNp3RQI5OQ==}
peerDependencies:
vue: '>=3'
'@inqling/svelte-icons@3.5.0':
resolution: {integrity: sha512-iYkD0dgHIHSaCXw4/i0VstAmrUcXFGGB+gOc5nKT5DHbGGNlPTDAAnQNtmUjphx+uVY33i48w4ueHJLZuYFp0w==}
peerDependencies:
@ -1540,6 +1563,9 @@ packages:
peerDependencies:
vite: '>=6.0'
'@nuxt/icon@1.11.0':
resolution: {integrity: sha512-j82YbT7/Z02W/6jhiMoXHdtpSsCBfAoI3EkJ5Axi0C30ALiqvmrmfwd+CG7dftyncj51goBi1YMb6I4vNHK9nA==}
'@nuxt/kit@3.16.0':
resolution: {integrity: sha512-yPfhk58BG6wJhELkGOTCOlkMDbZkizk3IaINcyTKm+hBKiK3SheLt7S9HStNL+qZSfH2Cf7A8sYp6M72lOIEtA==}
engines: {node: '>=18.12.0'}
@ -3873,6 +3899,10 @@ packages:
resolution: {integrity: sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==}
engines: {node: '>=8'}
globals@15.15.0:
resolution: {integrity: sha512-7ACyT3wmyp3I61S4fG682L0VA2RGD9otkqGJIwNUMF1SWUombIIk+af1unuDYgMm082aHYwD+mzJvv9Iu8dsgg==}
engines: {node: '>=18'}
globalthis@1.0.3:
resolution: {integrity: sha512-sFdI5LyBiNTHjRd7cGPWapiHWMOXKyuBNX/cWJ3NfzrZQVa8GI/8cofCl74AOVqq9W5kNmguTIzJ/1s2gyI9wA==}
engines: {node: '>= 0.4'}
@ -4703,6 +4733,9 @@ packages:
resolution: {integrity: sha512-Afhqq0Vq3W7C+/rW6IqHVBDLzqObwZ07JaUNUEF8yCQ6afiyFE3RAy+i7V0E46XOWlH7vPWn/x0vsZwNy6PWxw==}
engines: {node: ^4.8.4 || ^6.10.1 || ^7.10.1 || >= 8.1.4}
kolorist@1.8.0:
resolution: {integrity: sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==}
language-subtag-registry@0.3.22:
resolution: {integrity: sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==}
@ -7614,6 +7647,13 @@ snapshots:
'@jridgewell/gen-mapping': 0.3.3
'@jridgewell/trace-mapping': 0.3.18
'@antfu/install-pkg@1.0.0':
dependencies:
package-manager-detector: 0.2.11
tinyexec: 0.3.2
'@antfu/utils@8.1.1': {}
'@babel/code-frame@7.22.5':
dependencies:
'@babel/highlight': 7.22.5
@ -7641,7 +7681,7 @@ snapshots:
'@babel/traverse': 7.22.8
'@babel/types': 7.22.5
convert-source-map: 1.9.0
debug: 4.3.4(supports-color@5.5.0)
debug: 4.4.0(supports-color@9.4.0)
gensync: 1.0.0-beta.2
json5: 2.2.3
semver: 6.3.1
@ -8280,6 +8320,30 @@ snapshots:
'@humanwhocodes/object-schema@2.0.1': {}
'@iconify/collections@1.0.528':
dependencies:
'@iconify/types': 2.0.0
'@iconify/types@2.0.0': {}
'@iconify/utils@2.3.0':
dependencies:
'@antfu/install-pkg': 1.0.0
'@antfu/utils': 8.1.1
'@iconify/types': 2.0.0
debug: 4.4.0(supports-color@9.4.0)
globals: 15.15.0
kolorist: 1.8.0
local-pkg: 1.1.1
mlly: 1.7.4
transitivePeerDependencies:
- supports-color
'@iconify/vue@4.3.0(vue@3.5.13(typescript@5.4.5))':
dependencies:
'@iconify/types': 2.0.0
vue: 3.5.13(typescript@5.4.5)
'@inqling/svelte-icons@3.5.0(svelte@4.2.15)':
dependencies:
svelte: 4.2.15
@ -8711,6 +8775,28 @@ snapshots:
- utf-8-validate
- vue
'@nuxt/icon@1.11.0(magicast@0.3.5)(vite@6.2.2(@types/node@20.12.7)(jiti@2.4.2)(sass@1.75.0)(terser@5.39.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.4.5))':
dependencies:
'@iconify/collections': 1.0.528
'@iconify/types': 2.0.0
'@iconify/utils': 2.3.0
'@iconify/vue': 4.3.0(vue@3.5.13(typescript@5.4.5))
'@nuxt/devtools-kit': 2.3.0(magicast@0.3.5)(vite@6.2.2(@types/node@20.12.7)(jiti@2.4.2)(sass@1.75.0)(terser@5.39.0)(yaml@2.7.0))
'@nuxt/kit': 3.16.0(magicast@0.3.5)
consola: 3.4.0
local-pkg: 1.1.1
mlly: 1.7.4
ohash: 2.0.11
pathe: 2.0.3
picomatch: 4.0.2
std-env: 3.8.1
tinyglobby: 0.2.12
transitivePeerDependencies:
- magicast
- supports-color
- vite
- vue
'@nuxt/kit@3.16.0(magicast@0.3.5)':
dependencies:
c12: 3.0.2(magicast@0.3.5)
@ -11509,6 +11595,8 @@ snapshots:
dependencies:
type-fest: 0.20.2
globals@15.15.0: {}
globalthis@1.0.3:
dependencies:
define-properties: 1.2.1
@ -12132,7 +12220,7 @@ snapshots:
istanbul-lib-source-maps@4.0.1:
dependencies:
debug: 4.3.4(supports-color@5.5.0)
debug: 4.4.0(supports-color@9.4.0)
istanbul-lib-coverage: 3.2.0
source-map: 0.6.1
transitivePeerDependencies:
@ -12629,6 +12717,8 @@ snapshots:
transitivePeerDependencies:
- supports-color
kolorist@1.8.0: {}
language-subtag-registry@0.3.22: {}
language-tags@1.0.5: