diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 3a8717d0..e62d0d65 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -546,7 +546,7 @@ "gray": "Gray", "red": "Red", "teal": "Teal", - "black": "Black" + "blck": "BLCK" }, "title": "Appearance" }, diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx index 7f99a4aa..5a509482 100644 --- a/src/pages/parts/settings/ThemePart.tsx +++ b/src/pages/parts/settings/ThemePart.tsx @@ -31,9 +31,9 @@ const availableThemes = [ key: "settings.appearance.themes.gray", }, { - id: "black", - selector: "theme-black", - key: "settings.appearance.themes.black", + id: "blck", + selector: "theme-blck", + key: "settings.appearance.themes.blck", }, ]; diff --git a/themes/all.ts b/themes/all.ts index 025cd1a3..715597af 100644 --- a/themes/all.ts +++ b/themes/all.ts @@ -2,12 +2,12 @@ import teal from "./list/teal"; import blue from "./list/blue"; import red from "./list/red"; import gray from "./list/gray"; -import black from "./list/black"; +import blck from "./list/blck"; export const allThemes = [ teal, blue, gray, red, - black + blck ] diff --git a/themes/list/black.ts b/themes/list/blck.ts similarity index 93% rename from themes/list/black.ts rename to themes/list/blck.ts index e56f9fbd..5c3a09e2 100644 --- a/themes/list/black.ts +++ b/themes/list/blck.ts @@ -4,10 +4,13 @@ const tokens = { white: "#FFFFFF", black: { c50: "#000000", + c75: "#030303", + c80: "#080808", c100: "#0d0d0d", c125: "#141414", c150: "#1a1a1a", - c200: "#262626" + c200: "#262626", + c250: "#333333" }, semantic: { silver: { @@ -68,7 +71,7 @@ const tokens = { } export default createTheme({ - name: "black", + name: "blck", extend: { colors: { themePreview: { @@ -104,11 +107,11 @@ export default createTheme({ }, background: { - main: tokens.black.c50, - secondary: tokens.black.c50, - secondaryHover: tokens.black.c50, - accentA: tokens.black.c50, - accentB: tokens.black.c50 + main: tokens.black.c75, + secondary: tokens.black.c75, + secondaryHover: tokens.black.c75, + accentA: tokens.black.c75, + accentB: tokens.black.c75 }, modal: { @@ -135,7 +138,7 @@ export default createTheme({ mediaCard: { hoverBackground: tokens.shade.c900, - hoverAccent: tokens.shade.c100, + hoverAccent: tokens.black.c250, hoverShadow: tokens.black.c50, shadow: tokens.shade.c800, barColor: tokens.ash.c200, @@ -151,7 +154,7 @@ export default createTheme({ dropdown: { background: tokens.black.c100, - altBackground: tokens.black.c50, + altBackground: tokens.black.c80, hoverBackground: tokens.black.c150, text: tokens.shade.c50, secondary: tokens.shade.c100, @@ -198,7 +201,7 @@ export default createTheme({ }, errors: { - card: tokens.black.c50, + card: tokens.black.c75, border: tokens.ash.c500, type: {