From 9194ad98db5202624f687d13ee73e815dc8e33f7 Mon Sep 17 00:00:00 2001
From: Zakarya <zakarya@colormatic.org>
Date: Thu, 8 May 2025 10:54:12 -0700
Subject: [PATCH] "Correct" element grabbing

---
 src/component/bg.svelte     | 7 +++----
 src/component/navbar.svelte | 6 +++---
 src/routes/+layout.svelte   | 2 +-
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/component/bg.svelte b/src/component/bg.svelte
index 1c1ecfb..40bd107 100644
--- a/src/component/bg.svelte
+++ b/src/component/bg.svelte
@@ -2,7 +2,7 @@
   import { canvasDpiScaler } from "../script/canvas_dpi_scaler.ts";
   import { onMount } from "svelte";
 
-  let canvas: HTMLCanvasElement;
+  let canvas = $state() as HTMLCanvasElement;
   let ctx: CanvasRenderingContext2D;
 
   let { darkTheme = $bindable() } = $props();
@@ -33,7 +33,6 @@
   let gradients: Gradient[] = [];
 
   onMount(async () => {
-    canvas = document.getElementById("bg-canvas") as HTMLCanvasElement;
     ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
 
     let imagePromises = {
@@ -325,10 +324,10 @@
   }
 </script>
 
-<canvas id="bg-canvas"></canvas>
+<canvas bind:this={canvas} class="bg-canvas"></canvas>
 
 <style>
-  canvas#bg-canvas {
+  canvas.bg-canvas {
     position: fixed;
     top: 0;
     left: 0;
diff --git a/src/component/navbar.svelte b/src/component/navbar.svelte
index 7b75baa..a151036 100644
--- a/src/component/navbar.svelte
+++ b/src/component/navbar.svelte
@@ -1,12 +1,12 @@
 <script lang="ts">
   import { getContext } from "svelte";
 
+  let pages = $state() as HTMLElement;
+
   function toggleModalMenu() {
-    var pages = document.getElementById("pages") as HTMLElement;
     pages.classList.toggle("hidden");
   }
   function modalMenuProcessClick(e: MouseEvent) {
-    var pages = document.getElementById("pages") as HTMLElement;
     if (e.target == pages) {
       pages.classList.toggle("hidden");
     }
@@ -50,7 +50,7 @@ Svelte modal example, https://svelte.dev/playground/modal
 -->
 
 <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
-<span onclick={modalMenuProcessClick} id="pages" class="modalbg hidden">
+<span onclick={modalMenuProcessClick} bind:this={pages} class="modalbg hidden">
   <div class={darkTheme ? "dark-theme" : ""}>
     <button onclick={toggleModalMenu} class="close" aria-label="Close">
       <i class="bi bi-x"></i>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 79e14d8..60677b0 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,7 +5,7 @@
   import Footer from "../component/footer.svelte";
   import Bg from "../component/bg.svelte";
   import Settings from "../component/settings.svelte";
-  import { themes } from "../script/theme";
+  import { themes } from "../script/theme.ts";
   import { onMount, setContext } from "svelte";
 
   interface Props {