tronnet/ProxmoxAAS-Dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add colors for light prefered color scheme

Browse Source 
Signed-off-by: Arthur Lu <learthurgo@gmail.com>
This commit is contained in:
Arthur Lu
2023-05-10 21:32:41 +00:00
parent c3000f8a3a
commit 80bcdc340b
3 changed files with 34 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
css/nav.css
View File

@@ -3,7 +3,19 @@
--nav-text-color: white;
--nav-header-bg-color: #0f0;
--nav-header-text-color: black;
--nav-link-hover-color: var(--main-bg-color, #404040);
--nav-link-active-text-color: white;
--nav-link-active-bg-color: var(--main-bg-color, #404040);
}
@media screen and (prefers-color-scheme: light) {
:root {
--nav-bg-color: black;
--nav-text-color: white;
--nav-header-bg-color: #0f0;
--nav-header-text-color: black;
--nav-link-active-text-color: black;
--nav-link-active-bg-color: var(--main-bg-color, white);
}
}
nav {
@@ -32,10 +44,12 @@ nav a, nav h1, nav label {
@media screen and (min-width: 600px){
#hamitems a:hover, #hamitems a[aria-current="true"], #hamitems:hover a[aria-current="true"]:hover {
background-color: var(--nav-link-hover-color);
color: var(--nav-link-active-text-color);
background-color: var(--nav-link-active-bg-color);
}
#hamitems:hover a[aria-current="true"] {
color: var(--nav-text-color);
background-color: var(--nav-bg-color);
}

17
css/style.css
View File

@@ -5,11 +5,24 @@
--main-bg-color: #404040;
--main-text-color: white;
--main-card-bg-color: #202020;
--main-card-shadow-color: black;
--main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.84), 0 2px 10px 0 rgba(0,0,0,0.88);
/*--main-card-shadow-color: black;*/
--main-table-header-bg-color: black;
--main-input-bg-color: #404040;
}
@media screen and (prefers-color-scheme: light) {
:root {
--main-bg-color: white;
--main-text-color: black;
--main-card-bg-color: white;
--main-card-box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
/*--main-card-shadow-color: rgba(0,0,0,0.25);*/
--main-table-header-bg-color: #808080;
--main-input-bg-color: white;
}
}
* {
box-sizing: border-box;
}
@@ -33,7 +46,7 @@ main, dialog {
.w3-card {
background-color: var(--main-card-bg-color);
box-shadow: 0 2px 5px 0 var(--main-card-shadow-color);
box-shadow: var(--main-card-box-shadow);
}
th {