From f7b580f02fc2cb53c75d69c91d2b2c35edeb834b Mon Sep 17 00:00:00 2001
From: jeffvli <jeffvictorli@gmail.com>
Date: Thu, 21 Apr 2022 19:30:27 -0700
Subject: [PATCH] Add themes

---
 src/renderer/app.tsx         | 43 ++++++++++--------------------------
 src/renderer/themes/base.ts  | 35 +++++++++++++++++++++++++++++
 src/renderer/themes/dark.ts  | 32 +++++++++++++++++++++++++++
 src/renderer/themes/index.ts |  1 +
 4 files changed, 80 insertions(+), 31 deletions(-)
 create mode 100644 src/renderer/themes/base.ts
 create mode 100644 src/renderer/themes/dark.ts
 create mode 100644 src/renderer/themes/index.ts

diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx
index 83c1d07..520e631 100644
--- a/src/renderer/app.tsx
+++ b/src/renderer/app.tsx
@@ -1,38 +1,19 @@
-import { Global, MantineProvider } from '@mantine/core';
-import './App.css';
+import { useEffect, useState } from 'react';
+import { MantineProvider } from '@mantine/core';
 import Router from './Router';
+import { dark } from './themes';
+import base from './themes/base';
+import './App.css';
 
 export default function App() {
-  return (
-    <MantineProvider
-      theme={{
-        colorScheme: 'dark',
-        focusRing: 'auto',
-        spacing: {
-          xs: 2,
-          sm: 5,
-        },
-        other: {
-          background: '#141518',
-          sidebar: '#101010',
-          playerbar: '#101010',
-        },
-      }}
-    >
-      <Global
-        styles={(theme) => {
-          return {
-            '*, *::before, *::after': {
-              boxSizing: 'border-box',
-            },
+  const [theme, setTheme] = useState<any>(base);
 
-            body: {
-              backgroundColor: theme.other.background,
-              color: theme.colors.dark[0],
-            },
-          };
-        }}
-      />
+  useEffect(() => {
+    setTheme(dark);
+  }, []);
+
+  return (
+    <MantineProvider theme={theme}>
       <Router />
     </MantineProvider>
   );
diff --git a/src/renderer/themes/base.ts b/src/renderer/themes/base.ts
new file mode 100644
index 0000000..3318808
--- /dev/null
+++ b/src/renderer/themes/base.ts
@@ -0,0 +1,35 @@
+const base = {
+  focusRing: 'auto',
+  spacing: {
+    xs: 2,
+    sm: 5,
+  },
+  colors: {
+    layout: [
+      '#181819',
+      '#101010',
+      '#101010',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+    ],
+    primary: [
+      '#ddf6ff',
+      '#b0deff',
+      '#82c6fb',
+      '#53aff7',
+      '#2598f3',
+      '#0c7fda',
+      '#0062aa',
+      '#00467b',
+      '#002a4d',
+      '#000f1f',
+    ],
+  },
+};
+
+export default base;
diff --git a/src/renderer/themes/dark.ts b/src/renderer/themes/dark.ts
new file mode 100644
index 0000000..9bd1bbf
--- /dev/null
+++ b/src/renderer/themes/dark.ts
@@ -0,0 +1,32 @@
+import base from './base';
+
+export const dark = {
+  ...base,
+  colorScheme: 'dark',
+  colors: {
+    layout: [
+      '#181819',
+      '#101010',
+      '#101010',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+      '#000000',
+    ],
+    primary: [
+      '#ddf6ff',
+      '#b0deff',
+      '#82c6fb',
+      '#53aff7',
+      '#2598f3',
+      '#0c7fda',
+      '#0062aa',
+      '#00467b',
+      '#002a4d',
+      '#000f1f',
+    ],
+  },
+};
diff --git a/src/renderer/themes/index.ts b/src/renderer/themes/index.ts
new file mode 100644
index 0000000..44938a1
--- /dev/null
+++ b/src/renderer/themes/index.ts
@@ -0,0 +1 @@
+export * from './dark';