ColormaticStudios/Colormatic-Website
5
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 9 Wiki Activity

Add a manual light/dark mode switcher

Browse Source 
Despite the simplicity of the commit title, this was a pretty big
change. The styling used to just go off of the system's color scheme,
but that can't be overridden. Instead, I have made a variable that
determines whether dark theme is active and made a small panel with some
buttons to change the theme. I had to change a lot of code to achieve
this and lost a lot of hair (I metaphorically pulled it out) from
writing this code.

I also changed things from legacy mode to rune mode (Svelte 4 to 5)
while I was at it, that wasn't too big.
This commit is contained in:
Zakarya
2025-05-07 21:17:52 -07:00
parent e6dd87427b
commit 71e7662408
12 changed files with 273 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/component/navbar.svelte
View File

@ -1,4 +1,6 @@
<script lang="ts">
import { getContext } from "svelte";
function toggleModalMenu() {
var pages = document.getElementById("pages") as HTMLElement;
pages.classList.toggle("hidden");
@ -9,6 +11,8 @@
pages.classList.toggle("hidden");
}
}
let darkTheme: CallableFunction = getContext("darkTheme");
</script>
<nav>
@ -33,7 +37,7 @@
>
<i class="bi bi-git"></i>
</a>
<button on:click={toggleModalMenu} class="menu-button" aria-label="menu">
<button onclick={toggleModalMenu} class="menu-button" aria-label="menu">
<i class="bi bi-list"></i>
</button>
</div>
@ -45,10 +49,10 @@ the only way to achieve a proper modal. They even do this in the
Svelte modal example, https://svelte.dev/playground/modal
-->
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
<span on:click={modalMenuProcessClick} id="pages" class="modalbg hidden">
<div>
<button on:click={toggleModalMenu} class="close" aria-label="Close">
<!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
<span onclick={modalMenuProcessClick} id="pages" class="modalbg hidden">
<div class={darkTheme ? "dark-theme" : ""}>
<button onclick={toggleModalMenu} class="close" aria-label="Close">
<i class="bi bi-x"></i>
</button>
<ul>
@ -261,9 +265,7 @@ Svelte modal example, https://svelte.dev/playground/modal
}
}
@media (prefers-color-scheme: dark) {
span.modalbg div {
background-color: #000000bb;
}
span.modalbg div.dark-theme {
background-color: #000000bb;
}
</style>