Add themes

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>
   );

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;

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',
+    ],
+  },
+};

src/renderer/themes/index.ts

@@ -0,0 +1 @@
+export * from './dark';