Files
web/theme.js

64 lines
2.1 KiB
JavaScript

import Color from "color";
export const green = '#35D721';
export const red = '#DD1A10';
export const yellow = '#FFDE00';
export const orange = '#F58A00';
export const blue = '#1666EB';
export const gray = '#969696';
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 = 7
const darkMiddleShadeIndex = 5
const numShades = 20
function shadesOf(rgb, middleShadeIndex) {
const c = new Color(rgb)
const lights = []
const darks = []
const numLightShades = middleShadeIndex + 1
const numDarkShades = numShades - numLightShades
for (let j=0; j<numLightShades; j++) {
const ratio = j/(numLightShades-1);
lights.push(c.lighten(ratio).rgb().toString())
}
// start iteration at 1 because the unaltered color was already included with the lights
for (let j=1; j<=numDarkShades; j++) {
const ratio = j/numDarkShades;
darks.push(c.darken(ratio).rgb().toString())
}
return [...lights.toReversed(), ...darks]
}
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),
"white": white,
"black": black,
}
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),
"white": white,
"black": black,
}
export const tvCustomThemes = {light: tvLightTheme, dark: tvDarkTheme};
// console.log('themes', tvLightTheme);