add remaining themed components

src/renderer/App.global.css

@@ -29,20 +29,23 @@ body {
 }
 
 ::-webkit-scrollbar {
-  width: 14px;
+  width: 12px;
 }
 
-::-webkit-scrollbar-track {
-  /* dark 6 */
-  background: #25262b;
+[data-theme="light"]::-webkit-scrollbar-track,
+[data-theme="dark"]::-webkit-scrollbar-track,
+[data-theme="black"]::-webkit-scrollbar-track {
+  background: var(--mantine-color-bg-2);
 }
 
-::-webkit-scrollbar-thumb {
-  /* gray 6 */
-  background: #868e96;
+[data-theme="light"]::-webkit-scrollbar-thumb,
+[data-theme="dark"]::-webkit-scrollbar-thumb,
+[data-theme="black"]::-webkit-scrollbar-thumb {
+  background: var(--mantine-color-bg-4);
 }
 
-::-webkit-scrollbar-thumb:hover {
-  /* gray 7 */
-  background: #495057;
+[data-theme="light"]::-webkit-scrollbar-thumb:hover,
+[data-theme="dark"]::-webkit-scrollbar-thumb:hover,
+[data-theme="black"]::-webkit-scrollbar-thumb:hover {
+  background: var(--mantine-color-bg-5);
 }

src/renderer/App.tsx

@@ -1,30 +1,30 @@
-import { useEffect, useState } from 'react';
-import { HashRouter as Router, Routes, Route } from 'react-router-dom';
-const { ipcRenderer } = require('electron');
-import { useRecoilValue, useSetRecoilState } from 'recoil';
-import { ModalsProvider } from '@mantine/modals';
-import { Notifications } from '@mantine/notifications';
-import routes from '@/common/constants/routes.json';
-import DashboardPage from './components/general/DashboardPage';
-import ReaderPage from './components/reader/ReaderPage';
-import ipcChannels from '@/common/constants/ipcChannels.json';
-import { migrateSeriesTags } from './features/library/utils';
-import AppLoading from './components/general/AppLoading';
-import { categoryListState, seriesListState } from './state/libraryStates';
-import { downloaderClient } from './services/downloader';
+import { useEffect, useState } from "react";
+import { HashRouter as Router, Routes, Route } from "react-router-dom";
+const { ipcRenderer } = require("electron");
+import { useRecoilValue, useSetRecoilState } from "recoil";
+import { ModalsProvider } from "@mantine/modals";
+import { Notifications } from "@mantine/notifications";
+import routes from "@/common/constants/routes.json";
+import DashboardPage from "./components/general/DashboardPage";
+import ReaderPage from "./components/reader/ReaderPage";
+import ipcChannels from "@/common/constants/ipcChannels.json";
+import { migrateSeriesTags } from "./features/library/utils";
+import AppLoading from "./components/general/AppLoading";
+import { categoryListState, seriesListState } from "./state/libraryStates";
+import { downloaderClient } from "./services/downloader";
 import {
   currentTaskState,
   downloadErrorsState,
   queueState,
   runningState,
-} from './state/downloaderStates';
-import { autoCheckForUpdatesState } from './state/settingStates';
-import library from './services/library';
+} from "./state/downloaderStates";
+import { autoCheckForUpdatesState } from "./state/settingStates";
+import library from "./services/library";
 import {
   createRendererIpcHandlers,
   loadStoredExtensionSettings,
   loadStoredTrackerTokens,
-} from './services/ipc';
+} from "./services/ipc";
 
 loadStoredExtensionSettings();
 loadStoredTrackerTokens();
@@ -42,7 +42,7 @@ export default function App() {
 
   useEffect(() => {
     if (loading) {
-      console.debug('Performing initial app load steps');
+      console.debug("Performing initial app load steps");
 
       /**
        * Add any additional preload steps here (e.g. data migration, verifications, etc)
@@ -66,7 +66,7 @@ export default function App() {
       if (autoCheckForUpdates) {
         ipcRenderer.invoke(ipcChannels.APP.CHECK_FOR_UPDATES);
       } else {
-        console.debug('Skipping update check, autoCheckForUpdates is disabled');
+        console.debug("Skipping update check, autoCheckForUpdates is disabled");
       }
 
       setSeriesList(library.fetchSeriesList());

src/renderer/components/about/About.tsx

@@ -1,9 +1,12 @@
 import React, { useState } from 'react';
 const { ipcRenderer } = require('electron');
-import { Title, Text, Button, Group } from '@mantine/core';
+import { Title, Group } from '@mantine/core';
 import packageJson from '../../../../package.json';
 import ipcChannels from '@/common/constants/ipcChannels.json';
 import { IconGitFork, IconHome, IconNotebook, IconScale } from '@tabler/icons';
+import DefaultText from '../general/DefaultText';
+import DefaultButton from '../general/DefaultButton';
+import DefaultTitle from '../general/DefaultTitle';
 
 const About: React.FC = () => {
   const [checkingForUpdate, setCheckingForUpdate] = useState(false);
@@ -19,70 +22,70 @@ const About: React.FC = () => {
   return (
     <>
       <Group pt="sm" justify="space-between">
-        <Title order={2} pb="xs">
+        <DefaultTitle order={2} pb="xs">
           {packageJson.productName} v{packageJson.version}
-        </Title>
-        <Button size="xs" onClick={handleUpdateCheck} loading={checkingForUpdate}>
+        </DefaultTitle>
+        <DefaultButton size="xs" onClick={handleUpdateCheck} loading={checkingForUpdate}>
           Check for Updates
-        </Button>
+        </DefaultButton>
       </Group>
 
-      <Text pb="xs" pt="md">
+      <DefaultText pb="xs" pt="md">
         Houdoku is a desktop manga reader. To add a series to your library, click the{' '}
-        <Text component="span" c="teal" fw={700}>
+        <DefaultText component="span" c="teal" fw={700}>
           Add Series
-        </Text>{' '}
+        </DefaultText>{' '}
         tab on the left panel and search for the series from a supported content source. To add more
         content sources, install a{' '}
-        <Text component="span" c="violet" fw={700}>
+        <DefaultText component="span" c="violet" fw={700}>
           Plugin
-        </Text>
+        </DefaultText>
         .
-      </Text>
-      <Text pb="xs">
+      </DefaultText>
+      <DefaultText pb="xs">
         Houdoku is open source. Please report issues or request features on GitHub.
-      </Text>
+      </DefaultText>
       <Group gap="xs" pt="md">
-        <Button
-          color="teal"
+        <DefaultButton
+          oc="teal"
           leftSection={<IconHome size={18} />}
           component="a"
           href={packageJson.homepage}
           target="_blank"
           rel="noreferrer"
         >
           Official Website
-        </Button>
-        <Button
-          color="blue"
+        </DefaultButton>
+        <DefaultButton
+          oc="blue"
           leftSection={<IconNotebook size={18} />}
           component="a"
           href={`${packageJson.homepage}/docs`}
           target="_blank"
           rel="noreferrer"
         >
           Documentation
-        </Button>
-        <Button
-          color="grape"
+        </DefaultButton>
+        <DefaultButton
+          oc="grape"
           leftSection={<IconGitFork size={18} />}
           component="a"
           href={packageJson.repository.url}
           target="_blank"
           rel="noreferrer"
         >
           Repository
-        </Button>
-        <Button
-          color="gray"
+        </DefaultButton>
+        <DefaultButton
+          oc="gray"
           leftSection={<IconScale size={18} />}
           component="a"
           href={`${packageJson.repository.url}/blob/master/LICENSE.txt`}
           target="_blank"
           rel="noreferrer"
         >
           License
-        </Button>
+        </DefaultButton>
       </Group>
     </>
   );

src/renderer/components/downloads/DownloadQueue.module.css

@@ -0,0 +1,5 @@
+.task {
+  &[data-theme="light"], &[data-theme="dark"], &[data-theme="black"] {
+    background-color: var(--mantine-color-bg-2);
+  }
+}

src/renderer/components/downloads/DownloadQueue.tsx

@@ -1,33 +1,30 @@
 import React from 'react';
 import { useRecoilValue } from 'recoil';
-import {
-  Box,
-  ScrollArea,
-  Stack,
-  Text,
-  Title,
-  Progress,
-  Group,
-  Button,
-  Center,
-} from '@mantine/core';
+import { Box, ScrollArea, Stack, Progress, Group, Button, Center } from '@mantine/core';
 import { IconPlayerPause, IconPlayerPlay } from '@tabler/icons';
 import { downloaderClient, DownloadTask } from '@/renderer/services/downloader';
 import { currentTaskState, queueState } from '@/renderer/state/downloaderStates';
+import DefaultText from '../general/DefaultText';
+import DefaultButton from '../general/DefaultButton';
+import styles from './DownloadQueue.module.css';
+import { themeState } from '@/renderer/state/settingStates';
+import { themeProps } from '@/renderer/util/themes';
+import DefaultTitle from '../general/DefaultTitle';
 
 const DownloadQueue: React.FC = () => {
+  const theme = useRecoilValue(themeState);
   const queue = useRecoilValue(queueState);
   const currentTask = useRecoilValue(currentTaskState);
 
   const renderHeader = () => {
     return (
       <Group pt="sm" mb="xs" justify={'space-between'}>
-        <Title order={3}>Download Queue</Title>
+        <DefaultTitle order={3}>Download Queue</DefaultTitle>
         {currentTask || queue.length > 0 ? (
           <Group gap="xs">
-            <Button variant="default" size="xs" onClick={() => downloaderClient.clear()}>
+            <DefaultButton variant="default" size="xs" onClick={() => downloaderClient.clear()}>
               Clear Queue
-            </Button>
+            </DefaultButton>
             {currentTask === null && queue.length > 0 ? (
               <Button
                 size="xs"
@@ -57,10 +54,16 @@ const DownloadQueue: React.FC = () => {
 
   const renderTask = (task: DownloadTask) => {
     return (
-      <Box key={`${task.series.id}-${task.chapter.id}`} mr="sm" p="xs" bg={'dark.8'}>
+      <Box
+        {...themeProps(theme)}
+        key={`${task.series.id}-${task.chapter.id}`}
+        mr="sm"
+        p="xs"
+        className={styles.task}
+      >
         <Group wrap="nowrap" justify="space-between">
-          <Text>{task.series.title}</Text>
-          <Text>Chapter {task.chapter.chapterNumber}</Text>
+          <DefaultText>{task.series.title}</DefaultText>
+          <DefaultText>Chapter {task.chapter.chapterNumber}</DefaultText>
         </Group>
         {task.page && task.totalPages ? (
           <Progress.Root size="xl">
@@ -89,7 +92,7 @@ const DownloadQueue: React.FC = () => {
           {queue.map((task: DownloadTask) => renderTask(task))}
           {currentTask === null && queue.length === 0 ? (
             <Center style={{ height: '36vh', minHeight: 225 }}>
-              <Text>There are no downloads queued.</Text>
+              <DefaultText>There are no downloads queued.</DefaultText>
             </Center>
           ) : (
             ''