From 020e33f42b852706f37f071f65eb50220c476a93 Mon Sep 17 00:00:00 2001
From: MathieuG-P <40181755+Zagrios@users.noreply.github.com>
Date: Tue, 28 Jun 2022 20:01:53 +0200
Subject: [PATCH] support light theme

---
 src/renderer/App.tsx                          | 17 ++++++-
 .../available-version-item.component.tsx      |  2 +-
 .../modal-types/guard-modal.component.tsx     |  6 +--
 .../installation-folder-modal.component.tsx   |  4 +-
 .../modal-types/login-modal.component.tsx     | 12 ++---
 .../modal-types/uninstall-modal.component.tsx |  4 +-
 .../components/modal/modal.component.tsx      |  2 +-
 .../nav-bar/bs-version-item.component.tsx     |  6 +--
 .../components/nav-bar/nav-bar.component.tsx  |  2 +-
 .../bsm-progress-bar.component.tsx            | 22 +++------
 .../setting-color-chooser.component.tsx       |  2 +-
 .../settings/setting-container.component.tsx  |  4 +-
 .../setting-radio-array.component.tsx         |  8 ++--
 .../shared/bsm-button.component.tsx           |  4 +-
 .../shared/bsm-dropdown-button.component.tsx  | 10 ++---
 .../shared/tab-nav-bar.component.tsx          |  2 +-
 .../title-bar/title-bar.component.tsx         | 10 ++---
 .../config/default-configuration.config.ts    |  7 ++-
 .../pages/settings-page.component.tsx         | 45 ++++++++++++-------
 .../pages/version-viewer.component.tsx        | 18 ++++----
 src/renderer/services/modale.service.ts       |  1 +
 src/renderer/services/theme.service.ts        | 35 +++++++++++++++
 tailwind.config.js                            |  6 +++
 23 files changed, 143 insertions(+), 86 deletions(-)
 create mode 100644 src/renderer/services/theme.service.ts

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
index 940723e8..506644cd 100644
--- a/src/renderer/App.tsx
+++ b/src/renderer/App.tsx
@@ -6,16 +6,29 @@ import { VersionViewer } from "./pages/version-viewer.component";
 import { Modal } from "./components/modal/modal.component";
 import { SettingsPage } from "./pages/settings-page.component";
 import { BsmProgressBar } from "./components/progress-bar/bsm-progress-bar.component";
