feat: Working theme switch button (need styling)

Divelix · May 14, 2024 · 5c4880b · 5c4880b
1 parent 35fc22a
commit 5c4880b
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 12 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/index.html b/index.html
@@ -3,7 +3,7 @@
 
 <head>
   <meta charset="UTF-8">
-  <link rel='icon' href="/favicon.ico">
+  <link rel='icon' href="/favicon.ico" sizes="any">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Rotation Converter</title>
 </head>

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@types/three": "^0.162.0",
+    "@vueuse/core": "^10.9.0",
     "three": "^0.162.0",
     "vue": "^3.4.15"
   },

diff --git a/src/App.vue b/src/App.vue
@@ -7,6 +7,7 @@ import VisMat from './components/VisMat.vue'
 import VisQuat from './components/VisQuat.vue'
 import Help from './components/Help.vue'
 import Links from './components/Links.vue'
+import ColorMode from './components/ColorMode.vue'
 
 provide("isLocal", shallowRef(true))
 provide("isEdit", shallowRef(false))
@@ -29,6 +30,7 @@ provide("snapDenom", shallowRef(6))
     <h1>Rotation Converter</h1>
     <Help />
     <Links />
+    <ColorMode />
   </header>
 
   <main>

diff --git a/src/assets/base.css b/src/assets/base.css
@@ -46,19 +46,17 @@
   --color-text: var(--c-text-dark-2);
 }
 
-/* @media (prefers-color-scheme: light) {
-  :root {
-    --color-background: var(--c-light-0);
-    --color-background-soft: var(--c-light-1);
-    --color-background-mute: var(--c-light-2);
+.dark {
+  --color-background: var(--c-light-0);
+  --color-background-soft: var(--c-light-1);
+  --color-background-mute: var(--c-light-2);
 
-    --color-border: var(--c-divider-light-2);
-    --color-border-hover: var(--c-divider-light-1);
+  --color-border: var(--c-divider-light-2);
+  --color-border-hover: var(--c-divider-light-1);
 
-    --color-heading: var(--c-text-light-1);
-    --color-text: var(--c-text-light-1);
-  }
-} */
+  --color-heading: var(--c-text-light-1);
+  --color-text: var(--c-text-light-1);
+}
 
 *,
 *::before,

diff --git a/src/components/ColorMode.vue b/src/components/ColorMode.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import { useDark, useToggle } from '@vueuse/core'
+import IconMoon from './icons/IconMoon.vue'
+import IconSun from './icons/IconSun.vue'
+
+const isDark = useDark()
+const toggleDark = useToggle(isDark)
+
+</script>
+
+<template>
+    <div class="mode">
+        <button @click="toggleDark()">
+            <IconMoon v-if="isDark" />
+            <IconSun v-else />
+        </button>
+    </div>
+</template>
+
+<style scoped>
+.mode {
+    position: fixed;
+    z-index: 1;
+    top: 33px;
+    right: 125px;
+}
+
+button {
+    width: 40px;
+    height: 40px;
+    border: 0;
+    border-radius: 50%;
+    background-color: transparent;
+    cursor: pointer;
+}
+</style>
diff --git a/src/components/icons/IconMoon.vue b/src/components/icons/IconMoon.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
+    <path
+      d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z" />
+  </svg>
+</template>
+
+<style scoped>
+path {
+  fill: var(--c-text-dark-2);
+}
+</style>
diff --git a/src/components/icons/IconSun.vue b/src/components/icons/IconSun.vue
@@ -0,0 +1,12 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path
+      d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM160 256a96 96 0 1 1 192 0 96 96 0 1 1 -192 0zm224 0a128 128 0 1 0 -256 0 128 128 0 1 0 256 0z" />
+  </svg>
+</template>
+
+<style scoped>
+path {
+  fill: var(--c-text-dark-2);
+}
+</style>