mirror of
https://github.com/zaphar/Heracles.git
synced 2025-07-23 12:39:50 -04:00
ui: fix some color scheme stuff
This commit is contained in:
parent
e44d2087c8
commit
4427cd414f
@ -34,8 +34,11 @@
|
||||
* @type {object}
|
||||
* @property {array} values
|
||||
* @property {{color: string}=} fill
|
||||
* @property {object=} font
|
||||
* @property {string=} font.family
|
||||
* @property {number=} font.size
|
||||
* @property {string=} font.color
|
||||
* @property {{width: number, color: string}=} line
|
||||
* @property {{family: string, size: number, color: string }=} font
|
||||
* @property {Array<number>=} columnwidth
|
||||
*/
|
||||
|
||||
@ -437,7 +440,7 @@ export class GraphPlot extends HTMLElement {
|
||||
color: getCssVariableValue('--text-color').trim()
|
||||
},
|
||||
xaxis: {
|
||||
gridcolor: getCssVariableValue("--accent-color")
|
||||
gridcolor: getCssVariableValue("--grid-line-color")
|
||||
},
|
||||
legend: {
|
||||
orientation: 'v'
|
||||
@ -449,7 +452,7 @@ export class GraphPlot extends HTMLElement {
|
||||
var nextYaxis = this.yaxisNameGenerator();
|
||||
for (const yaxis of yaxes) {
|
||||
yaxis.tickformat = yaxis.tickformat || this.#d3TickFormat;
|
||||
yaxis.gridColor = getCssVariableValue("--accent-color");
|
||||
yaxis.gridColor = getCssVariableValue("--grid-line-color");
|
||||
layout[nextYaxis()] = yaxis;
|
||||
}
|
||||
var traces = /** @type {Array<PlotTrace>} */ ([]);
|
||||
@ -524,7 +527,8 @@ export class GraphPlot extends HTMLElement {
|
||||
headers: {
|
||||
align: "left",
|
||||
values: ["Timestamp","Label", "Log"],
|
||||
fill: { color: layout.xaxis.gridColor }
|
||||
fill: { color: layout.xaxis.paper_bgcolor },
|
||||
font: { color: getCssVariableValue('--text-color').trim() }
|
||||
},
|
||||
cells: {
|
||||
align: "left",
|
||||
|
@ -3,24 +3,12 @@
|
||||
--background-color: #FFFFFF; /* Light background */
|
||||
--text-color: #333333; /* Dark text for contrast */
|
||||
--paper-background-color: #F0F0F0;
|
||||
--plot-background-color: #F0F0F0;
|
||||
--plot-background-color: #FFFFFF;
|
||||
--accent-color: #6200EE; /* For buttons and interactive elements */
|
||||
|
||||
/* Graph colors */
|
||||
--graph-color-1: #007BFF; /* Blue */
|
||||
--graph-color-2: #28A745; /* Green */
|
||||
--graph-color-3: #DC3545; /* Red */
|
||||
--graph-color-4: #FFC107; /* Yellow */
|
||||
--graph-color-5: #17A2B8; /* Cyan */
|
||||
--graph-color-6: #6C757D; /* Gray */
|
||||
|
||||
/* Axis and grid lines */
|
||||
--axis-color: #CCCCCC;
|
||||
--grid-line-color: #EEEEEE;
|
||||
|
||||
/* Tooltip background */
|
||||
--tooltip-background-color: #FFFFFF;
|
||||
--tooltip-text-color: #000000;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
@ -32,21 +20,9 @@
|
||||
--text-color: #839496; /* base0 */
|
||||
--accent-color: #268bd2; /* blue */
|
||||
|
||||
/* Graph colors - Solarized Accent Colors */
|
||||
--graph-color-1: #b58900; /* yellow */
|
||||
--graph-color-2: #cb4b16; /* orange */
|
||||
--graph-color-3: #dc322f; /* red */
|
||||
--graph-color-4: #d33682; /* magenta */
|
||||
--graph-color-5: #6c71c4; /* violet */
|
||||
--graph-color-6: #2aa198; /* cyan */
|
||||
|
||||
/* Axis and grid lines */
|
||||
--axis-color: #586e75; /* base01 */
|
||||
--grid-line-color: #073642; /* base02 */
|
||||
|
||||
/* Tooltip background */
|
||||
--tooltip-background-color: #002b36; /* base03 */
|
||||
--tooltip-text-color: #839496; /* base0 */
|
||||
}
|
||||
}
|
||||
|
||||
|
Loading…
x
Reference in New Issue
Block a user