Peaceultime
/
obsidian-visualiser
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Change a few colors and setup the theme switch to test the light theme

This commit is contained in:
Peaceultime 2024-11-04 13:49:49 +01:00
parent 5ce2d3e236
commit 633231f821
4 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/ThemeSwitch.client.vue Normal file
View File

@ -0,0 +1,16 @@
<script setup>
const colorMode = useColorMode()
const isDark = computed({
get() {
return colorMode.value === 'dark'
},
set() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
}
})
</script>
<template>
<Switch v-model="isDark" onIcon="radix-icons:moon" offIcon="radix-icons:sun" />
</template>

7
components/base/Switch.vue
View File

@ -1,17 +1,20 @@
<template>
<Label class="flex justify-center items-center my-2">{{ label }}
<SwitchRoot v-model:checked="model" :disabled="disabled"
class="mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
class="group mx-3 w-12 h-6 select-none transition-all border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 outline-none
data-[state=checked]:bg-light-35 dark:data-[state=checked]:bg-dark-35 hover:border-light-50 dark:hover:border-dark-50 focus:shadow-raw focus:shadow-light-40 dark:focus:shadow-dark-40
data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20">
data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 relative">
<SwitchThumb
class="block w-[18px] h-[18px] translate-x-[2px] will-change-transform transition-transform bg-light-50 dark:bg-dark-50 data-[state=checked]:translate-x-[26px]
data-[disabled]:bg-light-30 dark:data-[disabled]:bg-dark-30 data-[disabled]:border-light-30 dark:data-[disabled]:border-dark-30" />
<Icon v-if="onIcon && offIcon" :icon="onIcon" class="group-data-[state=checked]:opacity-100 group-data-[state=unchecked]:opacity-0 absolute top-1 left-1 transition-opacity" />
<Icon v-if="onIcon && offIcon" :icon="offIcon" class="group-data-[state=checked]:opacity-0 group-data-[state=unchecked]:opacity-100 absolute top-1 right-1 transition-opacity" />
</SwitchRoot>
</Label>
</template>
<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';
const { label, disabled, onIcon, offIcon } = defineProps<{
label?: string
disabled?: boolean

8
nuxt.config.ts
View File

@ -61,10 +61,10 @@ export default defineNuxtConfig({
0: "#ffffff",
5: "#fcfcfc",
10: "#fafafa",
20: "#f6f6f6",
25: "#e3e3e3",
30: "#e0e0e0",
35: "#d4d4d4",
20: "#f7f7f7",
25: "#e4e4e4",
30: "#dfdfdf",
35: "#d2d2d2",
40: "#bdbdbd",
50: "#ababab",
60: "#707070",

5
pages/index.vue
View File

@ -17,7 +17,10 @@ watch(loading, (value) => {
<div class="w-1/2 flex flex-1 flex-col justify-center items-center gap-2">
<Collapsible label="Options">
<div class="flex flex-col justify-start items-start">
<Switch label="Verrouiler" v-model="disabled" />
<div class="flex flex-row">
<Switch v-model="disabled" onIcon="radix-icons:lock-closed" offIcon="radix-icons:lock-open-2" />
<ThemeSwitch />
</div>
<SliderInput :disabled="disabled" :label="`Prix: ${price.toFixed(2)}€`" :min="0" :max="1500" :step="0.25"
v-model="price" />
<TextInput label="Saisir un pseudonyme" :disabled="disabled" v-model="username" />