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

refactor out ThemeController

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

24
apps/rank/app.vue
View file

@ -1,21 +1,11 @@
<script setup>
const colorMode = useColorMode()
</script>
<template> <template>
<div class="min-h-screen bg-white dark:bg-gray-800 dark:text-gray-200"> <ThemeController />
<p class="p-4 pb-2">
<select <main class="">
v-model="colorMode.preference" <div class="mx-auto max-w-screen-mobile">
class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white" <NuxtPage />
> </div>
<option value="system">System</option> </main>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</p>
<NuxtPage class="mx-auto p-4" />
</div>
</template> </template>
<style> <style>

16
apps/rank/components/ThemeController.vue Normal file
View file

@ -0,0 +1,16 @@
<script setup>
const colorMode = useColorMode()
</script>
<template>
<p class="p-4 pb-2">
<select
v-model="colorMode.preference"
class="h-8 w-24 border dark:border-gray-700 dark:bg-gray-900 dark:text-white"
>
<option value="system">System</option>
<option value="light">Light</option>
<option value="dark">Dark</option>
</select>
</p>
</template>