Mirroristas/pockethost
2
0
Fork 0
mirror of https://github.com/pockethost/pockethost.git synced 2025-07-05 20:32:29 +00:00
Code Issues Packages Projects Releases Wiki Activity

Dashboard - Removed Light Theme Toggle (#317)

Browse Source
This commit is contained in:
Brewhouse Digital 2023-10-10 20:52:54 -05:00 committed by GitHub
parent 4f1fe0c81e
commit 1bfe5e39e1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 1 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/dashboard/src/app.html
View File

@ -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"
/>

3
packages/dashboard/src/components/Navbar.svelte
View File

@ -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>

45
packages/dashboard/src/components/ThemeToggle.svelte
View File

@ -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>

35
packages/dashboard/src/components/helpers/theme.ts
View File

@ -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)
}