feat: Made canvas adapt to color mode

src/App.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { provide, ref, shallowRef } from 'vue'
+import { useDark } from '@vueuse/core'
 import { Axes, ToastType } from './types'
 import Vis3D from './components/Vis3D.vue'
 import VisControls from './components/VisControls.vue'
@@ -22,6 +23,7 @@ provide("rotMat", ref(new Array(9).fill(0)))
 provide("quat", ref(new Array(4).fill(0)))
 provide("currAxis", ref(Axes.X))
 provide("snapDenom", shallowRef(6))
+provide("isDark", useDark())
 
 </script>
 

src/assets/base.css

@@ -1,6 +1,10 @@
 :root {
   --c-light-0: #ffffff;
   --c-light-1: #eeeeee;
+  --c-light-2: #aaaaaa;
+  --c-light-3: #888888;
+  --c-light-4: #777777;
+  --c-light-5: #555555;
   --c-light-t: rgba(235, 235, 235, 0.64);
 
   --c-dark-0: #000000;

src/components/ColorMode.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { useDark, useToggle } from '@vueuse/core'
+import { useToggle } from '@vueuse/core'
 import IconMoon from './icons/IconMoon.vue'
 import IconSun from './icons/IconSun.vue'
+import { inject, type WritableComputedRef } from 'vue';
 
-const isDark = useDark()
+const isDark: WritableComputedRef<Boolean> = inject("isDark")!
 const toggleDark = useToggle(isDark)
 
 </script>

src/components/Vis3D.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
 import { Axes } from '../types'
 import * as Constants from '@/const';
-import { BufferGeometry, CylinderGeometry, Group, Line, LineBasicMaterial, Matrix3, Matrix4, Mesh, MeshBasicMaterial, PerspectiveCamera, Quaternion, Scene, Vector3, WebGLRenderer } from 'three'
-import { onMounted, ref, inject, watch, type Ref, type ShallowRef, computed } from 'vue'
+import { BufferGeometry, CylinderGeometry, Group, Line, LineBasicMaterial, Matrix3, Matrix4, Mesh, MeshBasicMaterial, PerspectiveCamera, Quaternion, Scene, Vector3, WebGLRenderer, type ColorRepresentation } from 'three'
+import { onMounted, ref, inject, watch, type Ref, type ShallowRef, computed, type WritableComputedRef, shallowRef } from 'vue'
 import { OrbitControls } from 'three/examples/jsm/Addons.js';
 import Snap from './Snap.vue'
 
+// Constants
+const [W, H] = [500, 500]
+const CAM_POS = new Vector3(2, 2, 2)
+const CAM_LOOKAT = new Vector3(0, 0, 0)
+const AXIS_LEN = 2
+const CYL_RADIUS = 0.05
+const CYL_LENGTH = 1
+const CYL_RESOLUTION = 10
+const DARK_COLOR = 0x222222
+const LIGHT_COLOR = 0xaaaaaa
+
 // Reactive stuff
 const isEdit: ShallowRef<Boolean> = inject("isEdit")!
 const isLocal: ShallowRef<Boolean> = inject("isLocal")!
@@ -18,18 +29,11 @@ const axisCounters: Ref<number[]> = inject("axisCounters")!
 const rotMat: Ref<number[]> = inject("rotMat")!
 const quat: Ref<number[]> = inject("quat")!
 const currAxis: Ref<Axes> = inject("currAxis")!
+const isDark: WritableComputedRef<Boolean> = inject("isDark")!
+const canvasBgColor = computed(() => isDark.value ? DARK_COLOR : LIGHT_COLOR)
 const canvas = ref<HTMLCanvasElement | null>(null)
 const snapSize = computed(() => Math.PI / snapDenom.value)
 
-// Constants
-const [W, H] = [500, 500]
-const CAM_POS = new Vector3(2, 2, 2)
-const CAM_LOOKAT = new Vector3(0, 0, 0)
-const AXIS_LEN = 2
-const CYL_RADIUS = 0.05
-const CYL_LENGTH = 1
-const CYL_RESOLUTION = 10
-
 // Variables
 let controls: OrbitControls
 let renderer: WebGLRenderer
@@ -59,6 +63,10 @@ watch(needReset, (newReset) => {
   needReset.value = false
 })
 
+watch(isDark, (newIsDark) => {
+  renderer.setClearColor(canvasBgColor.value)
+})
+
 // Methods
 function snapRotate(axis: Axes, rads: number) {
   currAxis.value = axis
@@ -357,7 +365,7 @@ onMounted(() => {
     canvas: canvas.value as unknown as HTMLCanvasElement,
     antialias: true,
   })
-  renderer.setClearColor(0x222222)
+  renderer.setClearColor(canvasBgColor.value)
   // renderer.setSize(W, H)
   renderer.render(scene, camera)
   controls = new OrbitControls(camera, renderer.domElement)