From 4a9048ac6231ebb1776e6bfedc25bea3fc70b614 Mon Sep 17 00:00:00 2001
From: sethburkart123 <seth.burkart@hills.adventist.edu.au>
Date: Tue, 20 Aug 2024 12:57:07 +1000
Subject: [PATCH] feat: add force theme option to custom themes

---
 src/interface/pages/ThemeCreator.tsx | 26 +++++++++++++++++++++++++-
 src/interface/types/CustomThemes.ts  |  1 +
 src/seqta/ui/themes/applyTheme.ts    |  5 +++++
 src/seqta/ui/themes/removeTheme.ts   |  5 +++++
 src/types/storage.ts                 |  1 +
 5 files changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/interface/pages/ThemeCreator.tsx b/src/interface/pages/ThemeCreator.tsx
index 0011e13d..ffe690ae 100644
--- a/src/interface/pages/ThemeCreator.tsx
+++ b/src/interface/pages/ThemeCreator.tsx
@@ -4,7 +4,7 @@ import ColorPicker from 'react-best-gradient-color-picker';
 import Accordion from '../components/Accordian';
 import Switch from '../components/Switch';
 import { sendThemeUpdate } from '../hooks/ThemeManagment';
-import { PlusIcon, XMarkIcon } from '@heroicons/react/24/outline';
+import { MoonIcon, PlusIcon, SunIcon, XMarkIcon } from '@heroicons/react/24/outline';
 import { v4 as uuidv4 } from 'uuid';
 import { CustomTheme, CustomThemeBase64 } from '../types/CustomThemes';
 import browser from 'webextension-polyfill';
@@ -23,6 +23,7 @@ function ThemeCreator() {
     coverImage: null,
     isEditable: true,
     hideThemeName: false,
+    forceDark: undefined,
   });
 
   useEffect(() => {
@@ -243,6 +244,29 @@ function ThemeCreator() {
         </div>
 
         <Divider /> */}
+
+        <div className='flex items-center justify-between'>
+          <div>
+            <div className='pr-2 text-sm font-semibold'>Force Theme</div>
+            <div className='pr-2 text-[11px]'>Force users to use either dark or light mode</div>
+          </div>
+
+          <Switch state={theme.forceDark == undefined ? false : true} onChange={value => setTheme({ ...theme, forceDark: value ? false : undefined })} />
+        </div>
+
+        { theme.forceDark != undefined &&
+        <div className='flex items-center justify-between pt-4'>
+          <div>
+            <div className='pr-2 text-sm font-semibold'>Force {theme.forceDark ? 'Dark' : 'Light'} Mode</div>
+            <div className='pr-2 text-[11px]'>Force users to use {theme.forceDark ? 'dark' : 'light'} mode</div>
+          </div>
+          <button className='flex items-center justify-center p-2 transition rounded-lg bg-zinc-100 dark:bg-zinc-700' onClick={() => setTheme({ ...theme, forceDark: !theme.forceDark })}>
+            {theme.forceDark ? <MoonIcon className='w-6 h-6' /> : <SunIcon className='w-6 h-6' />}
+          </button>
+        </div>
+        }
+
+        <Divider />
         
         <Accordion defaultOpened title='Default Theme Colour'>
           <div className='p-2 mt-2 bg-white rounded-lg w-fit dark:bg-zinc-900'>
diff --git a/src/interface/types/CustomThemes.ts b/src/interface/types/CustomThemes.ts
index 821b104c..2191019d 100644
--- a/src/interface/types/CustomThemes.ts
+++ b/src/interface/types/CustomThemes.ts
@@ -12,6 +12,7 @@ export type CustomTheme = {
   hideThemeName: boolean;
   webURL?: string;
   selectedColor?: string;
+  forceDark?: boolean;
 }
 
 export type DownloadedTheme = CustomTheme & {
diff --git a/src/seqta/ui/themes/applyTheme.ts b/src/seqta/ui/themes/applyTheme.ts
index 314a3826..85054ef7 100644
--- a/src/seqta/ui/themes/applyTheme.ts
+++ b/src/seqta/ui/themes/applyTheme.ts
@@ -1,4 +1,5 @@
 import { CustomImage, CustomTheme } from '../../../interface/types/CustomThemes';
+import { settingsState } from '../../utils/listeners/SettingsState';
 import { applyCustomCSS } from './Themes';
 
 
@@ -8,6 +9,10 @@ export const applyTheme = async (theme: CustomTheme) => {
 
   if (theme?.CustomCSS) CustomCSS = theme.CustomCSS;
   if (theme?.CustomImages) CustomImages = theme.CustomImages;
+  if (theme?.forceDark) {
+    settingsState.originalDarkMode = settingsState.DarkMode
+    settingsState.DarkMode = theme.forceDark
+  }
 
   // Apply custom CSS
   applyCustomCSS(CustomCSS);
diff --git a/src/seqta/ui/themes/removeTheme.ts b/src/seqta/ui/themes/removeTheme.ts
index 040923df..8a2e5fa5 100644
--- a/src/seqta/ui/themes/removeTheme.ts
+++ b/src/seqta/ui/themes/removeTheme.ts
@@ -19,6 +19,11 @@ export const removeTheme = async (theme: CustomTheme) => {
   if (settingsState.originalSelectedColor !== '') {
     settingsState.selectedColor = settingsState.originalSelectedColor
   }
+
+  if (settingsState.originalDarkMode !== undefined) {
+    settingsState.DarkMode = settingsState.originalDarkMode
+    settingsState.originalDarkMode = undefined
+  }
   
   // Remove custom images
   const customImageVariables = theme.CustomImages.map((image) => image.variableName);
diff --git a/src/types/storage.ts b/src/types/storage.ts
index ca8039fe..5d1fbfc5 100644
--- a/src/types/storage.ts
+++ b/src/types/storage.ts
@@ -37,6 +37,7 @@ export interface SettingsState {
   animations: boolean;
   defaultPage: string;
   devMode?: boolean;
+  originalDarkMode?: boolean;
 }
 
 interface ToggleItem {