mirrors/smov
mirrors/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-20 14:37:43 +01:00
Code Issues Wiki Activity

rename AMOLED to black & implement darker theme per request

Browse source
This commit is contained in:
kirbo 2024-06-09 17:02:20 -07:00
parent 398bd9ace8
commit 8b6e7d3643
No known key found for this signature in database
4 changed files with 48 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/assets/locales/en.json
View file

@ -546,7 +546,7 @@
"gray": "Gray", "gray": "Gray",
"red": "Red", "red": "Red",
"teal": "Teal", "teal": "Teal",
"amoled": "AMOLED" "black": "Black"
}, },
"title": "Appearance" "title": "Appearance"
}, },

6
src/pages/parts/settings/ThemePart.tsx
View file

@ -31,9 +31,9 @@ const availableThemes = [
key: "settings.appearance.themes.gray", key: "settings.appearance.themes.gray",
}, },
{ {
id: "amoled", id: "black",
selector: "theme-amoled", selector: "theme-black",
key: "settings.appearance.themes.amoled", key: "settings.appearance.themes.black",
}, },
]; ];

4
themes/all.ts
View file

@ -2,12 +2,12 @@ import teal from "./list/teal";
import blue from "./list/blue"; import blue from "./list/blue";
import red from "./list/red"; import red from "./list/red";
import gray from "./list/gray"; import gray from "./list/gray";
import amoled from "./list/amoled"; import black from "./list/black";
export const allThemes = [ export const allThemes = [
teal, teal,
blue, blue,
gray, gray,
red, red,
amoled black
] ]

78
themes/list/amoled.ts → themes/list/black.ts
View file

