mirrors/cinny
1
0
Fork 0
mirror of https://github.com/cinnyapp/cinny.git synced 2025-11-04 22:40:29 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

BlackTheme

Browse source
This commit is contained in:
halanosiblee 2025-06-05 18:42:07 +00:00
parent e6f4eeca8e
commit 220fea107c
2 changed files with 60 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/app/hooks/useTheme.ts
View file

@ -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',
}),
[]
);

52
src/colors.css.ts
View file

@ -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',
},
});