fix: replace dark mode hack with bootstrap's own dark mode

Signed-off-by: Tilman Vatteroth <git@tilmanvatteroth.de>

frontend/src/components/common/fields/display-name-field.tsx

@@ -38,7 +38,6 @@ export const DisplayNameField: React.FC<DisplayNameFieldProps> = ({ onChange, va
         isValid={isValid}
         onChange={onChange}
         placeholder={t('profile.displayName') ?? undefined}
-        className='bg-dark text-light'
         autoComplete='name'
         required
       />

frontend/src/components/common/fields/new-password-field.tsx

@@ -33,7 +33,6 @@ export const NewPasswordField: React.FC<CommonFieldProps> = ({ onChange, value,
         isInvalid={hasError}
         onChange={onChange}
         placeholder={t('login.auth.password') ?? undefined}
-        className='bg-dark text-light'
         autoComplete='new-password'
         required
       />

frontend/src/components/common/fields/password-again-field.tsx

@@ -47,7 +47,6 @@ export const PasswordAgainField: React.FC<PasswordAgainFieldProps> = ({
         isValid={isValid}
         onChange={onChange}
         placeholder={t('login.register.passwordAgain') ?? undefined}
-        className='bg-dark text-light'
         autoComplete='new-password'
         required
       />

frontend/src/components/common/fields/username-field.tsx

@@ -33,7 +33,6 @@ export const UsernameField: React.FC<CommonFieldProps> = ({ onChange, value }) =
         isValid={isValid}
         onChange={onChange}
         placeholder={t('login.auth.username') ?? undefined}
-        className='bg-dark text-light'
         autoComplete='username'
         autoFocus={true}
         required

frontend/src/components/common/highlighted-code/highlighted-code.tsx

@@ -3,11 +3,11 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary'
-import { CopyToClipboardButton } from '../../../components/common/copyable/copy-to-clipboard-button/copy-to-clipboard-button'
 import { concatCssClasses } from '../../../utils/concat-css-classes'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
 import { testId } from '../../../utils/test-id'
+import { AsyncLoadingBoundary } from '../async-loading-boundary/async-loading-boundary'
+import { CopyToClipboardButton } from '../copyable/copy-to-clipboard-button/copy-to-clipboard-button'
 import styles from './highlighted-code.module.scss'
 import { useAsyncHighlightJsImport } from './hooks/use-async-highlight-js-import'
 import { useAttachLineNumbers } from './hooks/use-attach-line-numbers'

frontend/src/components/common/links/__snapshots__/external-link.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ExternalLink renders an external link correctly 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     dir="auto"
     href="https://example.com"
     rel="noopener noreferrer"
@@ -17,7 +17,7 @@ exports[`ExternalLink renders an external link correctly 1`] = `
 exports[`ExternalLink renders an external link with a title 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     dir="auto"
     href="https://example.com"
     rel="noopener noreferrer"
@@ -46,7 +46,7 @@ exports[`ExternalLink renders an external link with additional className 1`] = `
 exports[`ExternalLink renders an external link with an icon 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     dir="auto"
     href="https://example.com"
     rel="noopener noreferrer"
@@ -62,7 +62,7 @@ exports[`ExternalLink renders an external link with an icon 1`] = `
 exports[`ExternalLink renders an external link with an id 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     dir="auto"
     href="https://example.com"
     id="testId"

frontend/src/components/common/links/__snapshots__/internal-link.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`InternalLink renders an internal link correctly 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     href="/test"
   >
     testText
@@ -14,7 +14,7 @@ exports[`InternalLink renders an internal link correctly 1`] = `
 exports[`InternalLink renders an internal link with a title 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     href="/test"
     title="testTitle"
   >
@@ -37,7 +37,7 @@ exports[`InternalLink renders an internal link with additional className 1`] = `
 exports[`InternalLink renders an internal link with an icon 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     href="/test"
   >
     BootstrapIconMock_Heart
@@ -50,7 +50,7 @@ exports[`InternalLink renders an internal link with an icon 1`] = `
 exports[`InternalLink renders an internal link with an id 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     href="/test"
     id="testId"
   >

frontend/src/components/common/links/__snapshots__/translated-external-link.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TranslatedExternalLink renders with i18nKey 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     dir="auto"
     href="https://example.com"
     rel="noopener noreferrer"

frontend/src/components/common/links/__snapshots__/translated-internal-link.spec.tsx.snap

@@ -3,7 +3,7 @@
 exports[`TranslatedInternalLink renders with i18nKey 1`] = `
 <div>
   <a
-    class="text-light"
+    class=""
     href="/test"
   >
     testi18nKey

frontend/src/components/common/links/external-link.tsx

@@ -19,14 +19,7 @@ import React from 'react'
  * @param className Additional class names added to the link object
  * @param title The title of the link
  */
-export const ExternalLink: React.FC<LinkWithTextProps> = ({
-  href,
-  text,
-  icon,
-  id,
-  className = 'text-light',
-  title
-}) => {
+export const ExternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = '', title }) => {
   return (
     <a href={href} target='_blank' rel='noopener noreferrer' id={id} className={className} title={title} dir='auto'>
       <UiIcon icon={icon} nbsp={true} />

frontend/src/components/common/links/internal-link.tsx

@@ -19,14 +19,7 @@ import React from 'react'
  * @param className Additional class names added to the link object
  * @param title The title of the link
  */
-export const InternalLink: React.FC<LinkWithTextProps> = ({
-  href,
-  text,
-  icon,
-  id,
-  className = 'text-light',
-  title
-}) => {
+export const InternalLink: React.FC<LinkWithTextProps> = ({ href, text, icon, id, className = '', title }) => {
   return (
     <Link href={href} className={className} id={id} title={title}>
       <UiIcon icon={icon} nbsp={true} />

frontend/src/components/common/modals/__snapshots__/common-modal.spec.tsx.snap

@@ -4,7 +4,7 @@ exports[`CommonModal does not render if show is false 1`] = `<div />`;
 
 exports[`CommonModal render correctly in size lg 1`] = `
 <div
-  class="modal-dialog text-dark modal-lg"
+  class="modal-dialog modal-lg"
   data-testid="commonModal"
 >
   <div
@@ -26,7 +26,7 @@ exports[`CommonModal render correctly in size lg 1`] = `
 
 exports[`CommonModal render correctly in size sm 1`] = `
 <div
-  class="modal-dialog text-dark modal-sm"
+  class="modal-dialog modal-sm"
   data-testid="commonModal"
 >
   <div
@@ -48,7 +48,7 @@ exports[`CommonModal render correctly in size sm 1`] = `
 
 exports[`CommonModal render correctly in size xl 1`] = `
 <div
-  class="modal-dialog text-dark modal-xl"
+  class="modal-dialog modal-xl"
   data-testid="commonModal"
 >
   <div
@@ -70,7 +70,7 @@ exports[`CommonModal render correctly in size xl 1`] = `
 
 exports[`CommonModal render correctly with additionalClasses 1`] = `
 <div
-  class="modal-dialog text-dark testClass"
+  class="modal-dialog testClass"
   data-testid="commonModal"
 >
   <div
@@ -92,7 +92,7 @@ exports[`CommonModal render correctly with additionalClasses 1`] = `
 
 exports[`CommonModal render correctly with i18nTitle 1`] = `
 <div
-  class="modal-dialog text-dark"
+  class="modal-dialog"
   data-testid="commonModal"
 >
   <div
@@ -114,7 +114,7 @@ exports[`CommonModal render correctly with i18nTitle 1`] = `
 
 exports[`CommonModal render correctly with title 1`] = `
 <div
-  class="modal-dialog text-dark"
+  class="modal-dialog"
   data-testid="commonModal"
 >
   <div
@@ -136,7 +136,7 @@ exports[`CommonModal render correctly with title 1`] = `
 
 exports[`CommonModal render correctly with title icon 1`] = `
 <div
-  class="modal-dialog text-dark"
+  class="modal-dialog"
   data-testid="commonModal"
 >
   <div
@@ -160,7 +160,7 @@ exports[`CommonModal render correctly with title icon 1`] = `
 
 exports[`CommonModal renders correctly and calls onHide, when close button is clicked 1`] = `
 <div
-  class="modal-dialog text-dark"
+  class="modal-dialog"
   data-testid="commonModal"
 >
   <div

frontend/src/components/common/modals/__snapshots__/deletion-moadal.spec.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`DeletionModal disables deletion when user is not owner 1`] = `
 <div
-  class="modal-dialog text-dark"
+  class="modal-dialog"
   data-testid="commonModal"
 >
   <div
@@ -23,7 +23,7 @@ exports[`DeletionModal disables deletion when user is not owner 1`] = `
       />
     </div>
     <div
-      class="text-dark modal-body"
+      class="modal-body"
     >
       testText
     </div>
@@ -44,7 +44,7 @@ exports[`DeletionModal disables deletion when user is not owner 1`] = `
 
 exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
 <div
-  class="modal-dialog text-dark"
+  class="modal-dialog"
   data-testid="commonModal"
 >
   <div
@@ -65,7 +65,7 @@ exports[`DeletionModal renders correctly with deletionButtonI18nKey 1`] = `
       />
     </div>
     <div
-      class="text-dark modal-body"
+      class="modal-body"
     >
       testText
     </div>

frontend/src/components/common/modals/common-modal.tsx

@@ -74,7 +74,7 @@ export const CommonModal: React.FC<PropsWithChildren<CommonModalProps>> = ({
         onHide={onHide}
         animation={true}
         {...testId('commonModal')}
-        dialogClassName={concatCssClasses('text-dark', additionalClasses)}
+        dialogClassName={concatCssClasses(additionalClasses)}
         size={modalSize}>
         <Modal.Header closeButton={!!showCloseButton}>
           <Modal.Title>

frontend/src/components/common/modals/deletion-modal.tsx

@@ -51,7 +51,7 @@ export const DeletionModal: React.FC<PropsWithChildren<DeletionModalProps>> = ({
       titleIcon={titleIcon}
       showCloseButton={true}
       {...props}>
-      <Modal.Body className='text-dark'>{children}</Modal.Body>
+      <Modal.Body>{children}</Modal.Body>
       <Modal.Footer>
         <Button {...cypressId('deletionModal.confirmButton')} variant='danger' onClick={onConfirm} disabled={!isOwner}>
           <Trans i18nKey={deletionButtonI18nKey} />

frontend/src/components/common/motd-modal/__snapshots__/motd-modal.spec.tsx.snap

@@ -14,7 +14,7 @@ exports[`motd modal renders a modal if a motd was fetched and can dismiss it 1`]
     This is a mock implementation of a Modal: 
     <dialog>
       <div
-        class="bg-light modal-body"
+        class="modal-body"
       >
         <span
           data-testid="motd-renderer"

frontend/src/components/common/motd-modal/motd-modal.tsx

@@ -53,7 +53,7 @@ export const MotdModal: React.FC = () => {
       show={!!lines && !loading && !error && !dismissed}
       titleI18nKey={'motd.title'}
       {...cypressId('motd-modal')}>
-      <Modal.Body className={'bg-light'}>
+      <Modal.Body>
         <EditorToRendererCommunicatorContextProvider>
           <RendererIframe
             frameClasses={'w-100'}

frontend/src/components/common/renderer-iframe/hooks/use-send-additional-configuration-to-renderer.ts

@@ -4,7 +4,6 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { useApplicationState } from '../../../../hooks/common/use-application-state'
-import { DarkModePreference } from '../../../../redux/dark-mode/types'
 import { useSendToRenderer } from '../../../render-page/window-post-message-communicator/hooks/use-send-to-renderer'
 import { CommunicationMessageType } from '../../../render-page/window-post-message-communicator/rendering-message'
 import { useMemo } from 'react'
@@ -13,27 +12,19 @@ import { useMemo } from 'react'
  * Sends additional configuration options (dark mode, line break, etc.) to the renderer.
  *
  * @param rendererReady Defines if the target renderer is ready
- * @param forcedDarkMode Overwrites the value from the global application states if set.
  */
-export const useSendAdditionalConfigurationToRenderer = (
-  rendererReady: boolean,
-  forcedDarkMode: DarkModePreference = DarkModePreference.AUTO
-): void => {
+export const useSendAdditionalConfigurationToRenderer = (rendererReady: boolean): void => {
   const darkModePreference = useApplicationState((state) => state.darkMode.darkModePreference)
   const newlinesAreBreaks = useApplicationState((state) => state.noteDetails.frontmatter.newlinesAreBreaks)
 
-  const darkMode = useMemo(() => {
-    return forcedDarkMode === DarkModePreference.AUTO ? darkModePreference : forcedDarkMode
-  }, [darkModePreference, forcedDarkMode])
-
   useSendToRenderer(
     useMemo(
       () => ({
         type: CommunicationMessageType.SET_ADDITIONAL_CONFIGURATION,
-        darkModePreference: darkMode,
+        darkModePreference: darkModePreference,
         newLinesAreBreaks: newlinesAreBreaks
       }),
-      [darkMode, newlinesAreBreaks]
+      [darkModePreference, newlinesAreBreaks]
     ),
     rendererReady
   )

frontend/src/components/common/renderer-iframe/renderer-iframe.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import type { DarkModePreference } from '../../../redux/dark-mode/types'
 import { concatCssClasses } from '../../../utils/concat-css-classes'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
 import { Logger } from '../../../utils/logger'
@@ -27,11 +26,11 @@ import { useForceRenderPageUrlOnIframeLoadCallback } from './hooks/use-force-ren
 import { useSendAdditionalConfigurationToRenderer } from './hooks/use-send-additional-configuration-to-renderer'
 import { useSendMarkdownToRenderer } from './hooks/use-send-markdown-to-renderer'
 import { useSendScrollState } from './hooks/use-send-scroll-state'
+import styles from './style.module.scss'
 import React, { Fragment, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 
 export interface RendererIframeProps extends Omit<CommonMarkdownRendererProps & ScrollProps, 'baseUrl'> {
   rendererType: RendererType
-  forcedDarkMode?: DarkModePreference
   frameClasses?: string
   onRendererStatusChange?: undefined | ((rendererReady: boolean) => void)
   adaptFrameHeightToContent?: boolean
@@ -51,7 +50,6 @@ const log = new Logger('RendererIframe')
  * @param onMakeScrollSource Callback that is fired when the renderer requests to be set as the current scroll source
  * @param frameClasses CSS classes that should be applied to the iframe
  * @param rendererType The {@link RendererType type} of the renderer to use.
- * @param forcedDarkMode If set, the dark mode will be set to the given value. Otherwise, the dark mode won't be changed.
  * @param adaptFrameHeightToContent If set, the iframe height will be adjusted to the content height
  * @param onRendererStatusChange Callback that is fired when the renderer in the iframe is ready
  */
@@ -62,7 +60,6 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
   onMakeScrollSource,
   frameClasses,
   rendererType,
-  forcedDarkMode,
   adaptFrameHeightToContent,
   onRendererStatusChange
 }) => {
@@ -142,7 +139,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
   )
 
   useEffectOnRenderTypeChange(rendererType, onIframeLoad)
-  useSendAdditionalConfigurationToRenderer(rendererReady, forcedDarkMode)
+  useSendAdditionalConfigurationToRenderer(rendererReady)
   useSendMarkdownToRenderer(markdownContentLines, rendererReady)
 
   useSendScrollState(scrollState, rendererReady)
@@ -169,7 +166,7 @@ export const RendererIframe: React.FC<RendererIframeProps> = ({
         allowFullScreen={true}
         ref={frameReference}
         referrerPolicy={'no-referrer'}
-        className={concatCssClasses('border-0', frameClasses)}
+        className={concatCssClasses('border-0', styles.frame, frameClasses)}
         allow={'clipboard-write'}
         {...cypressAttribute('renderer-ready', rendererReady ? 'true' : 'false')}
         {...cypressAttribute('renderer-type', rendererType)}

frontend/src/components/common/renderer-iframe/style.module.scss

@@ -0,0 +1,9 @@
+/*!
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+.frame {
+  color-scheme: initial;
+}