diff --git a/frontend/src/components/editor-page/app-bar/navbar-branding.tsx b/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
index b5906a7a7..f7ec49436 100644
--- a/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
+++ b/frontend/src/components/editor-page/app-bar/navbar-branding.tsx
@@ -3,7 +3,7 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import { useDarkModeState } from '../../../hooks/common/use-dark-mode-state'
+import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
 import { Branding } from '../../common/branding/branding'
 import {
   HedgeDocLogoSize,
diff --git a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx
index 2f77524eb..0c35e7161 100644
--- a/frontend/src/components/editor-page/editor-pane/editor-pane.tsx
+++ b/frontend/src/components/editor-page/editor-pane/editor-pane.tsx
@@ -5,8 +5,8 @@
  */
 import { useApplicationState } from '../../../hooks/common/use-application-state'
 import { ORIGIN, useBaseUrl } from '../../../hooks/common/use-base-url'
-import { useDarkModeState } from '../../../hooks/common/use-dark-mode-state'
 import { useMayEdit } from '../../../hooks/common/use-may-edit'
+import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
 import { cypressAttribute, cypressId } from '../../../utils/cypress-attribute'
 import { findLanguageByCodeBlockName } from '../../markdown-renderer/extensions/_base-classes/code-block-markdown-extension/find-language-by-code-block-name'
 import type { ScrollProps } from '../synced-scroll/scroll-props'
diff --git a/frontend/src/components/editor-page/editor-pane/linter/linter.ts b/frontend/src/components/editor-page/editor-pane/linter/linter.ts
index f80df8336..ac569a062 100644
--- a/frontend/src/components/editor-page/editor-pane/linter/linter.ts
+++ b/frontend/src/components/editor-page/editor-pane/linter/linter.ts
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { allAppExtensions } from '../../../../extensions/all-app-extensions'
-import { useDarkModeState } from '../../../../hooks/common/use-dark-mode-state'
+import { useDarkModeState } from '../../../../hooks/dark-mode/use-dark-mode-state'
 import { FrontmatterLinter } from './frontmatter-linter'
 import type { Diagnostic } from '@codemirror/lint'
 import { linter } from '@codemirror/lint'
diff --git a/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-popover.tsx b/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-popover.tsx
index 288864546..5cf24dc52 100644
--- a/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-popover.tsx
+++ b/frontend/src/components/editor-page/editor-pane/tool-bar/emoji-picker/emoji-picker-popover.tsx
@@ -4,7 +4,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import fontStyles from '../../../../../../global-styles/variables.module.scss'
-import { useDarkModeState } from '../../../../../hooks/common/use-dark-mode-state'
+import { useDarkModeState } from '../../../../../hooks/dark-mode/use-dark-mode-state'
 import styles from './emoji-picker.module.scss'
 import { Picker } from 'emoji-picker-element'
 import type { EmojiClickEvent, EmojiClickEventDetail } from 'emoji-picker-element/shared'
diff --git a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-viewer.tsx b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-viewer.tsx
index 76b092a39..699a28c50 100644
--- a/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-viewer.tsx
+++ b/frontend/src/components/editor-page/sidebar/specific-sidebar-entries/revisions-sidebar-entry/revisions-modal/revision-viewer.tsx
@@ -5,7 +5,7 @@
  */
 import { getRevision } from '../../../../../../api/revisions'
 import { useApplicationState } from '../../../../../../hooks/common/use-application-state'
-import { useDarkModeState } from '../../../../../../hooks/common/use-dark-mode-state'
+import { useDarkModeState } from '../../../../../../hooks/dark-mode/use-dark-mode-state'
 import { AsyncLoadingBoundary } from '../../../../../common/async-loading-boundary/async-loading-boundary'
 import { invertUnifiedPatch } from './invert-unified-patch'
 import { Optional } from '@mrdrogdrog/optional'
diff --git a/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx b/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx
index 12dfe36c4..ecd6b6a8d 100644
--- a/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx
+++ b/frontend/src/extensions/external-lib-app-extensions/flowchart/flowchart.tsx
@@ -7,7 +7,7 @@ import fontStyles from '../../../../global-styles/variables.module.scss'
 import { AsyncLoadingBoundary } from '../../../components/common/async-loading-boundary/async-loading-boundary'
 import { ShowIf } from '../../../components/common/show-if/show-if'
 import type { CodeProps } from '../../../components/markdown-renderer/replace-components/code-block-component-replacer'
-import { useDarkModeState } from '../../../hooks/common/use-dark-mode-state'
+import { useDarkModeState } from '../../../hooks/dark-mode/use-dark-mode-state'
 import { Logger } from '../../../utils/logger'
 import { testId } from '../../../utils/test-id'
 import React, { useEffect, useRef, useState } from 'react'
diff --git a/frontend/src/hooks/common/use-dark-mode-state.ts b/frontend/src/hooks/dark-mode/use-dark-mode-state.ts
similarity index 83%
rename from frontend/src/hooks/common/use-dark-mode-state.ts
rename to frontend/src/hooks/dark-mode/use-dark-mode-state.ts
index 2ffa72903..88c7e69b2 100644
--- a/frontend/src/hooks/common/use-dark-mode-state.ts
+++ b/frontend/src/hooks/dark-mode/use-dark-mode-state.ts
@@ -1,10 +1,10 @@
 /*
- * SPDX-FileCopyrightText: 2022 The HedgeDoc developers (see AUTHORS file)
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 import { DarkModePreference } from '../../redux/dark-mode/types'
-import { useApplicationState } from './use-application-state'
+import { useApplicationState } from '../common/use-application-state'
 import useMediaQuery from '@restart/hooks/useMediaQuery'
 
 /**