Migrate to bulma-css-variables and introduce dark mode (#954)

Co-authored-by: Adrian Simmons <adrian@perlucida.co.uk>
Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/954
Reviewed-by: dpschen <dpschen@noreply.kolaente.de>
Reviewed-by: konrad <k@knt.li>
Co-authored-by: adrinux <adrian@perlucida.co.uk>
Co-committed-by: adrinux <adrian@perlucida.co.uk>

src/composables/useColorScheme.ts

@@ -0,0 +1,48 @@
+import {computed, watch, readonly} from 'vue'
+import {useStorage, createSharedComposable, ColorSchemes, usePreferredColorScheme, tryOnMounted} from '@vueuse/core'
+
+const STORAGE_KEY = 'color-scheme'
+
+const DEFAULT_COLOR_SCHEME_SETTING: ColorSchemes = 'light'
+
+const CLASS_DARK = 'dark'
+const CLASS_LIGHT = 'light'
+
+// This is built upon the vueuse useDark
+// Main differences:
+// - usePreferredColorScheme
+// - doesn't allow setting via the `isDark` ref.
+// - instead the store is exposed
+// - value is synced via `createSharedComposable`
+// https://github.com/vueuse/vueuse/blob/main/packages/core/useDark/index.ts 
+export const useColorScheme = createSharedComposable(() => {
+	const store = useStorage<ColorSchemes>(STORAGE_KEY, DEFAULT_COLOR_SCHEME_SETTING)
+
+	const preferredColorScheme = usePreferredColorScheme()
+
+	const isDark = computed<boolean>(() => {
+		if (store.value !== 'auto') {
+			return store.value === 'dark'
+		}
+
+		const autoColorScheme = preferredColorScheme.value === 'no-preference' 
+			? DEFAULT_COLOR_SCHEME_SETTING
+			: preferredColorScheme.value
+		return autoColorScheme === 'dark'
+	})
+
+    function onChanged(v: boolean) {
+		const el = window?.document.querySelector('html')
+		el?.classList.toggle(CLASS_DARK, v)
+		el?.classList.toggle(CLASS_LIGHT, !v)
+	}
+
+    watch(isDark, onChanged, { flush: 'post' })
+
+	tryOnMounted(() => onChanged(isDark.value))
+
+	return {
+		store,
+		isDark: readonly(isDark),
+	}
+})