diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 17cc9c93..77c53c8b 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -545,7 +545,8 @@ "default": "Default", "gray": "Gray", "red": "Red", - "teal": "Teal" + "teal": "Teal", + "amoled": "AMOLED" }, "title": "Appearance" }, diff --git a/src/pages/parts/settings/ThemePart.tsx b/src/pages/parts/settings/ThemePart.tsx index b5600181..dc411207 100644 --- a/src/pages/parts/settings/ThemePart.tsx +++ b/src/pages/parts/settings/ThemePart.tsx @@ -30,6 +30,11 @@ const availableThemes = [ selector: "theme-gray", key: "settings.appearance.themes.gray", }, + { + id: "amoled", + selector: "theme-amoled", + key: "settings.appearance.themes.amoled", + }, ]; function ThemePreview(props: { diff --git a/themes/all.ts b/themes/all.ts index f59aac81..d6166319 100644 --- a/themes/all.ts +++ b/themes/all.ts @@ -2,10 +2,12 @@ import teal from "./list/teal"; import blue from "./list/blue"; import red from "./list/red"; import gray from "./list/gray"; +import amoled from "./list/amoled"; export const allThemes = [ teal, blue, gray, - red + red, + amoled ] diff --git a/themes/list/amoled.ts b/themes/list/amoled.ts new file mode 100644 index 00000000..2ec343d5 --- /dev/null +++ b/themes/list/amoled.ts @@ -0,0 +1,261 @@ +import { createTheme } from "../types"; + +const tokens = { + purple: { + c50: "#aaafff", + c100: "#8288fe", + c200: "#5a62eb", + c300: "#454cd4", + c400: "#333abe", + c500: "000000", //changed + c600: "#1f2363", + c700: "#191b4a", + c800: "#111334", + c900: "#0b0d22", + c1000: "#292d86" + }, + shade: { + c25: "#9c9c9c", + c50: "#7c7c7c", + c100: "#666666", + c200: "#333333", + c300: "#000000", + c400: "#0d0d0d", + c500: "#000000", + c600: "#0d0d0d", + c700: "#0d0d0d", + c800: "#151515", + c900: "#000000" + }, + ash: { + c50: "#8d8d8d", + c100: "#6b6b6b", + c200: "#545454", + c300: "#3c3c3c", + c400: "#313131", + c500: "#2c2c2c", + c600: "#252525", + c700: "#1e1e1e", + c800: "#181818", + c900: "#111111" + }, + blue: { + c50: "#ccccd6", + c100: "#a2a2a2", + c200: "#1e1e1e", + c300: "#646464", + c400: "#141414", + c500: "#000000", + c600: "#2e2e2e", + c700: "#272727", + c800: "#181818", + c900: "#0f0f0f" + } +}; + +export default createTheme({ + name: "amoled", + extend: { + colors: { + themePreview: { + primary: tokens.blue.c500, + secondary: tokens.shade.c700 + }, + + pill: { + background: tokens.shade.c700, + backgroundHover: tokens.shade.c800, + highlight: tokens.blue.c200, + + activeBackground: tokens.shade.c700, + }, + + global: { + accentA: tokens.blue.c200, + accentB: tokens.blue.c300 + }, + + lightBar: { + light: tokens.blue.c400 + }, + + buttons: { + toggle: tokens.purple.c300, + toggleDisabled: tokens.ash.c500, + + secondary: tokens.ash.c700, + secondaryHover: tokens.ash.c700, + purple: tokens.purple.c600, + purpleHover: tokens.purple.c1000, + cancel: tokens.shade.c700, + cancelHover: tokens.shade.c800 + }, + + background: { + main: tokens.shade.c900, + secondary: tokens.shade.c700, + secondaryHover: tokens.shade.c400, + accentA: tokens.purple.c500, + accentB: tokens.blue.c500 + }, + + modal: { + background: tokens.shade.c800, + }, + + type: { + logo: tokens.purple.c100, + text: tokens.shade.c50, + dimmed: tokens.shade.c50, + divider: tokens.ash.c500, + secondary: tokens.ash.c100, + link: tokens.purple.c100, + linkHover: tokens.purple.c50 + }, + + search: { + background: tokens.shade.c500, + hoverBackground: tokens.shade.c600, + focused: tokens.shade.c400, + placeholder: tokens.shade.c100, + icon: tokens.shade.c100 + }, + + mediaCard: { + hoverBackground: tokens.shade.c600, + hoverAccent: tokens.shade.c100, + hoverShadow: tokens.shade.c900, + shadow: tokens.shade.c700, + barColor: tokens.ash.c800, + barFillColor: tokens.ash.c600, + badge: tokens.shade.c700, + badgeText: tokens.ash.c100 + }, + + largeCard: { + background: tokens.shade.c600, + icon: tokens.purple.c400 + }, + + dropdown: { + background: tokens.shade.c600, + altBackground: tokens.shade.c600, + hoverBackground: tokens.shade.c600, + text: tokens.shade.c50, + secondary: tokens.shade.c100, + border: tokens.shade.c400, + contentBackground: tokens.shade.c500 + }, + + authentication: { + border: tokens.shade.c300, + inputBg: tokens.shade.c600, + inputBgHover: tokens.shade.c500, + wordBackground: tokens.shade.c500, + copyText: tokens.shade.c100, + copyTextHover: tokens.ash.c50 + }, + + settings: { + sidebar: { + activeLink: tokens.shade.c600, + badge: tokens.shade.c900, + + type: { + secondary: tokens.shade.c200, + inactive: tokens.shade.c50, + icon: tokens.shade.c50, + iconActivated: tokens.shade.c200, + activated: tokens.blue.c300 + } + }, + + card: { + border: tokens.shade.c400, + background: tokens.shade.c400, + altBackground: tokens.shade.c400 + }, + + saveBar: { + background: tokens.shade.c600 + } + }, + + utils: { + divider: tokens.ash.c300 + }, + + errors: { + card: tokens.shade.c700, + border: tokens.ash.c500, + + type: { + secondary: tokens.ash.c100 + } + }, + + about: { + circle: tokens.ash.c500, + circleText: tokens.ash.c50 + }, + + editBadge: { + bg: tokens.ash.c500, + bgHover: tokens.ash.c400, + text: tokens.ash.c50 + }, + + progress: { + background: tokens.ash.c800, + preloaded: tokens.ash.c800, + filled: tokens.ash.c600 + }, + + video: { + buttonBackground: tokens.ash.c600, + + autoPlay: { + background: tokens.ash.c800, + hover: tokens.ash.c600 + }, + + scraping: { + card: tokens.shade.c700, + loading: tokens.purple.c200, + noresult: tokens.ash.c100 + }, + + audio: { + set: tokens.ash.c600 + }, + + context: { + background: tokens.shade.c600, + light: tokens.shade.c50, + border: tokens.ash.c600, + hoverColor: tokens.ash.c600, + buttonFocus: tokens.ash.c500, + flagBg: tokens.ash.c500, + inputBg: tokens.ash.c600, + buttonOverInputHover: tokens.ash.c500, + inputPlaceholder: tokens.ash.c200, + cardBorder: tokens.ash.c700, + slider: tokens.ash.c800, + sliderFilled: tokens.ash.c600, + + buttons: { + list: tokens.ash.c700, + active: tokens.ash.c900 + }, + + closeHover: tokens.ash.c800, + + type: { + secondary: tokens.ash.c200, + accent: tokens.purple.c200 + } + } + } + } + } +});