From 3bec20ed9c7660f87bfabe025f06e54fadf95619 Mon Sep 17 00:00:00 2001 From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com> Date: Thu, 17 Mar 2022 13:19:15 -0700 Subject: [PATCH 1/9] Added simple theme detection and style changes --- src/lib/stores/theme.ts | 52 ++++++++++++++++++++++++++++++++++++++ src/routes/__layout.svelte | 16 ++++++++++++ static/global.css | 9 +++++-- 3 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 src/lib/stores/theme.ts diff --git a/src/lib/stores/theme.ts b/src/lib/stores/theme.ts new file mode 100644 index 000000000..09c8a4ac8 --- /dev/null +++ b/src/lib/stores/theme.ts @@ -0,0 +1,52 @@ +import { writable } from 'svelte/store'; + +export enum AcmTheme { + Light = 'light', + Dark = 'dark', +} + +const STORAGE_KEY = 'theme'; + +function get(): AcmTheme { + const savedValue = localStorage.getItem(STORAGE_KEY); + const validTheme = Object.values(AcmTheme).includes(savedValue as AcmTheme); + if (validTheme) return savedValue as AcmTheme; + return matchMedia('(prefers-color-scheme: dark)').matches ? AcmTheme.Dark : AcmTheme.Light; +} + +function save(value: AcmTheme) { + localStorage.setItem(STORAGE_KEY, value); + + switch (value) { + case AcmTheme.Dark: { + document.body.classList.add(AcmTheme.Dark); + return; + } + default: { + document.body.classList.remove(AcmTheme.Dark); + return; + } + } +} + +function createTheme(defaultValue = AcmTheme.Light) { + const { subscribe, set, update } = writable(defaultValue); + + function init() { + const saved = get(); + set(saved); + subscribe(save); + } + + function toggle() { + update((value) => { + const nextValue = value === AcmTheme.Light ? AcmTheme.Dark : AcmTheme.Light; + save(nextValue); + return nextValue; + }); + } + + return { subscribe, set, update, init, toggle, save }; +} + +export const theme = createTheme(); diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte index 757304147..bddf099df 100644 --- a/src/routes/__layout.svelte +++ b/src/routes/__layout.svelte @@ -2,6 +2,22 @@ import Navbar from '$lib/components/sections/navbar.svelte'; import Footer from '$lib/components/sections/footer.svelte'; import AcmToaster from '$lib/components/utils/acm-toaster.svelte'; + import { AcmTheme, theme } from '$lib/stores/theme'; + import { onMount } from 'svelte'; + + function changeTheme(event) { + theme.set(event.matches ? AcmTheme.Dark : AcmTheme.Light); + } + + onMount(() => { + theme.init(); + + if ('matchMedia' in window) { + const mediaList = matchMedia('(prefers-color-scheme: dark)'); + mediaList.addEventListener('change', changeTheme); + return () => mediaList.removeEventListener('change', changeTheme); + } + }); diff --git a/static/global.css b/static/global.css index 71ebd28e1..de38aea14 100644 --- a/static/global.css +++ b/static/global.css @@ -9,14 +9,19 @@ body { html, body, #svelte { - color: #101315; + color: var(--acm-dark); font-family: 'Poppins', sans-serif; padding: 0; margin: 0; } body { - background: #f8f8f8; + background: var(--acm-light); +} + +.dark { + --acm-dark: #f8f8f8; + --acm-light: #101315; } .info-screen { From 6b6057573477cc512b9a6800121defd8a58fcb55 Mon Sep 17 00:00:00 2001 From: Ethan Davidson <31261035+EthanThatOneKid@users.noreply.github.com> Date: Fri, 18 Mar 2022 17:33:58 -0700 Subject: [PATCH 2/9] Created un-styled toggle component Co-Authored-By: Angel Armendariz <95111582+Angel-Armendariz@users.noreply.github.com> Co-Authored-By: Dylan Morris Co-Authored-By: Angel <26943671+Angus-1@users.noreply.github.com> Co-Authored-By: Joel Anil John <56321852+janiljohn@users.noreply.github.com> --- src/lib/components/sections/footer.svelte | 22 +++++++++++++++---- src/lib/components/utils/acm-toggle.svelte | 25 ++++++++++++++++++++++ 2 files changed, 43 insertions(+), 4 deletions(-) create mode 100644 src/lib/components/utils/acm-toggle.svelte diff --git a/src/lib/components/sections/footer.svelte b/src/lib/components/sections/footer.svelte index 4e0ebda84..aeac996f3 100644 --- a/src/lib/components/sections/footer.svelte +++ b/src/lib/components/sections/footer.svelte @@ -1,8 +1,10 @@