eggy/public
1
0
Fork 0
Code Issues 7 Pull Requests 1 Releases Wiki Activity

fix: use native color-mode for dark mode

Browse Source 
fixes all of our problems haha
This commit is contained in:
eggy 2022-08-12 21:16:08 -04:00
parent b5184838cf
commit 8474f4ff81
1 changed files with 4 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
components/ColourPicker.vue
View File

@ -1,34 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue";
import IconSun from "@/assets/images/sun.svg?component"; import IconSun from "@/assets/images/sun.svg?component";
import IconMoon from "@/assets/images/moon.svg?component"; import IconMoon from "@/assets/images/moon.svg?component";
const colorMode = useColorMode(); const colorMode = useColorMode();
const isToggled = ref(colorMode.value === "dark");
const toggle = () => { const toggle = () => {
isToggled.value = !isToggled.value; colorMode.preference = colorMode.value === "light" ? "dark" : "light";
colorMode.preference = isToggled.value ? "dark" : "light";
}; };
/*
// it unchecks on refresh and i can't make it automatically
// check itself
const darkToggleEl: Ref<HTMLInputElement> = ref(null);
onMounted(() => {
if (isToggled.value) {
darkToggleEl.value.checked = true;
}
});
*/
</script> </script>
<template> <template>
<label for="dark-toggle" :class="['toggle-wrapper']"> <label for="dark-toggle" class="toggle-wrapper">
<div :class="['toggle', isToggled ? 'enabled' : 'disabled']"> <div class="toggle">
<div class="icons"> <div class="icons">
<IconMoon /> <IconMoon />
<IconSun /> <IconSun />
@ -37,7 +20,6 @@ onMounted(() => {
id="dark-toggle" id="dark-toggle"
name="dark-toggle" name="dark-toggle"
type="checkbox" type="checkbox"
:checked="isToggled"
ref="darkToggleEl" ref="darkToggleEl"
@click="toggle" @click="toggle"
/> />
@ -87,7 +69,7 @@ html.dark .toggle-wrapper {
transition: transform var(--transition), background var(--transition); transition: transform var(--transition), background var(--transition);
} }
.toggle.enabled::before { html.dark .toggle::before {
transform: translateX(calc(var(--scale))); transform: translateX(calc(var(--scale)));
} }