Merge 182052824c into 902abf72e6

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

@@ -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') {

frontend/src/components/application-loader/loading-screen/loading-screen.tsx

@@ -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={`${styles.loader} ${darkMode ? 'text-light' : 'text-dark'} ${darkMode ? 'bg-dark' : 'bg-light'}`}>
-      <div className='mb-3 text-light'>
+      <div className='mb-3'>
         <span className={`d-block`}>
           <LoadingAnimation error={!!errorMessage} />
         </span>

frontend/src/hooks/dark-mode/use-dark-mode-state.ts

@@ -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'
@@ -26,3 +27,15 @@ export const useDarkModeState = (): boolean => {
     return preference === DarkModePreference.DARK || (preference === DarkModePreference.AUTO && isBrowserPreferringDark)
   }, [preference, printModeEnabled, 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)
+}