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

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

frontend/src/hooks/dark-mode/use-apply-dark-mode-style.ts

@@ -13,11 +13,16 @@ export const useApplyDarkModeStyle = (): void => {
   const darkMode = useDarkModeState()
   useEffect(() => {
     if (darkMode) {
-      window.document.body.classList.add('dark')
+      window.document.body.dataset.bsTheme = 'dark'
     } else {
-      window.document.body.classList.remove('dark')
+      window.document.body.dataset.bsTheme = 'light'
     }
   }, [darkMode])
 
-  useEffect(() => () => window.document.body.classList.remove('dark'), [])
+  useEffect(
+    () => () => {
+      window.document.body.dataset.bsTheme = 'light'
+    },
+    []
+  )
 }

frontend/src/hooks/dark-mode/use-outline-button-variant.spec.tsx

@@ -0,0 +1,29 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import * as UseDarkModeStateModule from './use-dark-mode-state'
+import { useOutlineButtonVariant } from './use-outline-button-variant'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+
+jest.mock('./use-dark-mode-state')
+
+describe('useOutlineButtonVariant', () => {
+  const TestComponent: React.FC = () => {
+    return useOutlineButtonVariant()
+  }
+
+  it('returns the correct variant for dark mode', async () => {
+    jest.spyOn(UseDarkModeStateModule, 'useDarkModeState').mockReturnValue(true)
+    render(<TestComponent />)
+    await screen.findByText('outline-light')
+  })
+
+  it('returns the correct variant for light mode', async () => {
+    jest.spyOn(UseDarkModeStateModule, 'useDarkModeState').mockReturnValue(false)
+    render(<TestComponent />)
+    await screen.findByText('outline-dark')
+  })
+})

frontend/src/hooks/dark-mode/use-outline-button-variant.ts

@@ -0,0 +1,10 @@
+/*
+ * SPDX-FileCopyrightText: 2023 The HedgeDoc developers (see AUTHORS file)
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+import { useDarkModeState } from './use-dark-mode-state'
+
+export const useOutlineButtonVariant = (): 'outline-light' | 'outline-dark' => {
+  return useDarkModeState() ? 'outline-light' : 'outline-dark'
+}