From 353168ad4e9715d5b3ef58f0f237f7429bef7459 Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Sun, 13 Nov 2022 01:52:39 -0800
Subject: [PATCH] Add light/dark type to theme

---
 src/renderer/app.tsx                                 |  2 +-
 .../features/settings/components/general-tab.tsx     | 12 ++++--------
 src/renderer/hooks/use-theme.ts                      |  8 +++++++-
 3 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 33c9ead87..d49f1ed57 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -31,7 +31,7 @@ export const App = () => {
       withGlobalStyles
       withNormalizeCSS
       theme={{
-        colorScheme: theme,
+        colorScheme: theme as 'light' | 'dark',
         defaultRadius: 'xs',
         dir: 'ltr',
         focusRing: 'auto',
diff --git a/src/renderer/features/settings/components/general-tab.tsx b/src/renderer/features/settings/components/general-tab.tsx
index ce7a5b96e..61dabe67c 100644
--- a/src/renderer/features/settings/components/general-tab.tsx
+++ b/src/renderer/features/settings/components/general-tab.tsx
@@ -1,14 +1,10 @@
 import { Divider, Stack } from '@mantine/core';
 import { Switch, Select } from '@/renderer/components';
 import { SettingsOptions } from '@/renderer/features/settings/components/settings-option';
+import { THEME_DATA } from '@/renderer/hooks';
 import { useSettingsStore } from '@/renderer/store/settings.store';
 import { AppTheme } from '@/renderer/themes/types';
 
-const THEME_OPTIONS = [
-  { label: 'Default Dark', value: AppTheme.DEFAULT_DARK },
-  { label: 'Default Light', value: AppTheme.DEFAULT_LIGHT },
-];
-
 export const GeneralTab = () => {
   const settings = useSettingsStore((state) => state.general);
   const update = useSettingsStore((state) => state.setSettings);
@@ -59,7 +55,7 @@ export const GeneralTab = () => {
     {
       control: (
         <Select
-          data={THEME_OPTIONS}
+          data={THEME_DATA}
           defaultValue={settings.theme}
           onChange={(e) => {
             update({
@@ -78,7 +74,7 @@ export const GeneralTab = () => {
     {
       control: (
         <Select
-          data={THEME_OPTIONS}
+          data={THEME_DATA}
           defaultValue={settings.themeDark}
           onChange={(e) => {
             update({
@@ -97,7 +93,7 @@ export const GeneralTab = () => {
     {
       control: (
         <Select
-          data={THEME_OPTIONS}
+          data={THEME_DATA}
           defaultValue={settings.themeLight}
           onChange={(e) => {
             update({
diff --git a/src/renderer/hooks/use-theme.ts b/src/renderer/hooks/use-theme.ts
index f791425a7..487176a7b 100644
--- a/src/renderer/hooks/use-theme.ts
+++ b/src/renderer/hooks/use-theme.ts
@@ -1,5 +1,11 @@
 import { useEffect, useState } from 'react';
 import { useSettingsStore } from '@/renderer/store/settings.store';
+import { AppTheme } from '@/renderer/themes/types';
+
+export const THEME_DATA = [
+  { label: 'Default dark', type: 'dark', value: AppTheme.DEFAULT_DARK },
+  { label: 'Default light', type: 'light', value: AppTheme.DEFAULT_LIGHT },
+];
 
 export const useTheme = () => {
   const getCurrentTheme = () =>
@@ -33,5 +39,5 @@ export const useTheme = () => {
     document.body.setAttribute('data-theme', appTheme);
   }, [appTheme]);
 
-  return isDarkTheme ? 'dark' : 'light';
+  return THEME_DATA.find((t) => t.value === appTheme)?.type || 'dark';
 };