dexorder/web
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

darkmode

Browse Source
This commit is contained in:
tim
2025-01-16 20:17:03 -04:00
parent 19a8ffbbd4
commit 0545cd6e97
51 changed files with 482 additions and 436 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
theme.js
View File

@@ -15,11 +15,23 @@ export const purple = '#892ABF'
export const white = '#FFFFFF'
export const black = '#000000'
// adjust this number upwards to make the TradingView palette brighter and downwards for darker
const lightMiddleShadeIndex = 9
const darkMiddleShadeIndex = 9
export const colorNames = ['blue', 'gray', 'red', 'green', 'orange', 'purple', 'yellow']
// adjust this number upwards to make the TradingView palette brighter and downwards for darker
export const lightMiddleShadeIndex = 9
export const darkMiddleShadeIndex = 9
export const numShades = 20 // if you change this, see vuetify.js colors that hardcode indexes
// these parameters are expressed in terms of numShades:
export const printContrast = 15;
// vuetify darken. values are added/substracted from the middleShadeIndex. use positive numbers here.
export const colorContrast = 4;
export const darken1 = 3;
export const lighten1 = 3;
export const darken2 = 6;
export const lighten2 = 6;
const numShades = 20
function shadesOf(rgb, middleShadeIndex) {
const c = new Color(rgb)
@@ -39,26 +51,46 @@ function shadesOf(rgb, middleShadeIndex) {
return [...lights.toReversed(), ...darks]
}
export const light = {
blues: shadesOf(blue, lightMiddleShadeIndex),
grays: shadesOf(gray, lightMiddleShadeIndex),
reds: shadesOf(red, lightMiddleShadeIndex),
greens: shadesOf(green, lightMiddleShadeIndex),
oranges: shadesOf(orange, lightMiddleShadeIndex),
purples: shadesOf(purple, lightMiddleShadeIndex),
yellows: shadesOf(yellow, lightMiddleShadeIndex),
}
export const tvLightTheme = {
"color1": shadesOf(blue, lightMiddleShadeIndex),
"color2": shadesOf(gray, lightMiddleShadeIndex),
"color3": shadesOf(red, lightMiddleShadeIndex),
"color4": shadesOf(green, lightMiddleShadeIndex),
"color5": shadesOf(orange, lightMiddleShadeIndex),
"color6": shadesOf(purple, lightMiddleShadeIndex),
"color7": shadesOf(yellow, lightMiddleShadeIndex),
"color1": light.blues,
"color2": light.grays,
"color3": light.reds,
"color4": light.greens,
"color5": light.oranges,
"color6": light.purples,
"color7": light.yellows,
"white": white,
"black": black,
}
export const dark = {
blues: shadesOf(blue, darkMiddleShadeIndex),
grays: shadesOf(gray, darkMiddleShadeIndex),
reds: shadesOf(red, darkMiddleShadeIndex),
greens: shadesOf(green, darkMiddleShadeIndex),
oranges: shadesOf(orange, darkMiddleShadeIndex),
purples: shadesOf(purple, darkMiddleShadeIndex),
yellows: shadesOf(yellow, darkMiddleShadeIndex),
}
export const tvDarkTheme = {
"color1": shadesOf(blue, darkMiddleShadeIndex),
"color2": shadesOf(gray, darkMiddleShadeIndex),
"color3": shadesOf(red, darkMiddleShadeIndex),
"color4": shadesOf(green, darkMiddleShadeIndex),
"color5": shadesOf(orange, darkMiddleShadeIndex),
"color6": shadesOf(purple, darkMiddleShadeIndex),
"color7": shadesOf(yellow, darkMiddleShadeIndex),
"color1": dark.blues,
"color2": dark.grays,
"color3": dark.reds,
"color4": dark.greens,
"color5": dark.oranges,
"color6": dark.purples,
"color7": dark.yellows,
"white": white,
"black": black,
}