From 1bfe5e39e193b7478cf02b8a67102decfd25a62d Mon Sep 17 00:00:00 2001
From: Brewhouse Digital <66521220+brewhousedigital@users.noreply.github.com>
Date: Tue, 10 Oct 2023 20:52:54 -0500
Subject: [PATCH] Dashboard - Removed Light Theme Toggle (#317)

---
 packages/dashboard/src/app.html               |  2 +-
 .../dashboard/src/components/Navbar.svelte    |  3 --
 .../src/components/ThemeToggle.svelte         | 45 -------------------
 .../dashboard/src/components/helpers/theme.ts | 35 ---------------
 4 files changed, 1 insertion(+), 84 deletions(-)
 delete mode 100644 packages/dashboard/src/components/ThemeToggle.svelte

diff --git a/packages/dashboard/src/app.html b/packages/dashboard/src/app.html
index 972fa216..4e969544 100644
--- a/packages/dashboard/src/app.html
+++ b/packages/dashboard/src/app.html
@@ -8,7 +8,7 @@
 
     <link
       rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css"
+      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-dark.min.css"
       id="hljs-link"
     />
 
diff --git a/packages/dashboard/src/components/Navbar.svelte b/packages/dashboard/src/components/Navbar.svelte
index 6c108628..a290d106 100644
--- a/packages/dashboard/src/components/Navbar.svelte
+++ b/packages/dashboard/src/components/Navbar.svelte
@@ -2,7 +2,6 @@
   import { page } from '$app/stores'
   import Logo from '$components/Logo.svelte'
   import MediaQuery from '$components/MediaQuery.svelte'
-  import ThemeToggle from '$components/ThemeToggle.svelte'
   import { handleLogoutAndRedirect } from '$util/database'
   import { getInstances } from '$util/getInstances'
   import { globalInstancesStore } from '$util/stores'
@@ -107,6 +106,4 @@
       ><i class="fa-regular fa-arrow-up-left-from-circle"></i> Logout</button
     >
   </div>
-
-  <ThemeToggle />
 </aside>
diff --git a/packages/dashboard/src/components/ThemeToggle.svelte b/packages/dashboard/src/components/ThemeToggle.svelte
deleted file mode 100644
index 718dfc69..00000000
--- a/packages/dashboard/src/components/ThemeToggle.svelte
+++ /dev/null
@@ -1,45 +0,0 @@
-<script lang="ts">
-  import { onMount } from 'svelte'
-  import { ThemeNames, getCurrentTheme, setCurrentTheme } from './helpers/theme'
-
-  // This will keep track of the toggle's state
-  let isChecked = true
-
-  // Wait for the DOM to be available
-  onMount(() => {
-    // Check what theme cookie is set
-    const currentTheme = getCurrentTheme()
-
-    // Set the toggle's state
-    isChecked = currentTheme === ThemeNames.Dark
-
-    // Update the site's theme to match what the cookie has
-    updateTheme(getCurrentTheme())
-  })
-
-  // Alternate the theme values on toggle click
-  const handleChange = (e: Event) => {
-    const target = e.target as HTMLInputElement
-    const isChecked = target.checked
-
-    const newTheme = isChecked ? ThemeNames.Dark : ThemeNames.Light
-
-    updateTheme(newTheme)
-  }
-
-  const updateTheme = (themeName: ThemeNames) => {
-    setCurrentTheme(themeName)
-  }
-</script>
-
-<div class="form-control">
-  <label class="label cursor-pointer">
-    <span class="label-text">Dark Mode</span>
-    <input
-      type="checkbox"
-      class="toggle"
-      bind:checked={isChecked}
-      on:change={handleChange}
-    />
-  </label>
-</div>
diff --git a/packages/dashboard/src/components/helpers/theme.ts b/packages/dashboard/src/components/helpers/theme.ts
index 4249505d..eb9ac132 100644
--- a/packages/dashboard/src/components/helpers/theme.ts
+++ b/packages/dashboard/src/components/helpers/theme.ts
@@ -1,42 +1,7 @@
 import { assertTruthy } from '@pockethost/common'
-import { find } from '@s-libs/micro-dash'
-import Cookies from 'js-cookie'
-
-// Set some default values to be referenced later
-export enum ThemeNames {
-  Light = 'light',
-  Dark = 'dark',
-}
-export const HLJS_THEMES = {
-  [ThemeNames.Light]:
-    'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/default.min.css',
-  [ThemeNames.Dark]:
-    'https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/a11y-dark.min.css',
-}
-export const ALLOWED_THEMES: ThemeNames[] = [ThemeNames.Light, ThemeNames.Dark]
-export const DEFAULT_THEME: ThemeNames = ThemeNames.Dark
-export const STORAGE_NAME: string = 'theme'
-export const THEME_ATTRIBUTE: string = 'data-theme'
 
 export const html = () => {
   const htmlElement = document.querySelector('html')
   assertTruthy(htmlElement, `Expected <html> element to exist`)
   return htmlElement
 }
-
-export const getCurrentTheme = () => {
-  const savedTheme = Cookies.get(STORAGE_NAME)
-  const currentTheme =
-    find(ALLOWED_THEMES, (v) => savedTheme === v) || DEFAULT_THEME
-  return currentTheme
-}
-
-export const setCurrentTheme = (themeName: ThemeNames) => {
-  html().setAttribute(THEME_ATTRIBUTE, themeName)
-  const theme = document.querySelector<HTMLLinkElement>('#hljs-link')
-  if (theme) {
-    theme.href = HLJS_THEMES[themeName]
-  }
-
-  Cookies.set(STORAGE_NAME, themeName)
-}