@ -1,8 +1,14 @@
import { createTheme } from "../types"; import { createTheme } from "../types";
const tokens = { const tokens = {
black: "#000000",
white: "#FFFFFF", white: "#FFFFFF",
black: {
c50: "#000000",
c100: "#0d0d0d",
c125: "#141414",
c150: "#1a1a1a",
c200: "#262626"
},
semantic: { semantic: {
silver: { silver: {
c100: "#DEDEDE", c100: "#DEDEDE",
@ -62,7 +68,7 @@ const tokens = {
} }
export default createTheme({ export default createTheme({
name: "amoled", name: "black",
extend: { extend: {
colors: { colors: {
themePreview: { themePreview: {
@ -71,8 +77,8 @@ export default createTheme({
}, },
pill: { pill: {
background: tokens.black, background: tokens.black.c100,
backgroundHover: tokens.shade.c500, backgroundHover: tokens.black.c125,
highlight: tokens.blue.c200, highlight: tokens.blue.c200,
activeBackground: tokens.shade.c700, activeBackground: tokens.shade.c700,
}, },
@ -88,21 +94,21 @@ export default createTheme({
buttons: { buttons: {
toggle: tokens.purple.c300, toggle: tokens.purple.c300,
toggleDisabled: tokens.ash.c500, toggleDisabled: tokens.black.c200,
secondary: tokens.ash.c700, secondary: tokens.black.c100,
secondaryHover: tokens.ash.c700, secondaryHover: tokens.black.c150,
purple: tokens.purple.c600, purple: tokens.purple.c600,
purpleHover: tokens.purple.c400, purpleHover: tokens.purple.c400,
cancel: tokens.shade.c700, cancel: tokens.black.c100,
cancelHover: tokens.shade.c800 cancelHover: tokens.black.c150
}, },
background: { background: {
main: tokens.black, main: tokens.black.c50,
secondary: tokens.black, secondary: tokens.black.c50,
secondaryHover: tokens.black, secondaryHover: tokens.black.c50,
accentA: tokens.black, accentA: tokens.black.c50,
accentB: tokens.black accentB: tokens.black.c50
}, },
modal: { modal: {
@ -120,9 +126,9 @@ export default createTheme({
}, },
search: { search: {
background: tokens.shade.c800, background: tokens.black.c100,
hoverBackground: tokens.shade.c900, hoverBackground: tokens.shade.c900,
focused: tokens.shade.c700, focused: tokens.black.c125,
placeholder: tokens.shade.c200, placeholder: tokens.shade.c200,
icon: tokens.shade.c500 icon: tokens.shade.c500
}, },
@ -130,7 +136,7 @@ export default createTheme({
mediaCard: { mediaCard: {
hoverBackground: tokens.shade.c900, hoverBackground: tokens.shade.c900,
hoverAccent: tokens.shade.c100, hoverAccent: tokens.shade.c100,
hoverShadow: tokens.black, hoverShadow: tokens.black.c50,
shadow: tokens.shade.c800, shadow: tokens.shade.c800,
barColor: tokens.ash.c200, barColor: tokens.ash.c200,
barFillColor: tokens.purple.c100, barFillColor: tokens.purple.c100,
@ -139,24 +145,24 @@ export default createTheme({
}, },
largeCard: { largeCard: {
background: tokens.shade.c600, background: tokens.black.c100,
icon: tokens.purple.c400 icon: tokens.purple.c400
}, },
dropdown: { dropdown: {
background: tokens.shade.c800, background: tokens.black.c100,
altBackground: tokens.black, altBackground: tokens.black.c50,
hoverBackground: tokens.shade.c700, hoverBackground: tokens.black.c150,
text: tokens.shade.c50, text: tokens.shade.c50,
secondary: tokens.shade.c100, secondary: tokens.shade.c100,
border: tokens.shade.c400, border: tokens.shade.c400,
contentBackground: tokens.black contentBackground: tokens.black.c50
}, },
authentication: { authentication: {
border: tokens.shade.c300, border: tokens.shade.c300,
inputBg: tokens.shade.c600, inputBg: tokens.black.c100,
inputBgHover: tokens.shade.c500, inputBgHover: tokens.black.c150,
wordBackground: tokens.shade.c500, wordBackground: tokens.shade.c500,
copyText: tokens.shade.c100, copyText: tokens.shade.c100,
copyTextHover: tokens.ash.c50 copyTextHover: tokens.ash.c50
@ -164,13 +170,13 @@ export default createTheme({
settings: { settings: {
sidebar: { sidebar: {
activeLink: tokens.shade.c800, activeLink: tokens.black.c100,
badge: tokens.shade.c900, badge: tokens.shade.c900,
type: { type: {
secondary: tokens.shade.c200, secondary: tokens.shade.c200,
inactive: tokens.shade.c50, inactive: tokens.shade.c50,
icon: tokens.shade.c50, icon: tokens.black.c200,
iconActivated: tokens.purple.c200, iconActivated: tokens.purple.c200,
activated: tokens.purple.c100 activated: tokens.purple.c100
} }
@ -178,12 +184,12 @@ export default createTheme({
card: { card: {
border: tokens.shade.c700, border: tokens.shade.c700,
background: tokens.shade.c700, background: tokens.black.c100,
altBackground: tokens.shade.c700 altBackground: tokens.black.c100
}, },
saveBar: { saveBar: {
background: tokens.black background: tokens.black.c50
} }
}, },
@ -192,7 +198,7 @@ export default createTheme({
}, },
errors: { errors: {
card: tokens.black, card: tokens.black.c50,
border: tokens.ash.c500, border: tokens.ash.c500,
type: { type: {
@ -201,7 +207,7 @@ export default createTheme({
}, },
about: { about: {
circle: tokens.ash.c500, circle: tokens.black.c100,
circleText: tokens.ash.c50 circleText: tokens.ash.c50
}, },
@ -226,9 +232,9 @@ export default createTheme({
}, },
scraping: { scraping: {
card: tokens.black, card: tokens.black.c50,
loading: tokens.purple.c200, loading: tokens.purple.c200,
noresult: tokens.ash.c100 noresult: tokens.black.c200
}, },
audio: { audio: {
@ -236,17 +242,17 @@ export default createTheme({
}, },
context: { context: {
background: tokens.black, background: tokens.black.c50,
light: tokens.shade.c50, light: tokens.shade.c50,
border: tokens.ash.c600, border: tokens.ash.c600,
hoverColor: tokens.ash.c600, hoverColor: tokens.ash.c600,
buttonFocus: tokens.ash.c500, buttonFocus: tokens.ash.c500,
flagBg: tokens.ash.c500, flagBg: tokens.ash.c500,
inputBg: tokens.ash.c600, inputBg: tokens.black.c100,
buttonOverInputHover: tokens.ash.c500, buttonOverInputHover: tokens.ash.c500,
inputPlaceholder: tokens.ash.c200, inputPlaceholder: tokens.ash.c200,
cardBorder: tokens.ash.c700, cardBorder: tokens.ash.c700,
slider: tokens.ash.c50, slider: tokens.black.c200,
sliderFilled: tokens.purple.c200, sliderFilled: tokens.purple.c200,
buttons: { buttons: {