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

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

frontend/src/pages/_app.tsx

@@ -3,7 +3,6 @@
  *
  * SPDX-License-Identifier: AGPL-3.0-only
  */
-import '../../global-styles/dark.scss'
 import '../../global-styles/index.scss'
 import type { FrontendConfig } from '../api/config/types'
 import { ApplicationLoader } from '../components/application-loader/application-loader'

frontend/src/pages/login.tsx

@@ -72,7 +72,7 @@ export const LoginPage: React.FC = () => {
           </ShowIf>
           <ShowIf condition={oneClickProviders.length > 0}>
             <Col xs={12} sm={10} lg={4}>
-              <Card className='bg-dark mb-4'>
+              <Card className='mb-4'>
                 <Card.Body>
                   <Card.Title>
                     <Trans i18nKey='login.signInVia' values={{ service: '' }} />

frontend/src/pages/n/[noteId].tsx

@@ -7,6 +7,7 @@ import { NoteLoadingBoundary } from '../../components/common/note-loading-bounda
 import { EditorPageContent } from '../../components/editor-page/editor-page-content'
 import { EditorToRendererCommunicatorContextProvider } from '../../components/editor-page/render-context/editor-to-renderer-communicator-context-provider'
 import { ResetRealtimeStateBoundary } from '../../components/editor-page/reset-realtime-state-boundary'
+import { useApplyDarkModeStyle } from '../../hooks/dark-mode/use-apply-dark-mode-style'
 import type { NextPage } from 'next'
 import React from 'react'
 
@@ -14,6 +15,8 @@ import React from 'react'
  * Renders a page that is used by the user to edit markdown notes. It contains the editor and a renderer.
  */
 export const EditorPage: NextPage = () => {
+  useApplyDarkModeStyle()
+
   return (
     <ResetRealtimeStateBoundary>
       <NoteLoadingBoundary>

frontend/src/pages/register.tsx

@@ -84,7 +84,7 @@ export const RegisterPage: NextPage = () => {
         </h1>
         <Row className='h-100 d-flex justify-content-center'>
           <Col lg={6}>
-            <Card className='bg-dark mb-4 text-start'>
+            <Card className='mb-4 text-start'>
               <Card.Body>
                 <Form onSubmit={doRegisterSubmit} className={'d-flex flex-column gap-3'}>
                   <UsernameField onChange={onUsernameChange} value={username} />

frontend/src/pages/render.tsx

@@ -7,12 +7,17 @@ import { RendererToEditorCommunicatorContextProvider } from '../components/edito
 import { RenderPageContent } from '../components/render-page/render-page-content'
 import { useApplyDarkModeStyle } from '../hooks/dark-mode/use-apply-dark-mode-style'
 import type { NextPage } from 'next'
-import React from 'react'
+import React, { useEffect } from 'react'
 
 /**
  * Renders the actual markdown renderer that receives the content and metadata via iframe communication.
  */
 export const RenderPage: NextPage = () => {
+  useEffect(() => {
+    document.body.classList.add('bg-transparent')
+    return () => document.body.classList.remove('bg-transparent')
+  }, [])
+
   useApplyDarkModeStyle()
 
   return (

frontend/src/pages/s/[noteId].tsx

@@ -25,7 +25,7 @@ export const DocumentReadOnlyPage: React.FC = () => {
       <NoteLoadingBoundary>
         <HeadMetaProperties />
         <MotdModal />
-        <div className={'d-flex flex-column mvh-100 bg-light'}>
+        <div className={'d-flex flex-column mvh-100'}>
           <AppBar mode={AppBarMode.BASIC} />
           <DocumentReadOnlyPageContent />
         </div>