zaphar/Heracles
1
0
Fork 0
mirror of https://github.com/zaphar/Heracles.git synced 2025-07-23 04:29:48 -04:00
Code Issues Packages Projects Releases Wiki Activity

ui: fix some color scheme stuff

Browse Source
This commit is contained in:
Jeremy Wall 2024-03-05 21:10:21 -05:00
parent e44d2087c8
commit 4427cd414f
2 changed files with 9 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
static/lib.js
View File

@ -34,8 +34,11 @@
* @type {object} * @type {object}
* @property {array} values * @property {array} values
* @property {{color: string}=} fill * @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 {{width: number, color: string}=} line
* @property {{family: string, size: number, color: string }=} font
* @property {Array<number>=} columnwidth * @property {Array<number>=} columnwidth
*/ */
@ -437,7 +440,7 @@ export class GraphPlot extends HTMLElement {
color: getCssVariableValue('--text-color').trim() color: getCssVariableValue('--text-color').trim()
}, },
xaxis: { xaxis: {
gridcolor: getCssVariableValue("--accent-color") gridcolor: getCssVariableValue("--grid-line-color")
}, },
legend: { legend: {
orientation: 'v' orientation: 'v'
@ -449,7 +452,7 @@ export class GraphPlot extends HTMLElement {
var nextYaxis = this.yaxisNameGenerator(); var nextYaxis = this.yaxisNameGenerator();
for (const yaxis of yaxes) { for (const yaxis of yaxes) {
yaxis.tickformat = yaxis.tickformat || this.#d3TickFormat; yaxis.tickformat = yaxis.tickformat || this.#d3TickFormat;
yaxis.gridColor = getCssVariableValue("--accent-color"); yaxis.gridColor = getCssVariableValue("--grid-line-color");
layout[nextYaxis()] = yaxis; layout[nextYaxis()] = yaxis;
} }
var traces = /** @type {Array<PlotTrace>} */ ([]); var traces = /** @type {Array<PlotTrace>} */ ([]);
@ -524,7 +527,8 @@ export class GraphPlot extends HTMLElement {
headers: { headers: {
align: "left", align: "left",
values: ["Timestamp","Label", "Log"], values: ["Timestamp","Label", "Log"],
fill: { color: layout.xaxis.gridColor } fill: { color: layout.xaxis.paper_bgcolor },
font: { color: getCssVariableValue('--text-color').trim() }
}, },
cells: { cells: {
align: "left", align: "left",

26
static/site.css
View File

@ -3,24 +3,12 @@
--background-color: #FFFFFF; /* Light background */ --background-color: #FFFFFF; /* Light background */
--text-color: #333333; /* Dark text for contrast */ --text-color: #333333; /* Dark text for contrast */
--paper-background-color: #F0F0F0; --paper-background-color: #F0F0F0;
--plot-background-color: #F0F0F0; --plot-background-color: #FFFFFF;
--accent-color: #6200EE; /* For buttons and interactive elements */ --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 and grid lines */
--axis-color: #CCCCCC; --axis-color: #CCCCCC;
--grid-line-color: #EEEEEE; --grid-line-color: #EEEEEE;
/* Tooltip background */
--tooltip-background-color: #FFFFFF;
--tooltip-text-color: #000000;
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
@ -32,21 +20,9 @@
--text-color: #839496; /* base0 */ --text-color: #839496; /* base0 */
--accent-color: #268bd2; /* blue */ --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 and grid lines */
--axis-color: #586e75; /* base01 */ --axis-color: #586e75; /* base01 */
--grid-line-color: #073642; /* base02 */ --grid-line-color: #073642; /* base02 */
/* Tooltip background */
--tooltip-background-color: #002b36; /* base03 */
--tooltip-text-color: #839496; /* base0 */
} }
} }