updated theme brightness for light/dark
This commit is contained in:
41
theme.js
41
theme.js
@@ -12,11 +12,12 @@ export const white = '#FFFFFF';
|
|||||||
export const black = '#000000';
|
export const black = '#000000';
|
||||||
|
|
||||||
// adjust this number upwards to make the TradingView palette brighter and downwards for darker
|
// adjust this number upwards to make the TradingView palette brighter and downwards for darker
|
||||||
const middleShadeIndex = 5
|
const lightMiddleShadeIndex = 7
|
||||||
|
const darkMiddleShadeIndex = 5
|
||||||
|
|
||||||
const numShades = 20
|
const numShades = 20
|
||||||
|
|
||||||
function shadesOf(rgb) {
|
function shadesOf(rgb, middleShadeIndex) {
|
||||||
const c = new Color(rgb)
|
const c = new Color(rgb)
|
||||||
const lights = []
|
const lights = []
|
||||||
const darks = []
|
const darks = []
|
||||||
@@ -34,34 +35,26 @@ function shadesOf(rgb) {
|
|||||||
return [...lights.toReversed(), ...darks]
|
return [...lights.toReversed(), ...darks]
|
||||||
}
|
}
|
||||||
|
|
||||||
export const greens = shadesOf(green);
|
|
||||||
export const reds = shadesOf(red);
|
|
||||||
export const yellows = shadesOf(yellow);
|
|
||||||
export const oranges = shadesOf(orange);
|
|
||||||
export const blues = shadesOf(blue);
|
|
||||||
export const grays = shadesOf(gray);
|
|
||||||
export const purples = shadesOf(purple);
|
|
||||||
|
|
||||||
export const tvLightTheme = {
|
export const tvLightTheme = {
|
||||||
"color1": blues,
|
"color1": shadesOf(blue, lightMiddleShadeIndex),
|
||||||
"color2": grays,
|
"color2": shadesOf(gray, lightMiddleShadeIndex),
|
||||||
"color3": reds,
|
"color3": shadesOf(red, lightMiddleShadeIndex),
|
||||||
"color4": greens,
|
"color4": shadesOf(green, lightMiddleShadeIndex),
|
||||||
"color5": oranges,
|
"color5": shadesOf(orange, lightMiddleShadeIndex),
|
||||||
"color6": purples,
|
"color6": shadesOf(purple, lightMiddleShadeIndex),
|
||||||
"color7": yellows,
|
"color7": shadesOf(yellow, lightMiddleShadeIndex),
|
||||||
"white": white,
|
"white": white,
|
||||||
"black": black,
|
"black": black,
|
||||||
}
|
}
|
||||||
|
|
||||||
export const tvDarkTheme = {
|
export const tvDarkTheme = {
|
||||||
"color1": blues,
|
"color1": shadesOf(blue, darkMiddleShadeIndex),
|
||||||
"color2": grays,
|
"color2": shadesOf(gray, darkMiddleShadeIndex),
|
||||||
"color3": reds,
|
"color3": shadesOf(red, darkMiddleShadeIndex),
|
||||||
"color4": greens,
|
"color4": shadesOf(green, darkMiddleShadeIndex),
|
||||||
"color5": oranges,
|
"color5": shadesOf(orange, darkMiddleShadeIndex),
|
||||||
"color6": purples,
|
"color6": shadesOf(purple, darkMiddleShadeIndex),
|
||||||
"color7": yellows,
|
"color7": shadesOf(yellow, darkMiddleShadeIndex),
|
||||||
"white": white,
|
"white": white,
|
||||||
"black": black,
|
"black": black,
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user