+import { useEffect } from "react";
+import { ThemeService } from "./services/theme.service";
+import { ThemeConfig } from "./config/default-configuration.config";
 
 export default function App() {
 
+  const themeService = ThemeService.getInstance();
+
+  useEffect(() => {
+    themeService.theme$.subscribe(() => {
+      if(themeService.isDark || (themeService.isOS && window.matchMedia('(prefers-color-scheme: dark)').matches)){ document.documentElement.classList.add('dark'); }
+      else { document.documentElement.classList.remove('dark'); }
+    });
+  }, [])
+  
+
   return (
-    <div className="relative w-screen h-screen overflow-hidden flex dark:bg-main-color-1 z-0 max-w-full">
+    <div className="relative w-screen h-screen overflow-hidden flex bg-light-main-color-1 dark:bg-main-color-1 z-0 max-w-full">
       <Modal/>
       <NavBar/>
       <div className="relative flex flex-col grow max-w-full min-w-0">
         <TitleBar/>
-        <div className="bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">
+        <div className="bg-light-main-color-2 dark:bg-main-color-2 relative rounded-tl-lg grow overflow-hidden max-w-full">
           <Routes>
             <Route path={"/bs-version/:versionNumber"} element={<VersionViewer/>}/>
             <Route path={"/settings"} element={<SettingsPage/>}/>
diff --git a/src/renderer/components/available-versions/available-version-item.component.tsx b/src/renderer/components/available-versions/available-version-item.component.tsx
index ca32ee08..69b0f78f 100644
--- a/src/renderer/components/available-versions/available-version-item.component.tsx
+++ b/src/renderer/components/available-versions/available-version-item.component.tsx
@@ -37,7 +37,7 @@ export function AvailableVersionItem(props: {version: BSVersion}) {
   return (
     <div className="group m-3 relative w-72 h-60 transition-transform active:scale-[.98]" onClick={toggleSelect}>
       <div className={`absolute glow-on-hover group-hover:opacity-100 ${selected && "opacity-100"}`}></div>
-      <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 bg-main-color-2 cursor-pointer group-hover:shadow-none duration-300 ${!selected && "shadow-lg shadow-gray-900"}`}>
+      <div className={`relative flex flex-col overflow-hidden rounded-md w-72 h-60 cursor-pointer group-hover:shadow-none duration-300 bg-light-main-color-2 dark:bg-main-color-2 ${!selected && "shadow-lg shadow-gray-900"}`}>
         <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="absolute top-0 right-0 w-full h-full opacity-40 blur-xl object-cover" loading="lazy"/>
         <BsmImage image={props.version.ReleaseImg ? props.version.ReleaseImg : defaultImage} errorImage={defaultImage} className="bg-black w-full h-3/4 object-cover" loading="lazy"/>
         <div className="relative z-[1] p-2 w-full flex items-center justify-between grow">
diff --git a/src/renderer/components/modal/modal-types/guard-modal.component.tsx b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
index 75d637c5..d71e0ae3 100644
--- a/src/renderer/components/modal/modal-types/guard-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/guard-modal.component.tsx
@@ -15,11 +15,11 @@ export function GuardModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); login();}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center">Steam Guard</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Steam Guard</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
         <div className="mb-4">
-            <label className="block font-bold tracking-wide" htmlFor="guard">Guard Code</label>
-            <input className="w-full bg-main-color-1 px-2 rounded-md py-[2px]" onChange={e => setGuardCode(e.target.value.toUpperCase())} value={guardCode} type="guard" name="guard" id="guard" placeholder="Enter your Guard code"/>
+            <label className="block font-bold tracking-wide text-gray-800 dark:text-gray-200" htmlFor="guard">Guard Code</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-2 rounded-md py-[2px]" onChange={e => setGuardCode(e.target.value.toUpperCase())} value={guardCode} type="guard" name="guard" id="guard" placeholder="Enter your Guard code"/>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
             <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
diff --git a/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx b/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx
index 5cf817bb..750f9f69 100644
--- a/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/installation-folder-modal.component.tsx
@@ -10,9 +10,9 @@ export function InstallationFolderModal({resolver}: {resolver: (x: ModalResponse
   return (
     <>
         <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center">installation folder</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">installation folder</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
-        <p className="max-w-sm">Changing the default installation folder for Beat Saber instances will cause all installed data to be moved to the new folder.</p>
+        <p className="max-w-sm text-gray-800 dark:text-gray-200">Changing the default installation folder for Beat Saber instances will cause all installed data to be moved to the new folder.</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
             <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.CANCELED})} withBar={false} text="Cancel"/>
             <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" onClick={() => resolver({exitCode: ModalExitCode.COMPLETED})} withBar={false} text="Choose Folder"/>
diff --git a/src/renderer/components/modal/modal-types/login-modal.component.tsx b/src/renderer/components/modal/modal-types/login-modal.component.tsx
index 190f428c..32e82f3b 100644
--- a/src/renderer/components/modal/modal-types/login-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/login-modal.component.tsx
@@ -17,19 +17,19 @@ export function LoginModal({resolver}: {resolver: (x: ModalResponse) => void}) {
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); loggin();}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center">Steam Login</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Steam Login</h1>
         <BsmImage className="mx-auto h-20" image={BeatImpatient} />
         <div className="mb-2">
-            <label className="block font-bold cursor-pointer tracking-wide" htmlFor="username">Username</label>
-            <input className="w-full bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder="Enter your username"/>
+            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="username">Username</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setUsername(e.target.value)} value={username} type="text" name="username" id="username" placeholder="Enter your username"/>
         </div>
         <div className="mb-2">
-            <label className="block font-bold cursor-pointer tracking-wide" htmlFor="password">Password</label>
-            <input className="w-full bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder="Enter your password"/>
+            <label className="block font-bold cursor-pointer tracking-wide text-gray-800 dark:text-gray-200" htmlFor="password">Password</label>
+            <input className="w-full bg-light-main-color-1 dark:bg-main-color-1 px-1 py-[2px] rounded-md outline-none" onChange={e => setPassword(e.target.value)} value={password} type="password" name="password" id="password" placeholder="Enter your password"/>
         </div>
         <div className="flex items-center content-center justify-start mb-3">
             <input onChange={e => setStay(e.target.checked)} checked={stay} className="mr-1" type="checkbox" name="stay" id="stay" />
-            <label className="cursor-pointer" htmlFor="stay">Stay connected</label>
+            <label className="cursor-pointer text-gray-800 dark:text-gray-200" htmlFor="stay">Stay connected</label>
         </div>
         <div className="grid grid-flow-col grid-cols-2 gap-4">
             <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
diff --git a/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx b/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
index 640a6a69..e5b684f7 100644
--- a/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
+++ b/src/renderer/components/modal/modal-types/uninstall-modal.component.tsx
@@ -10,9 +10,9 @@ export function UninstallModal({resolver}: {resolver: (x: ModalResponse) => void
 
   return (
     <form onSubmit={(e) => {e.preventDefault(); resolver({exitCode: ModalExitCode.COMPLETED})}}>
-        <h1 className="text-3xl uppercase tracking-wide w-full text-center">Uninstall</h1>
+        <h1 className="text-3xl uppercase tracking-wide w-full text-center text-gray-800 dark:text-gray-200">Uninstall</h1>
         <BsmImage className="mx-auto h-24" image={BeatConflict}/>
-        <p className="max-w-sm">Are you sure you want to uninstall BeatSaber {version.BSVersion} ? You will have to re-download it to play it.</p>
+        <p className="max-w-sm text-gray-800 dark:text-gray-200">Are you sure you want to uninstall BeatSaber {version.BSVersion} ? You will have to re-download it to play it.</p>
         <div className="grid grid-flow-col grid-cols-2 gap-4 mt-4">
             <BsmButton className="rounded-md text-center bg-gray-500 hover:brightness-110 transition-all" onClick={() => {resolver({exitCode: ModalExitCode.CANCELED})}} withBar={false} text="Cancel"/>
             <BsmButton className="rounded-md text-center bg-blue-500 hover:brightness-110 transition-all" type="submit" withBar={false} text="Uninstall"/>
diff --git a/src/renderer/components/modal/modal.component.tsx b/src/renderer/components/modal/modal.component.tsx
index df51e74e..cd8aa9af 100644
--- a/src/renderer/components/modal/modal.component.tsx
+++ b/src/renderer/components/modal/modal.component.tsx
@@ -35,7 +35,7 @@ export function Modal() {
       <div className="top-0 absolute w-screen h-screen flex content-center items-center justify-center z-50">
         <motion.span key="modal-overlay" onClick={() => modalSevice.resolve({exitCode: ModalExitCode.NO_CHOICE})} className="absolute top-0 bottom-0 right-0 left-0 bg-black" initial={{opacity: 0}} animate={{opacity: modalType && .60}} exit={{opacity: 0}} transition={{duration: .2}}/>
         <motion.div key="modal" initial={{y: modalYOut}} animate={{y: 0}} exit={{y: modalYOut}}>
-          <div className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-main-color-3 to-main-color-2">
+          <div className="relative p-4 text-gray-200 overflow-hidden rounded-md shadow-lg shadow-black bg-gradient-to-br from-light-main-color-3 to-light-main-color-2 dark:from-main-color-3 dark:to-main-color-2">
             <span className="absolute bg-gradient-to-r from-blue-500 to-red-500 top-0 w-full left-0 h-1"></span>
             {modalType === ModalType.STEAM_LOGIN && <LoginModal resolver={modalSevice.getResolver()}/>}
             {modalType === ModalType.GUARD_CODE && <GuardModal resolver={modalSevice.getResolver()}/>}
diff --git a/src/renderer/components/nav-bar/bs-version-item.component.tsx b/src/renderer/components/nav-bar/bs-version-item.component.tsx
index 1e28e571..5311cf7f 100644
--- a/src/renderer/components/nav-bar/bs-version-item.component.tsx
+++ b/src/renderer/components/nav-bar/bs-version-item.component.tsx
@@ -30,16 +30,16 @@ export default function BsVersionItem(props: {version: BSVersion}) {
         setDownloadPercent(0);
       }
     })
-  }, [])
+  }, []);
 
 
   return (
     <div className={`outline-none relative p-[1px] overflow-hidden rounded-full flex justify-center content-center items-center mb-1 ${downloading && "nav-item-download"}`}>
       <div className="absolute top-0 w-full h-full" style={{transform: `translate(${-(100 - downloadPercent)}%, 0)`}}></div>
-      <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className={`z-[1] flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2 hover:bg-main-color-3 ${downloading && 'bg-black'} ${(isActive() && !downloading) && "bg-main-color-3"}`}>
+      <Link to={`/bs-version/${props.version.BSVersion}`} state={props.version} className={`z-[1] flex cursor-pointer w-full justify-center content-center rounded-full items-center p-[3px] pl-2 pr-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3 ${downloading && 'bg-black'} ${(isActive() && !downloading) && "bg-light-main-color-3 dark:bg-main-color-3"}`}>
         {props.version.steam && <SteamIcon className="w-[19px] h-[19px] mr-1"/>}
         {!props.version.steam && <BsNoteFill className="w-[19px] h-[19px] mr-1 text-red-600"/>}
-        <span className="flex items-center justify-center content-center shrink-0 grow text-lg text-gray-200 font-bold min-w-0 tracking-wide">{props.version.BSVersion}</span>
+        <span className="flex items-center justify-center content-center shrink-0 grow text-lg dark:text-gray-200 text-gray-800 font-bold min-w-0 tracking-wide">{props.version.BSVersion}</span>
       </Link>
     </div>
 
diff --git a/src/renderer/components/nav-bar/nav-bar.component.tsx b/src/renderer/components/nav-bar/nav-bar.component.tsx
index 053c73e4..a90d08cd 100644
--- a/src/renderer/components/nav-bar/nav-bar.component.tsx
+++ b/src/renderer/components/nav-bar/nav-bar.component.tsx
@@ -17,7 +17,7 @@ export function NavBar() {
   const secondColor = useObservable(configService.watch<string>("second-color"));
 
   return (
-    <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-gray-200 dark:bg-main-color-1'>
+    <div id='nav-bar' className='z-10 flex flex-col h-full max-h-full items-center p-1 bg-light-main-color-1 dark:bg-main-color-1'>
       <div className='w-full flex items-start content-start justify-center relative mb-3'>
         <div className='relative aspect-square w-16'>
           <span id='logo-bottom' className='aspect-square w-16' style={{backgroundColor: firstColor}}> </span>
diff --git a/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx b/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
index 26b9cdfa..7d9adbae 100644
--- a/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
+++ b/src/renderer/components/progress-bar/bsm-progress-bar.component.tsx
@@ -1,39 +1,27 @@
-import { useEffect, useState } from "react"
 import { ProgressBarService } from "renderer/services/progress-bar.service";
 import { AnimatePresence, motion } from "framer-motion";
 import BeatRunningImg from "../../../../assets/beat-running.png"
 import BeatWaitingImg from "../../../../assets/beat-waiting.png"
+import { useObservable } from "renderer/hooks/use-observable.hook";
 
 export function BsmProgressBar() {
 
     const progressBarService = ProgressBarService.getInstance();
 
-    const [progress, setProgress] = useState(0);
-    const [visible, setVisible] = useState(false);
-
-    useEffect(() => {
-      
-        const progressSub = progressBarService.progression$.subscribe(val => setProgress(val));
-        const visibleSub = progressBarService.visible$.subscribe(state => setVisible(state));
-        
-        return () => {
-            progressSub.unsubscribe();
-            visibleSub.unsubscribe();
-        }
-    }, [])
-    
+    const progress= useObservable(progressBarService.progression$);
+    const visible = useObservable(progressBarService.visible$);
 
   return (
     <AnimatePresence> { visible && 
         <motion.div initial={{y: "120%"}} animate={{y:"0%"}} exit={{y:"120%"}} className="w-full absolute h-14 flex justify-center items-center bottom-2">
-            <div className={`flex items-center content-center justify-center bottom-9 z-10 rounded-lg bg-main-color-2 shadow-center shadow-black cursor-pointer transition-all duration-300 ${!progress && "h-14 w-14 rounded-full"} ${!!progress && "h-5 w-3/4 rounded-full p-[6px]"}`}>
+            <div className={`flex items-center content-center justify-center bottom-9 z-10 rounded-lg bg-light-main-color-2 dark:bg-main-color-2 shadow-center shadow-black cursor-pointer transition-all duration-300 ${!progress && "h-14 w-14 rounded-full"} ${!!progress && "h-5 w-3/4 rounded-full p-[6px]"}`}>
             { !!progress && (
             <>
                 <div className="relative flex items-center h-full w-full rounded-full bg-black">
                     <div className="w-0 h-full relative rounded-full download-progress flex items-center transition-all" style={{width: `${progress}%`}}>
                         <img className="h-[70px] w-[70px] min-w-fit absolute z-[1] -translate-y-1 -right-8 transition-all" src={BeatRunningImg} />
                     </div>
-                    <span className="absolute w-full text-center text-white -top-[3px] left-0 text-[10px]">{`${progress}%`}</span>
+                    <span className="absolute w-full text-center text-white -top-[3px] left-0 text-[10px]">{`${Math.floor(progress)}%`}</span>
                 </div>
             </>
             )}
diff --git a/src/renderer/components/settings/setting-color-chooser.component.tsx b/src/renderer/components/settings/setting-color-chooser.component.tsx
index 8fa1b710..8272eae6 100644
--- a/src/renderer/components/settings/setting-color-chooser.component.tsx
+++ b/src/renderer/components/settings/setting-color-chooser.component.tsx
@@ -14,7 +14,7 @@ export default function SettingColorChooser({color, onChange}: {color?: string,
             <AnimatePresence>
                 {colorVisible && 
                     <motion.div initial={{opacity: 0}} animate={{opacity: 1}} transition={{duration: .1}} exit={{opacity: 0}} className="absolute flex items-center justify-center translate-y-9 shadow-lg rounded-lg shadow-black">
-                        <div className="absolute w-2/4 aspect-square rotate-45 bg-main-color-3 -translate-y-12"></div>
+                        <div className="absolute w-2/4 aspect-square rotate-45 bg-light-main-color-3 dark:bg-main-color-3 -translate-y-12"></div>
                         <HexColorPicker color={color} onChange={onChange} className="" />
                     </motion.div>
                 }
diff --git a/src/renderer/components/settings/setting-container.component.tsx b/src/renderer/components/settings/setting-container.component.tsx
index dacf7cf1..77f215d2 100644
--- a/src/renderer/components/settings/setting-container.component.tsx
+++ b/src/renderer/components/settings/setting-container.component.tsx
@@ -4,8 +4,8 @@ export function SettingContainer({className, title, minorTitle, description, chi
   return (
     <div className={className || "relative mb-5"}>
         { title && <h1 className="font-bold text-2xl mb-1 tracking-wide">{title}</h1> }
-        { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-400">{minorTitle}</h2> }
-        { description && <p className="mb-3 text-sm text-gray-400">{description}</p> }
+        { minorTitle && <h2 className="font-bold mb-1 tracking-wide text-gray-600 dark:text-gray-400">{minorTitle}</h2> }
+        { description && <p className="mb-3 text-sm text-gray-600 dark:text-gray-400">{description}</p> }
         { children }
     </div>
   )
diff --git a/src/renderer/components/settings/setting-radio-array.component.tsx b/src/renderer/components/settings/setting-radio-array.component.tsx
index ad7338ab..82028594 100644
--- a/src/renderer/components/settings/setting-radio-array.component.tsx
+++ b/src/renderer/components/settings/setting-radio-array.component.tsx
@@ -6,10 +6,10 @@ export function SettingRadioArray({items, selectedItem = items[0].id, onItemSele
   return (
     <div className="w-full">
         { items.map(i => (
-            <div onClick={() => onItemSelected(i.id)} key={i.id} className={`py-3 my-[6px] w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-200 ${i.id === selectedItem ? "bg-main-color-3" : "bg-main-color-1"}`}>
+            <div onClick={() => onItemSelected(i.id)} key={i.id} className={`py-3 my-[6px] w-full flex cursor-pointer justify-between items-center rounded-md px-2 transition-colors duration-200 ${i.id === selectedItem ? "bg-light-main-color-3 dark:bg-main-color-3" : "bg-light-main-color-1 dark:bg-main-color-1"}`}>
                 <div className="flex items-center">
-                    <div className="h-5 rounded-full aspect-square border-2 border-white p-[3px] mr-2">
-                        <motion.span initial={{scale: 0}} animate={{scale: i.id === selectedItem ? 1 : 0}} className="h-full w-full block bg-white rounded-full"/>
+                    <div className="h-5 rounded-full aspect-square border-2 border-gray-800 dark:border-white p-[3px] mr-2">
+                        <motion.span initial={{scale: 0}} animate={{scale: i.id === selectedItem ? 1 : 0}} className="h-full w-full block bg-gray-800 dark:bg-white rounded-full"/>
                     </div>
                     <h2 className="font-extrabold">{i.text}</h2>
                 </div>
@@ -27,4 +27,4 @@ export function SettingRadioArray({items, selectedItem = items[0].id, onItemSele
   )
 }
 
-export interface RadioItem { id: number, text: string, icon?: BsmIconType, textIcon?: string }
+export interface RadioItem { id: number, text: string, icon?: BsmIconType, textIcon?: string, value?: any }
diff --git a/src/renderer/components/shared/bsm-button.component.tsx b/src/renderer/components/shared/bsm-button.component.tsx
index 2eee4f13..18b3257d 100644
--- a/src/renderer/components/shared/bsm-button.component.tsx
+++ b/src/renderer/components/shared/bsm-button.component.tsx
@@ -6,9 +6,9 @@ import { BsmImage } from "./bsm-image.component";
 export function BsmButton({className, style, imgClassName, icon, image, text, type, active, withBar = true, onClickOutside, onClick}: {className?: string, style?: React.CSSProperties, imgClassName?: string, icon?: BsmIconType, image?: string, text?: string, type?: string, active?: boolean, withBar?: boolean, onClickOutside?: (e: MouseEvent) => void, onClick?: (e: React.MouseEvent) => void}) {
   return (
     <OutsideClickHandler onOutsideClick={e => onClickOutside && onClickOutside(e)}>
-      <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer bg-main-color-2 text-white group`} style={style}>
+      <div onClick={e => onClick && onClick(e)} className={`${className} overflow-hidden cursor-pointer group`} style={style}>
         { image && <BsmImage image={image} className={imgClassName}/> }
-        { icon && <BsmIcon icon={icon} className="h-full w-full"/> }
+        { icon && <BsmIcon icon={icon} className="h-full w-full text-gray-800 dark:text-white"/> }
         {text && (type === "submit" ? <button className="w-full h-full">{text}</button> : <span>{text}</span>)}
         { withBar && (
           <div className="absolute bottom-0 left-0 w-full h-1 bg-red-500">
diff --git a/src/renderer/components/shared/bsm-dropdown-button.component.tsx b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
index ab93e4e0..5be8824d 100644
--- a/src/renderer/components/shared/bsm-dropdown-button.component.tsx
+++ b/src/renderer/components/shared/bsm-dropdown-button.component.tsx
@@ -11,12 +11,12 @@ export function BsmDropdownButton({className, items, align, onItemClick}: {class
 
   return (
     <div className={`${className}`}>
-        <BsmButton onClick={() => setExpanded(!expanded)} className='relative z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
-        <div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-main-color-2 text-sm text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
+        <BsmButton onClick={() => setExpanded(!expanded)} className='relative bg-light-main-color-2 dark:bg-main-color-2 z-[1] p-1 rounded-md text-inherit w-full h-full shadow-md shadow-black' icon="settings" active={expanded} onClickOutside={() => {setExpanded(false)}}/>
+        <div className={`pt-1 pb-1 w-fit absolute cursor-pointer top-[calc(100%-4px)] rounded-md overflow-hidden bg-light-main-color-2 dark:bg-main-color-2 text-sm text-gray-800 dark:text-gray-200 shadow-md shadow-black transition-transform ease-in-out ${align === "left" ? "left-0 origin-top-left" : "right-0 origin-top-right"}`} style={{transform: expanded ? "scale(1)" : "scale(0)"}}>
             { items?.map(i => 
-                <div key={i.id} onClick={() => onItemClick(i.id)} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-main-color-3">
-                    {i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1"></BsmIcon>}
-                    <span className="w-max hover:bg-main-color-3">{i.text}</span>
+                <div key={i.id} onClick={() => onItemClick(i.id)} className="flex justify-start items-center w-full pr-3 pl-3 pt-2 pb-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3">
+                    {i.icon && <BsmIcon icon={i.icon} className="h-5 w-5 mr-1 text-gray-800 dark:text-white"></BsmIcon>}
+                    <span className="w-max">{i.text}</span>
                 </div>
             )}
         </div>
diff --git a/src/renderer/components/shared/tab-nav-bar.component.tsx b/src/renderer/components/shared/tab-nav-bar.component.tsx
index d896edb6..d8d71e6e 100644
--- a/src/renderer/components/shared/tab-nav-bar.component.tsx
+++ b/src/renderer/components/shared/tab-nav-bar.component.tsx
@@ -26,7 +26,7 @@ export function TabNavBar(props: {tabsText: string[], onTabChange: Function, cla
         </div>
         <div ref={tabsWrapper} className="grid" style={{gridTemplateColumns: `repeat(${props.tabsText.length}, minmax(0, 1fr))`}}>
             { props.tabsText.map((y, index) => 
-                <span className="pr-4 pl-4 h-full inline-block bg-main-color-2 text-gray-200 text-lg font-bold text-center hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
+                <span className="pr-4 pl-4 h-full inline-block bg-light-main-color-2 text-gray-800 dark:bg-main-color-2 dark:text-gray-200 text-lg font-bold text-center hover:bg-light-main-color-1 dark:hover:bg-main-color-1" key={index} onClick={() => selectYear(y)}>{y}</span>
             )}
         </div>
         
diff --git a/src/renderer/components/title-bar/title-bar.component.tsx b/src/renderer/components/title-bar/title-bar.component.tsx
index bb875aa7..1fc75e61 100644
--- a/src/renderer/components/title-bar/title-bar.component.tsx
+++ b/src/renderer/components/title-bar/title-bar.component.tsx
@@ -28,20 +28,20 @@ export default function TitleBar() {
   }
 
   return (
-    <header id="titlebar" className="min-h-[22px] dark:bg-main-color-1 w-screen h-10 flex content-center items-center justify-start z-10">
+    <header id="titlebar" className="min-h-[22px] bg-light-main-color-1 dark:bg-main-color-1 w-screen h-10 flex content-center items-center justify-start z-10">
       <div id="drag-region" className='grow basis-0'>
         <div id="window-title" className='pl-1'>
-          <span className='text-gray-100 font-bold text-xs'>BSManager</span>
+          <span className='text-gray-800 dark:text-gray-100 font-bold text-xs italic'>BSManager</span>
         </div>
       </div>
       <div id="window-controls" className=''>
-          <div onClick={minimizeWindow} className="button button text-gray-200 hover:bg-[#4F545C]" id="min-button" >
+          <div onClick={minimizeWindow} className="button button text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-[#4F545C] cursor-pointer" id="min-button" >
             <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><rect fill="currentColor" width="10" height="1" x="1" y="6"> </rect></svg>
           </div>
-          <div onClick={toogleMaximize} className="button text-gray-200 hover:bg-[#4F545C]" id="max-button">
+          <div onClick={toogleMaximize} className="button text-gray-800 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-[#4F545C] cursor-pointer" id="max-button">
           <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="currentColor"> </rect></svg>
           </div>
-          <div onClick={closeWindow} className="button text-gray-200 cursor-pointer" id="close-button" draggable="false">
+          <div onClick={closeWindow} className="button text-gray-800 dark:text-gray-200 cursor-pointer" id="close-button" draggable="false">
             <svg aria-hidden="false" width="12" height="12" viewBox="0 0 12 12"><polygon fill="currentColor" fillRule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"> </polygon></svg>
           </div>
         </div>
diff --git a/src/renderer/config/default-configuration.config.ts b/src/renderer/config/default-configuration.config.ts
index 390a2d55..8b46b84b 100644
--- a/src/renderer/config/default-configuration.config.ts
+++ b/src/renderer/config/default-configuration.config.ts
@@ -1,6 +1,9 @@
 export const defaultConfiguration: {[key in DefaultConfigKey]: any} = {
     "first-color": "#3b82ff",
-    "second-color": "#ff4444"
+    "second-color": "#ff4444",
+    "theme": "os"
 }
 
-export type DefaultConfigKey = "first-color" | "second-color";
\ No newline at end of file
+export type DefaultConfigKey = "first-color" | "second-color" | "theme";
+
+export type ThemeConfig = "dark" | "light" | "os"
\ No newline at end of file
diff --git a/src/renderer/pages/settings-page.component.tsx b/src/renderer/pages/settings-page.component.tsx
index e28bf46e..c166716f 100644
--- a/src/renderer/pages/settings-page.component.tsx
+++ b/src/renderer/pages/settings-page.component.tsx
@@ -3,37 +3,39 @@ import SettingColorChooser from "renderer/components/settings/setting-color-choo
 import { SettingContainer } from "renderer/components/settings/setting-container.component";
 import { RadioItem, SettingRadioArray } from "renderer/components/settings/setting-radio-array.component";
 import { BsmButton } from "renderer/components/shared/bsm-button.component";
-import { DefaultConfigKey } from "renderer/config/default-configuration.config";
+import { DefaultConfigKey, ThemeConfig } from "renderer/config/default-configuration.config";
 import { useObservable } from "renderer/hooks/use-observable.hook";
 import { BsDownloaderService } from "renderer/services/bs-downloader.service";
 import { ConfigurationService } from "renderer/services/configuration.service"
 import { IpcService } from "renderer/services/ipc.service";
 import { ModalExitCode, ModalService, ModalType } from "renderer/services/modale.service";
 import { ProgressBarService } from "renderer/services/progress-bar.service";
+import { ThemeService } from "renderer/services/theme.service";
 
 export function SettingsPage() {
 
   const configService = ConfigurationService.getInstance();
+  const themeService = ThemeService.getInstance();
   const ipcService = IpcService.getInstance();
   const modalService = ModalService.getInsance();
   const downloaderService = BsDownloaderService.getInstance();
   const progressBarService = ProgressBarService.getInstance();
 
+  const themeItem: RadioItem[] = [
+    {id: 0, text: "Dark", value: "dark" as ThemeConfig},
+    {id: 1, text: "Light", value: "light" as ThemeConfig},
+    {id: 3, text: "Operating System", value: "os" as ThemeConfig}
+  ];
+
   const firstColor = useObservable(configService.watch<string>("first-color"));
   const secondColor = useObservable(configService.watch<string>("second-color"));
-  const[themeIdSelected, setThemeIdSelected]= useState(0);
+  const[themeIdSelected, setThemeIdSelected]= useState(themeItem.find(e => e.value === themeService.getTheme()).id);
   const [installationFolder, setInstallationFolder] = useState(null);
 
   useEffect(() => {
     loadInstallationFolder();
   }, []);
 
-  const themeItem: RadioItem[] = [
-    {id: 0, text: "Dark"},
-    {id: 1, text: "Light"},
-    {id: 3, text: "Operating System"}
-  ]
-
   const resetColors = () => {
     configService.delete("first-color" as DefaultConfigKey);
     configService.delete("second-color" as DefaultConfigKey);
@@ -46,14 +48,23 @@ export function SettingsPage() {
   const setFirstColorSetting = (hex: string) => configService.set("first-color", hex);
   const setSecondColorSetting = (hex: string) => configService.set("second-color", hex);
 
+  const handleChangeTheme = (id: number) => {
+    setThemeIdSelected(id);
+    themeService.setTheme(themeItem.find(e => e.id === id).value);
+  }
+
   const setDefaultInstallationFolder = () => {
     modalService.openModal(ModalType.INSTALLATION_FOLDER).then(async res => {
       if(res.exitCode !== ModalExitCode.COMPLETED){ return; }
-      
       const fileChooserRes = await ipcService.send<{canceled: boolean, filePaths: string[]}>("choose-folder");
 
       if(fileChooserRes.success && !fileChooserRes.data.canceled && fileChooserRes.data.filePaths?.length){
+        progressBarService.showFake(.008);
         downloaderService.setInstallationFolder(fileChooserRes.data.filePaths[0]).then(res => {
+          setTimeout(() => {
+            progressBarService.complete();
+            setTimeout(() => progressBarService.hide(true), 1000);
+          }, 2000);
           if(res.success){ setInstallationFolder(res.data); }
         });
       }
@@ -62,31 +73,31 @@ export function SettingsPage() {
   }
 
   return (
-    <div className="w-full flex justify-center px-40 pt-10 text-gray-200">
+    <div className="w-full flex justify-center px-40 pt-10 text-gray-800 dark:text-gray-200">
 
       <div className="w-fit max-w-full">
 
         <SettingContainer title="Steam" description="If you logout of your Steam account, you must reconect for download a new BS instance">
-          <BsmButton className="bg-red-500 w-fit px-3 py-[2px] rounded-md hover:brightness-75" withBar={false} text="Logout of Steam"/>
+          <BsmButton className="bg-red-500 w-fit px-3 py-[2px] text-white rounded-md hover:brightness-90" withBar={false} text="Logout of Steam"/>
         </SettingContainer>
 
         <SettingContainer title="Appearance" description="Choose the two primary colors of BSManager">
-          <div className="relative w-full h-8 bg-main-color-1 flex justify-center rounded-md py-1">
+          <div className="relative w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 flex justify-center rounded-md py-1">
             <SettingColorChooser color={firstColor} onChange={setFirstColorSetting}/>
             <SettingColorChooser color={secondColor} onChange={setSecondColorSetting}/>
             <div className="absolute right-2 top-0 h-full flex items-center">
-              <BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md hover:bg-main-color-3" text="Reset" withBar={false}/>
+              <BsmButton onClick={resetColors} className="px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="Reset" withBar={false}/>
             </div>
           </div>
-          <SettingContainer minorTitle="Theme (WIP)" className="mt-3">
-            <SettingRadioArray items={themeItem} selectedItem={themeIdSelected} onItemSelected={(id) => setThemeIdSelected(id)}/>
+          <SettingContainer minorTitle="Theme" className="mt-3">
+            <SettingRadioArray items={themeItem} selectedItem={themeIdSelected} onItemSelected={handleChangeTheme}/>
           </SettingContainer>
         </SettingContainer>
 
         <SettingContainer title="Installation Folder" description="Change the default installation directory for Beat Saber instances, and other upcoming features.">
-        <div className="relative flex items-center justify-between w-full h-8 bg-main-color-1 rounded-md pl-2 py-1">
+        <div className="relative flex items-center justify-between w-full h-8 bg-light-main-color-1 dark:bg-main-color-1 rounded-md pl-2 py-1">
           <span className="block text-ellipsis overflow-hidden min-w-0" title={installationFolder}>{installationFolder}</span>
-          <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md hover:bg-main-color-3" text="Choose Folder" withBar={false}/>
+          <BsmButton onClick={setDefaultInstallationFolder} className="shrink-0 whitespace-nowrap mr-2 px-2 font-bold italic text-sm rounded-md bg-light-main-color-2 dark:bg-main-color-2 hover:bg-light-main-color-3 dark:hover:bg-main-color-3" text="Choose Folder" withBar={false}/>
         </div>
         </SettingContainer>
 
diff --git a/src/renderer/pages/version-viewer.component.tsx b/src/renderer/pages/version-viewer.component.tsx
index 0102dd6b..7e3c0a2c 100644
--- a/src/renderer/pages/version-viewer.component.tsx
+++ b/src/renderer/pages/version-viewer.component.tsx
@@ -82,8 +82,8 @@ export function VersionViewer() {
 
   return (
     <>
-      <BsmImage className="absolute w-full h-full top-0 left-0 blur-lg object-cover brightness-100" image={state.ReleaseImg || DefautVersionImage} errorImage={defaultImageVersion}/>
-      <div className="relative flex items-center flex-col w-full h-full text-gray-200">
+      <BsmImage className="absolute w-full h-full top-0 left-0 object-cover" image={state.ReleaseImg || DefautVersionImage} errorImage={defaultImageVersion}/>
+      <div className="relative flex items-center flex-col w-full h-full text-gray-200 backdrop-blur-lg">
         <BsmImage className='relative object-cover h-28' image={BSLogo}/>
         <h1 className='relative text-4xl font-bold italic -top-3'>{state.BSVersion}</h1>
         <TabNavBar className='mt-3' tabsText={["Launch", "Maps", "Mods"]} onTabChange={(i : number) => setCurrentTabIndex(i)}/>
@@ -95,19 +95,19 @@ export function VersionViewer() {
               <ToogleLunchMod icon='terminal' onClick={() => setMode(LaunchMods.DEBUG_MOD, !debugMode)} active={debugMode} text="DEBUG MOD"/>
             </div>
             <div className='grow flex justify-center items-center'>
-              <BsmButton onClick={launchBs} className='relative flex items-center text-5xl font-bold tracking-wide pt-1 pb-3 pl-7 pr-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text='Launch'/>
+              <BsmButton onClick={launchBs} className='relative text-5xl text-gray-800 dark:text-gray-200 bg-light-main-color-2 dark:bg-main-color-2 font-bold tracking-wide pt-1 pb-3 px-7 rounded-lg shadow-md italic shadow-black active:scale-90 transition-transform' text='Launch'/>
             </div>
           </div>
           <div className='shrink-0 w-full h-full flex justify-center'>
-            <div className='p-4 bg-main-color-2 h-fit rounded-md'>
+            <div className='p-4 bg-light-main-color-2 dark:bg-main-color-2 h-fit rounded-md'>
               <img src={wipGif} alt="" />
-              <span className='block w-full text-center font-bold mt-2'>Work In Progress</span>
+              <span className='block w-full text-center font-bold mt-2 text-gray-800 dark:text-white'>Work In Progress</span>
             </div>
           </div>
           <div className='shrink-0 w-full h-full flex justify-center'>
-            <div className='p-4 bg-main-color-2 h-fit rounded-md'>
+            <div className='p-4 bg-light-main-color-2 dark:bg-main-color-2 h-fit rounded-md'>
               <img src={wipGif} alt="" />
-              <span className='block w-full text-center font-bold mt-2'>Work In Progress</span>
+              <span className='block w-full text-center font-bold mt-2 text-gray-800 dark:text-white'>Work In Progress</span>
             </div>
           </div>
         </div>
@@ -126,8 +126,8 @@ function ToogleLunchMod(props: {onClick: Function, active: boolean, text: string
   return (
     <div className={`relative rounded-full cursor-pointer group active:scale-95 transition-transform ${!props.active && "shadow-md shadow-black"}`} onClick={() => props.onClick()}>
       <div className={`absolute glow-on-hover rounded-full ${props.active && "opacity-100 blur-[2px]"}`}></div>
-      <div className='w-full h-full pl-6 pr-6 flex justify-center items-center bg-main-color-2 p-3 rounded-full text-white group-hover:bg-main-color-1'>
-        <BsmIcon icon={props.icon} className='mr-1 h-7'/>
+      <div className='w-full h-full pl-6 pr-6 flex justify-center items-center bg-light-main-color-2 dark:bg-main-color-2 p-3 rounded-full text-gray-800 dark:text-white group-hover:bg-light-main-color-1 group-hover:dark:bg-main-color-1'>
+        <BsmIcon icon={props.icon} className='mr-1 h-7 text-gray-800 dark:text-white'/>
         <span className='w-fit min-w-fit h-full text-lg font-bold uppercase tracking-wide italic'>{props.text}</span>
       </div>
     </div>
diff --git a/src/renderer/services/modale.service.ts b/src/renderer/services/modale.service.ts
index d3ab2bc9..1812af55 100644
--- a/src/renderer/services/modale.service.ts
+++ b/src/renderer/services/modale.service.ts
@@ -7,6 +7,7 @@ export class ModalService{
     private _modalType$: BehaviorSubject<ModalType> = new BehaviorSubject<ModalType>(null);
     private modalData: any = null;
     private resolver: any;
+    
     private constructor(){}
 
     public static getInsance(){
diff --git a/src/renderer/services/theme.service.ts b/src/renderer/services/theme.service.ts
new file mode 100644
index 00000000..260344f6
--- /dev/null
+++ b/src/renderer/services/theme.service.ts
@@ -0,0 +1,35 @@
+import { DefaultConfigKey, ThemeConfig } from "renderer/config/default-configuration.config";
+import { BehaviorSubject } from "rxjs";
+import { ConfigurationService } from "./configuration.service";
+
+export class ThemeService{
+
+    private static instance: ThemeService;
+
+    private readonly configService: ConfigurationService;
+
+    public readonly theme$: BehaviorSubject<ThemeConfig>;
+
+    public static getInstance(): ThemeService{
+        if(!ThemeService.instance){ ThemeService.instance = new ThemeService(); }
+        return ThemeService.instance;
+    }
+
+    private constructor(){
+        this.configService = ConfigurationService.getInstance();
+        this.theme$ = this.configService.watch<ThemeConfig>("theme" as DefaultConfigKey);
+    }
+
+    public setTheme(theme: ThemeConfig): void{
+        this.configService.set("theme" as DefaultConfigKey, theme);
+    }
+
+    public getTheme(): ThemeConfig{
+        return this.configService.get("theme" as DefaultConfigKey);
+    }
+
+    public get isLight(){ return this.configService.get("theme" as DefaultConfigKey) === "light" as ThemeConfig }
+    public get isDark(){ return this.configService.get("theme" as DefaultConfigKey) === "dark" as ThemeConfig }
+    public get isOS(){ return this.configService.get("theme" as DefaultConfigKey) === "os" as ThemeConfig }
+
+}
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index e48c77ca..46082302 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -3,6 +3,7 @@
 const colors = require('tailwindcss/colors');
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+  darkMode: 'class',
   content: ['./src/renderer/**/*.tsx'],
   mode: 'jit',
   plugins: [require('tailwind-scrollbar-hide'), require('tailwind-scrollbar')],
@@ -17,6 +18,11 @@ module.exports = {
         2: '#2C2F33',
         3: '#40444b',
       },
+      'light-main-color':{
+        1: "#E3E5E8",
+        2: "#F2F3F5",
+        3: "#FFFFFF",
+      }
     },
     extend:{
       keyframes:{