From 220fea107c91b70cd768c8749ffd3e66a383b6cc Mon Sep 17 00:00:00 2001
From: halanosiblee <HalanoSiblee@gmail.com>
Date: Thu, 5 Jun 2025 18:42:07 +0000
Subject: [PATCH] BlackTheme

---
 src/app/hooks/useTheme.ts | 11 ++++++---
 src/colors.css.ts         | 52 +++++++++++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+), 3 deletions(-)

diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts
index cdbb9dba..f2ae1d9c 100644
--- a/src/app/hooks/useTheme.ts
+++ b/src/app/hooks/useTheme.ts
@@ -1,7 +1,7 @@
 import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
-import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
+import { butterTheme, darkTheme, silverTheme, blackTheme } from '../../colors.css';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
@@ -37,9 +37,13 @@ export const ButterTheme: Theme = {
   kind: ThemeKind.Dark,
   classNames: ['butter-theme', butterTheme, onDarkFontWeight, 'prism-dark'],
 };
-
+export const BlackTheme: Theme = {
+  id: 'black-theme',
+  kind: ThemeKind.Dark,
+  classNames: ['black-theme', blackTheme, onDarkFontWeight, 'prism-dark'],
+};
 export const useThemes = (): Theme[] => {
-  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme], []);
+  const themes: Theme[] = useMemo(() => [LightTheme, SilverTheme, DarkTheme, ButterTheme, BlackTheme], []);
 
   return themes;
 };
@@ -51,6 +55,7 @@ export const useThemeNames = (): Record<string, string> =>
       [SilverTheme.id]: 'Silver',
       [DarkTheme.id]: 'Dark',
       [ButterTheme.id]: 'Butter',
+      [BlackTheme.id]: 'Black',
     }),
     []
   );
diff --git a/src/colors.css.ts b/src/colors.css.ts
index 268cbf78..983d17e8 100644
--- a/src/colors.css.ts
+++ b/src/colors.css.ts
@@ -236,3 +236,55 @@ export const butterTheme = createTheme(color, {
     OnContainer: '#F2EED3',
   },
 });
+export const blackTheme = createTheme(color, {
+  ...darkThemeData,
+  Background: {
+    Container: 'black',
+    ContainerHover: 'none',
+    ContainerActive: 'gray',
+    ContainerLine: 'white',
+    OnContainer: 'white',
+  },
+  Surface: {
+    Container: 'noen',
+    ContainerHover: 'none',
+    ContainerActive: 'none',
+    ContainerLine: 'none',
+    OnContainer: 'none',
+  },
+
+  SurfaceVariant: {
+    Container: 'none',
+    ContainerHover: 'none',
+    ContainerActive: 'none',
+    ContainerLine: 'none',
+    OnContainer: 'none',
+  },
+
+  Primary: {
+    Main: 'white',
+    MainHover: 'gray',
+    MainActive: 'white',
+    MainLine: 'white',
+    OnMain: 'black',
+    Container: 'black',
+    ContainerHover: 'gray',
+    ContainerActive: 'white',
+    ContainerLine: 'white',
+    OnContainer: 'white',
+ },
+
+  Secondary: {
+    Main: 'none',
+    MainHover: 'none',
+    MainActive: 'none',
+    MainLine: 'none',
+    OnMain: 'none',
+    Container: '#none',
+    ContainerHover: 'none',
+    ContainerActive: 'none',
+    ContainerLine: 'none',
+    OnContainer: 'none',
+  },
+});
+