Add themes

src/app/Globals.css

@@ -1,7 +1,67 @@
 @import "tailwindcss";
 
 body {
-  @apply bg-[#0f0f0f] text-white select-none;
+  @apply bg-(--col0) text-white select-none;
+}
+
+.dark-theme {
+  --col0: rgb(8, 8, 8);
+  --col1: rgb(16, 16, 16);
+  --col2: rgb(32, 32, 32);
+  --col3: rgb(48, 48, 48);
+  --col4: rgb(64, 64, 64);
+  --col5: rgb(80, 80, 80);
+  --col6: rgb(96, 96, 96);
+  --col7: rgb(112, 112, 112);
+  --col8: rgb(128, 128, 128);
+}
+
+.red-theme {
+  --col0: rgb(32, 8, 8);
+  --col1: rgb(40, 16, 16);
+  --col2: rgb(56, 32, 32);
+  --col3: rgb(72, 48, 48);
+  --col4: rgb(88, 64, 64);
+  --col5: rgb(104, 80, 80);
+  --col6: rgb(120, 96, 96);
+  --col7: rgb(136, 112, 112);
+  --col8: rgb(152, 128, 128);
+}
+
+.green-theme {
+  --col0: rgb(8, 32, 8);
+  --col1: rgb(16, 40, 16);
+  --col2: rgb(32, 56, 32);
+  --col3: rgb(48, 72, 48);
+  --col4: rgb(64, 88, 64);
+  --col5: rgb(80, 104, 80);
+  --col6: rgb(96, 120, 96);
+  --col7: rgb(112, 136, 112);
+  --col8: rgb(128, 152, 128);
+}
+
+.blue-theme {
+  --col0: rgb(8, 8, 32);
+  --col1: rgb(16, 16, 40);
+  --col2: rgb(32, 32, 56);
+  --col3: rgb(48, 48, 72);
+  --col4: rgb(64, 64, 88);
+  --col5: rgb(80, 80, 104);
+  --col6: rgb(96, 96, 120);
+  --col7: rgb(112, 112, 136);
+  --col8: rgb(128, 128, 152);
+}
+
+.purple-theme {
+  --col0: rgb(20, 8, 32);
+  --col1: rgb(28, 16, 40);
+  --col2: rgb(44, 32, 56);
+  --col3: rgb(60, 48, 72);
+  --col4: rgb(76, 64, 88);
+  --col5: rgb(92, 80, 104);
+  --col6: rgb(108, 96, 120);
+  --col7: rgb(124, 112, 136);
+  --col8: rgb(140, 128, 152);
 }
 
 .button {
@@ -17,11 +77,11 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-[#1f1f1f] rounded-lg;
+  @apply bg-(--col2) rounded-lg;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-[#555] w-1 rounded-lg active:bg-[#888];
+  @apply bg-(--col4) w-1 rounded-lg active:bg-(--col5);
 }
 
 @keyframes fadeIn {
@@ -51,15 +111,15 @@ body {
 }
 
 .popup-box {
-  @apply relative w-[60vw] h-[80vh] rounded-lg bg-[#161616] border border-[#323232] flex flex-col p-6;
+  @apply relative w-[60vw] h-[80vh] rounded-lg bg-(--col1) border border-(--col3) flex flex-col p-6;
 }
 
 .popup-content {
-  @apply flex-1 overflow-auto bg-[#242424] border border-[#484848] rounded-lg mt-4;
+  @apply flex-1 overflow-auto bg-(--col2) border border-(--col4) rounded-lg mt-4;
 }
 
 .popup-entry {
-  @apply relative h-fit bg-[#323232] m-2 p-2 rounded-lg border border-[#646464];
+  @apply relative h-fit bg-(--col3) m-2 p-2 rounded-lg border border-(--col5);
 }
 
 .popup-entry button {
@@ -67,7 +127,7 @@ body {
 }
 
 .close-button {
-  @apply flex justify-center items-center absolute bg-[#323232] hover:bg-[#484848] text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl left-2 top-2 transition-colors border border-[#484848] hover:border-[#646464];
+  @apply flex justify-center items-center absolute bg-(--col3) hover:bg-(--col4) text-2xl cursor-pointer text-gray-300 hover:text-white h-12 w-12 p-3 rounded-xl left-2 top-2 transition-colors border border-(--col4) hover:border-(--col5);
 }
 
 *:focus {
@@ -75,13 +135,13 @@ body {
 }
 
 .input-field {
-  @apply border-2 border-[#484848] rounded-md bg-[#242424] p-2 px-4 focus:border-blue-600 transition-colors;
+  @apply border-2 border-(--col4) rounded-md bg-(--col2) p-2 px-4 focus:border-blue-600 transition-colors;
 }
 
 .entry-info-item {
-  @apply flex flex-row items-center gap-1 bg-[rgb(16,16,16)] text-gray-300 py-1 px-2 rounded-lg w-fit text-[16px];
+  @apply flex flex-row items-center gap-1 bg-(--col1) text-gray-300 py-1 px-2 rounded-lg w-fit text-[16px];
 }
 
 .downloads-entry:hover .entry-info-item {
-  @apply bg-[rgb(32,32,32)];
+  @apply bg-(--col2);
 }

src/app/Installs.css

@@ -5,11 +5,11 @@
 }
 
 .downloads-scroll {
-  @apply h-[515px] bg-[#161616] border border-[#242424] rounded-lg overflow-y-auto w-full;
+  @apply h-[515px] bg-(--col1) border border-(--col3) rounded-lg overflow-y-auto w-full;
 }
 
 .downloads-entry {
-  @apply flex justify-between items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-[#242424] hover:bg-[#323232] border border-[#484848] hover:border-[#565656];
+  @apply flex justify-between items-center m-2 p-4 rounded-lg text-gray-200 text-lg transition-colors cursor-default bg-(--col2) hover:bg-(--col3) border border-(--col4) hover:border-(--col5);
 }
 
 .downloads-entry p.score {

src/app/componets/Setting.css

@@ -5,7 +5,7 @@
 }
 
 .setting-checkbox {
-  @apply appearance-none w-full h-full border-2 border-[#484848] rounded-md bg-[#242424] transition-colors duration-200 cursor-pointer;
+  @apply appearance-none w-full h-full border-2 border-(--col4) rounded-md bg-(--col2) transition-colors duration-200 cursor-pointer;
 }
 
 .setting-checkbox:checked {

src/app/componets/Sidebar.css

@@ -1,16 +1,16 @@
 @import "tailwindcss";
 
 .sidebar {
-  @apply fixed top-0 left-0 w-60 h-screen bg-[#161616] flex flex-col border-e border-[#242424] z-1;
+  @apply fixed top-0 left-0 w-60 h-screen bg-(--col1) flex flex-col border-e border-(--col2) z-1;
 }
 
 .sidebar-downloads {
-  @apply text-[#bdbdbd] fixed bottom-3 left-2 bg-[#242424] rounded-lg border border-[#323232] w-55 p-4 cursor-pointer transition-colors duration-[0.25s];
+  @apply text-[#bdbdbd] fixed bottom-3 left-2 bg-(--col2) rounded-lg border border-(--col3) w-55 p-4 cursor-pointer transition-colors duration-[0.25s];
 }
 
 .sidebar-downloads:hover {
   @apply text-white;
-  @apply bg-[#323232] border-[#484848];
+  @apply bg-(--col3) border-(--col4);
 }
 
 .logo {
@@ -26,7 +26,7 @@
 }
 
 .link.active {
-  @apply bg-[#242424] border-[#323232];
+  @apply bg-(--col2) border-(--col3);
 }
 
 .link.active,
@@ -35,5 +35,5 @@
 }
 
 .link.active:hover {
-  @apply bg-[#323232] border-[#484848];
+  @apply bg-(--col3) border-(--col4);
 }

src/app/layout.tsx

@@ -343,7 +343,19 @@ export default function RootLayout ({
   return (
     <>
       <html lang='en' className={roboto.className}>
-        <body>
+        <body
+          className={
+            normalConfig?.settings.theme === 1
+              ? 'red-theme'
+              : normalConfig?.settings.theme === 2
+              ? 'green-theme'
+              : normalConfig?.settings.theme === 3
+              ? 'blue-theme'
+              : normalConfig?.settings.theme === 4
+              ? 'purple-theme'
+              : 'dark-theme'
+          }
+        >
           {loading ? (
             <div className='w-screen h-screen flex items-center justify-center'>
               {outdated ? (
@@ -408,7 +420,7 @@ export default function RootLayout ({
               >
                 <Sidebar />
                 <div
-                  className='relative z-2 ml-[239px] w-[761px] border-b border-[#242424] h-[33px] bg-[#161616]'
+                  className='relative z-2 ml-[239px] w-[761px] border-b border-(--col3) h-[33px] bg-(--col1)'
                   style={{
                     display: platform() === 'windows' ? 'block' : 'none'
                   }}

src/app/settings/page.tsx

@@ -9,6 +9,8 @@ export default function Settings () {
   const [allowNotifications, setAllowNotifications] = useState(false)
   const [alwaysShowGamesInSidebar, setAlwaysShowGamesInSidebar] =
     useState(false)
+  const [theme, setTheme] = useState(0)
+
   const [loaded, setLoaded] = useState(false)
   const { normalConfig, setNormalConfig } = useGlobal()
 
@@ -19,6 +21,7 @@ export default function Settings () {
         setAlwaysShowGamesInSidebar(
           normalConfig.settings.alwaysShowGamesInSidebar
         )
+        setTheme(normalConfig.settings.theme)
         setLoaded(true)
         break
       }
@@ -29,15 +32,27 @@ export default function Settings () {
     <>
       <p className='text-3xl ml-4 mt-4'>Settings</p>
       {loaded && (
-        <div className='ml-4 mt-4 bg-[#161616] border border-[#242424] rounded-lg p-4 w-fit h-fit'>
+        <div className='ml-4 mt-4 bg-(--col1) border border-(--col3) rounded-lg p-4 w-fit h-fit'>
           <Setting
             label='Allow sending notifications'
             value={allowNotifications}
             onChange={async () => {
               while (normalConfig != null) {
                 setAllowNotifications(!allowNotifications)
-                normalConfig.settings.allowNotifications = !allowNotifications
+                setNormalConfig({
-                await writeNormalConfig(normalConfig)
+                  ...normalConfig,
+                  settings: {
+                    ...normalConfig.settings,
+                    allowNotifications: !allowNotifications
+                  }
+                })
+                writeNormalConfig({
+                  ...normalConfig,
+                  settings: {
+                    ...normalConfig.settings,
+                    allowNotifications: !allowNotifications
+                  }
+                })
                 break
               }
             }}
@@ -66,6 +81,40 @@ export default function Settings () {
               }
             }}
           />
+          <div>
+            <label className='text-lg'>Theme:</label>
+            <select
+              className='ml-2 bg-(--col2) border border-(--col4) rounded-md'
+              value={theme}
+              onChange={async e => {
+                const newTheme = parseInt(e.target.value)
+                while (normalConfig != null) {
+                  setTheme(newTheme)
+                  setNormalConfig({
+                    ...normalConfig,
+                    settings: {
+                      ...normalConfig.settings,
+                      theme: newTheme
+                    }
+                  })
+                  writeNormalConfig({
+                    ...normalConfig,
+                    settings: {
+                      ...normalConfig.settings,
+                      theme: newTheme
+                    }
+                  })
+                  break
+                }
+              }}
+            >
+              <option value={0}>Dark (default)</option>
+              <option value={1}>Red</option>
+              <option value={2}>Green</option>
+              <option value={3}>Blue</option>
+              <option value={4}>Purple</option>
+            </select>
+          </div>
         </div>
       )}
     </>

src/app/types/SettingsType.ts

@@ -1,6 +1,7 @@
 export class SettingsType {
   constructor(
     public allowNotifications: boolean = true,
-    public alwaysShowGamesInSidebar: boolean = true
+    public alwaysShowGamesInSidebar: boolean = true,
+    public theme: number = 0
   ) { }
 }