github/hedgedoc
1
0
Fork 0
mirror of https://github.com/hedgedoc/hedgedoc.git synced 2024-10-18 05:10:16 -04:00
Code Issues Projects Releases Packages Wiki Activity

feat: less flashly loader

Browse source 
Signed-off-by: Evan Boehs <evan@boehs.org>
This commit is contained in:
Evan Boehs 2024-05-12 13:09:44 -04:00
parent 3513377d2d
commit 182052824c
No known key found for this signature in database
GPG key ID: 372BFB0F2141C020
3 changed files with 20 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/components/application-loader/initializers/load-dark-mode.ts
View file

@ -27,7 +27,7 @@ export const loadDarkMode = (): Promise<void> => {
* @return {@link true} if the local storage has saved that the user prefers dark mode.
* {@link false} if the user doesn't prefer dark mode or if the value couldn't be read from local storage.
*/
const fetchDarkModeFromLocalStorage = (): DarkModePreference => {
export const fetchDarkModeFromLocalStorage = (): DarkModePreference => {
try {
const colorScheme = window.localStorage.getItem(DARK_MODE_LOCAL_STORAGE_KEY)
if (colorScheme === 'dark') {

8
frontend/src/components/application-loader/loading-screen/loading-screen.tsx
View file

@ -8,6 +8,7 @@ import { LoadingAnimation } from './loading-animation'
import type { ReactElement } from 'react'
import React from 'react'
import { Alert } from 'react-bootstrap'
import { darkModeStateSync } from '../../../hooks/dark-mode/use-dark-mode-state'
export interface LoadingScreenProps {
errorMessage?: string | ReactElement | null
@ -19,9 +20,12 @@ export interface LoadingScreenProps {
* @param failedTaskName Should be set if a task failed to load. The name will be shown on screen.
*/
export const LoadingScreen: React.FC<LoadingScreenProps> = ({ errorMessage }) => {
let darkMode = darkModeStateSync()
console.log(darkMode)
return (
<div className={`${styles.loader} text-light bg-dark`}>
<div className='mb-3 text-light'>
<div className={`${styles.loader} ${darkMode ? 'text-light' : 'text-dark'} ${darkMode ? 'bg-dark' : 'bg-light'}`}>
<div className='mb-3'>
<span className={`d-block`}>
<LoadingAnimation error={!!errorMessage} />
</span>

13
frontend/src/hooks/dark-mode/use-dark-mode-state.ts
View file

@ -3,6 +3,7 @@
*
* SPDX-License-Identifier: AGPL-3.0-only
*/
import { fetchDarkModeFromLocalStorage } from '../../components/application-loader/initializers/load-dark-mode'
import { DarkModePreference } from '../../redux/dark-mode/types'
import { useApplicationState } from '../common/use-application-state'
import useMediaQuery from '@restart/hooks/useMediaQuery'
@ -18,3 +19,15 @@ export const useDarkModeState = (): boolean => {
return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
}
/**
* Uses the user settings and the browser preference to determine if dark mode should be used. Value does not change
*
* @return The state of the dark mode at time of call.
*/
export const darkModeStateSync = (): boolean => {
const preference = fetchDarkModeFromLocalStorage()
const isBrowserPreferringDark = matchMedia('(prefers-color-scheme: dark)').matches
return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
}