Dark mode addded
This commit is contained in:
parent
da7f4aa5b2
commit
50e56453da
GPG Key ID:
A17882625B33AC31
|
|
@ -1,3 +1,44 @@
|
|||
:root {
|
||||
--main-bg-color: #eee;
|
||||
--main-fg-color: #000;
|
||||
--button-bg-color: #3988FF;
|
||||
--button-fg-color: #fff;
|
||||
--button-hover-bg-color: #0F6FFF;
|
||||
--button-hover-fg-color: #fff;
|
||||
--button-cancel-bg-color: transparent;
|
||||
--button-cancel-fg-color: #000;
|
||||
--button-remove-bg-color: transparent;
|
||||
--button-remove-fg-color: #f00;
|
||||
--header-bg-color: #fff;
|
||||
--header-spacer-color: #ddd;
|
||||
--header-shadow: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,0.6) 100%);
|
||||
--box-bg-color: #fff;
|
||||
--box-fg-color: #111;
|
||||
--box-loader-bg-color: rgba(128, 128, 128, 0.3);
|
||||
--box-loader-fg-color: #fff;
|
||||
--box-action-fg-color: #666;
|
||||
--box-preview-bg-color: #3988FF;
|
||||
--box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
|
||||
--modal-overlay-bg-color: rgba(0,0,0,0.2);
|
||||
--graph-axis-fg-color: #777;
|
||||
--graph-grid-color: rgb(238, 238, 238);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--main-bg-color: #222;
|
||||
--main-fg-color: #b8b8b8;
|
||||
--header-bg-color: #000;
|
||||
--header-spacer-color: #333;
|
||||
--header-shadow: none;
|
||||
--box-bg-color: #111;
|
||||
--box-fg-color: #eee;
|
||||
--box-shadow: none;
|
||||
--graph-axis-fg-color: #666;
|
||||
--graph-grid-color: rgb(25, 25, 25);
|
||||
}
|
||||
}
|
||||
|
||||
body, html {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
|
@ -6,7 +47,8 @@ body, html {
|
|||
}
|
||||
|
||||
body {
|
||||
background: #eee;
|
||||
background: var(--main-bg-color);
|
||||
color: var(--main-fg-color);
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -15,8 +57,8 @@ button, input, select {
|
|||
}
|
||||
|
||||
button {
|
||||
background: #3988FF;
|
||||
color: #fff;
|
||||
background: var(--button-bg-color);
|
||||
color: var(--button-fg-color);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
padding: 0.25rem 1rem;
|
||||
|
|
@ -26,7 +68,8 @@ button {
|
|||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #0F6FFF;
|
||||
background-color: var(--button-hover-bg-color);
|
||||
color: var(--button-hover-fg-color);
|
||||
}
|
||||
|
||||
input, select {
|
||||
|
|
@ -66,8 +109,9 @@ input, select {
|
|||
}
|
||||
|
||||
.box {
|
||||
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
|
||||
background-color: #fff;
|
||||
box-shadow: var(--box-shadow);
|
||||
background-color: var(--box-bg-color);
|
||||
color: var(--box-fg-color);
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
|
|
@ -81,7 +125,7 @@ input, select {
|
|||
display: none;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
background-color: rgba(0,0,0,0.2);
|
||||
background-color: var(--modal-overlay-bg-color);
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
|
|
@ -90,9 +134,10 @@ input, select {
|
|||
}
|
||||
|
||||
.settings-modal .inner {
|
||||
background: #fff;
|
||||
background-color: var(--box-bg-color);
|
||||
color: var(--box-fg-color);
|
||||
margin-top: 5%;
|
||||
box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
|
||||
box-shadow: var(--box-shadow);
|
||||
border-radius: 0.5rem;
|
||||
width: 20rem;
|
||||
}
|
||||
|
|
@ -108,8 +153,8 @@ input, select {
|
|||
|
||||
.settings-modal .actions .remove {
|
||||
margin-right: auto;
|
||||
background-color: transparent;
|
||||
color: #ff0000;
|
||||
background-color: var(--button-remove-bg-color);
|
||||
color: var(--button-remove-fg-color);
|
||||
}
|
||||
|
||||
form {
|
||||
|
|
@ -133,8 +178,8 @@ form .actions button {
|
|||
}
|
||||
|
||||
form .actions button.cancel {
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
background-color: var(--button-cancel-bg-color);
|
||||
color: var(--button-cancel-fg-color);
|
||||
}
|
||||
|
||||
form.horizontal {
|
||||
|
|
@ -158,12 +203,12 @@ form.horizontal .input label {
|
|||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0.5rem 0.5rem;
|
||||
background-color: #fff;
|
||||
background-color: var(--header-bg-color);
|
||||
}
|
||||
|
||||
.dashboard-head .shadow {
|
||||
position: absolute;
|
||||
background: linear-gradient(0deg, rgba(255,255,255,0) 5%, rgba(190,190,190,0.6) 100%);
|
||||
background: var(--header-shadow);
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
z-index: 1;
|
||||
|
|
@ -172,7 +217,7 @@ form.horizontal .input label {
|
|||
.dashboard-head .spacer {
|
||||
margin: 0 1rem;
|
||||
width: 1px;
|
||||
background: #ddd;
|
||||
background: var(--header-spacer-color);
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -230,8 +275,8 @@ form.horizontal .input label {
|
|||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(128, 128, 128, 0.3);
|
||||
color: #fff;
|
||||
background-color: var(--box-loader-bg-color);
|
||||
color: var(--box-loader-fg-color);
|
||||
font-size: 300%;
|
||||
z-index: 2;
|
||||
}
|
||||
|
|
@ -311,7 +356,7 @@ form.horizontal .input label {
|
|||
margin-left: 0.25rem;
|
||||
font-size: 110%;
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
color: var(--box-action-fg-color);
|
||||
}
|
||||
|
||||
.grid-sensors .grid-box .box .body {
|
||||
|
|
@ -329,7 +374,7 @@ form.horizontal .input label {
|
|||
|
||||
.grid-sensors .box-preview {
|
||||
position: absolute;
|
||||
background-color: #3988FF;
|
||||
background-color: var(--box-preview-bg-color);
|
||||
opacity: 0.5;
|
||||
transition: all 0.2s;
|
||||
z-index: 1;
|
||||
|
|
|
|||
|
|
@ -36,6 +36,18 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
|
|||
|
||||
useEffect(() => {
|
||||
if (bodyRef.current && values.data) {
|
||||
const bgColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue('--box-bg-color')
|
||||
|
||||
const axisFgColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue('--graph-axis-fg-color')
|
||||
|
||||
const gridColor = getComputedStyle(
|
||||
document.documentElement
|
||||
).getPropertyValue('--graph-grid-color')
|
||||
|
||||
// TODO: These should be probably returned by server, could be outdated
|
||||
const from = filter.customFrom
|
||||
const to = filter.customTo
|
||||
|
|
@ -79,7 +91,14 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
|
|||
},
|
||||
],
|
||||
{
|
||||
xaxis: { range: [from, to], type: 'date' },
|
||||
plot_bgcolor: bgColor,
|
||||
paper_bgcolor: bgColor,
|
||||
xaxis: {
|
||||
range: [from, to],
|
||||
type: 'date',
|
||||
tickfont: { color: axisFgColor },
|
||||
gridcolor: gridColor,
|
||||
},
|
||||
yaxis: {
|
||||
...(customRange && {
|
||||
range: [
|
||||
|
|
@ -88,6 +107,8 @@ export const BoxGraphContent = ({ box, data, refreshRef }: Props) => {
|
|||
],
|
||||
}),
|
||||
...(data.unit && { ticksuffix: ` ${data.unit}` }),
|
||||
tickfont: { color: axisFgColor },
|
||||
gridcolor: gridColor,
|
||||
},
|
||||
margin: {
|
||||
l: 70,
|
||||
|
|
|
|||
Loading…
Reference in New Issue