openwrt-mirror/luci
1
0
Fork 0
mirror of https://github.com/openwrt/luci.git synced 2026-06-17 12:40:24 +04:00
Code Issues Packages Projects Releases Wiki Activity

luci-theme-material: add dark mode support

Browse Source 
Add dark mode following the luci-theme-bootstrap pattern: auto-detect
via prefers-color-scheme, with forced MaterialDark/MaterialLight
variants. Replace ~60 hardcoded colors in cascade.css with CSS
variables and override them in a :root[data-darkmode="true"] block.

Signed-off-by: Shannon Barber <sgbarber@gmail.com>
This commit is contained in:
Shannon Barber
2026-04-12 17:56:12 -04:00
committed by Paul Donald
parent fdc8eb01d0
commit 54338546bc
5 changed files with 206 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/luci-theme-material/Makefile
+2
View File
@@ -15,6 +15,8 @@ define Package/luci-theme-material/postrm
#!/bin/sh #!/bin/sh
[ -n "$${IPKG_INSTROOT}" ] || { [ -n "$${IPKG_INSTROOT}" ] || {
uci -q delete luci.themes.Material uci -q delete luci.themes.Material
uci -q delete luci.themes.MaterialDark
uci -q delete luci.themes.MaterialLight
uci commit luci uci commit luci
} }
endef endef
themes/luci-theme-material/htdocs/luci-static/material/cascade.css
+111 -78
View File
@@ -163,7 +163,7 @@ html {
body { body {
font-size: .8rem; font-size: .8rem;
background-color: #eee; background-color: var(--white-color-low);
} }
html, html,
@@ -177,8 +177,8 @@ body {
select { select {
padding: .36rem .8rem; padding: .36rem .8rem;
color: #555; color: var(--black-color-low);
border: thin solid #ccc; border: thin solid var(--gray-color-high);
background-color: var(--white-color); background-color: var(--white-color);
background-image: none; background-image: none;
} }
@@ -190,9 +190,9 @@ input,
.cbi-dropdown { .cbi-dropdown {
min-height: 1.8rem; min-height: 1.8rem;
padding: 0; padding: 0;
color: rgba(0, 0, 0, .87); color: var(--black-color);
border: 0; border: 0;
border-bottom: 2px solid rgba(0, 0, 0, .26); border-bottom: 2px solid var(--gray-color-high);
border-radius: 0; border-radius: 0;
outline: 0; outline: 0;
background-color: transparent; background-color: transparent;
@@ -226,21 +226,21 @@ code {
font-size: 1rem; font-size: 1rem;
font-size-adjust: .35; font-size-adjust: .35;
padding: 1px 3px; padding: 1px 3px;
color: #101010; color: var(--black-color-low);
border-radius: 2px; border-radius: 2px;
background: #ddd; background: var(--gray-color);
} }
abbr { abbr {
cursor: help; cursor: help;
text-decoration: underline; text-decoration: underline;
color: #005470; color: var(--secondary-color);
} }
hr { hr {
margin: 1rem 0; margin: 1rem 0;
opacity: .1; opacity: .1;
border-color: #eee; border-color: var(--gray-color);
} }
header, header,
@@ -264,13 +264,13 @@ footer {
padding: 1rem; padding: 1rem;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
color: #aaa; color: var(--gray-color-high);
text-shadow: 0 0 2px #bbb; text-shadow: none;
} }
footer > a { footer > a {
text-decoration: none; text-decoration: none;
color: #aaa; color: var(--gray-color-high);
} }
small { small {
@@ -297,7 +297,7 @@ small {
width: 100%; width: 100%;
height: 100%; height: 100%;
pointer-events: none; pointer-events: none;
background-color: rgb(240, 240, 240); background-color: var(--white-color-low);
transition: visibility 400ms, opacity 400ms; transition: visibility 400ms, opacity 400ms;
} }
@@ -309,7 +309,7 @@ small {
top: 12.5%; top: 12.5%;
display: block; display: block;
text-align: center; text-align: center;
color: #888; color: var(--gray-color-high);
} }
.main > .loading > span > .loading-img { .main > .loading > span > .loading-img {
@@ -355,11 +355,11 @@ small {
width: 85%; width: 85%;
width: calc(100% - 15rem); width: calc(100% - 15rem);
height: 100%; height: 100%;
background-color: #eee; background-color: var(--white-color-low);
} }
.main-right > #maincontent { .main-right > #maincontent {
background-color: #eee; background-color: var(--white-color-low);
} }
.pull-right { .pull-right {
@@ -452,9 +452,9 @@ header > .fill > .container > .status > * {
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
color: var(--white-color) !important; color: var(--header-color) !important;
border-radius: 3px; border-radius: 3px;
background-color: #bfbfbf; background-color: var(--gray-color-high);
text-shadow: none; text-shadow: none;
} }
@@ -732,14 +732,14 @@ li {
h1 { h1 {
font-size: 2rem; font-size: 2rem;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: thin solid #eee; border-bottom: thin solid var(--gray-color);
} }
h2 { h2 {
font-size: 1.8rem; font-size: 1.8rem;
margin: 2rem 0 0 0; margin: 2rem 0 0 0;
padding-bottom: 10px; padding-bottom: 10px;
border-bottom: thin solid #eee; border-bottom: thin solid var(--gray-color);
} }
h3 { h3 {
@@ -798,7 +798,7 @@ h5 {
font-size: small; font-size: small;
line-height: 1.42857143; line-height: 1.42857143;
padding: .5rem; padding: .5rem;
color: #999; color: var(--gray-color-high);
} }
.cbi-map-descr + fieldset { .cbi-map-descr + fieldset {
@@ -826,8 +826,8 @@ fieldset > fieldset,
margin: 0; margin: 0;
margin-bottom: .5rem; margin-bottom: .5rem;
padding-bottom: 1rem; padding-bottom: 1rem;
color: #404040; color: var(--black-color-low);
border-bottom: thin solid #eee; border-bottom: thin solid var(--gray-color);
} }
.cbi-section > h4:first-child, .cbi-section > h4:first-child,
@@ -847,7 +847,7 @@ table,
.table { .table {
overflow-y: hidden; overflow-y: hidden;
width: 100%; width: 100%;
box-shadow: 0 0 0 1px #ddd; box-shadow: 0 0 0 1px var(--gray-color);
} }
table > tbody > tr > td, table > tbody > tr > td,
@@ -883,7 +883,7 @@ tr > th,
.tr > .th, .tr > .th,
.cbi-section-table-row::before, .cbi-section-table-row::before,
#cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) { #cbi-wireless > #wifi_assoclist_table > .tr:nth-child(2) {
border-top: thin solid #ddd; border-top: thin solid var(--gray-color);
} }
#cbi-wireless .td, #cbi-wireless .td,
@@ -961,10 +961,10 @@ td > table > tbody > tr > td,
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
color: rgba(0, 0, 0, .87); color: var(--black-color);
border: 0; border: 0;
border-radius: .2rem; border-radius: .2rem;
background-color: #f0f0f0; background-color: var(--gray-color);
background-image: none; background-image: none;
-webkit-appearance: none; /* nonstandard, should remove in future */ -webkit-appearance: none; /* nonstandard, should remove in future */
appearance: none; appearance: none;
@@ -1176,14 +1176,14 @@ td > table > tbody > tr > td,
.tabs > li:hover { .tabs > li:hover {
cursor: pointer; cursor: pointer;
border-bottom-color: #c9c9c9; border-bottom-color: var(--gray-color-high);
} }
.tabs > li > a, .tabs > li > a,
.cbi-tabmenu > li > a { .cbi-tabmenu > li > a {
padding: .6rem .9rem; padding: .6rem .9rem;
text-decoration: none; text-decoration: none;
color: #404040; color: var(--black-color-low);
} }
.tabs > li[class~="active"] > a { .tabs > li[class~="active"] > a {
@@ -1196,7 +1196,7 @@ td > table > tbody > tr > td,
} }
.cbi-tabmenu > li:hover { .cbi-tabmenu > li:hover {
background-color: #f1f1f1; background-color: var(--white-color-low);
} }
.cbi-tabmenu > li[class~="cbi-tab"] { .cbi-tabmenu > li[class~="cbi-tab"] {
@@ -1305,7 +1305,7 @@ td > table > tbody > tr > td,
padding: 6px; padding: 6px;
border: thin solid var(--error-color); border: thin solid var(--error-color);
border-radius: 3px; border-radius: 3px;
background-color: #fce6e6; background-color: var(--on-error-color);
} }
.cbi-section-error ul { .cbi-section-error ul {
@@ -1339,7 +1339,7 @@ td > table > tbody > tr > td,
} }
.cbi-rowstyle-2 { .cbi-rowstyle-2 {
background-color: #eee; background-color: var(--white-color-low);
} }
.cbi-rowstyle-2 .cbi-button-up, .cbi-rowstyle-2 .cbi-button-up,
@@ -1385,8 +1385,8 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
margin-right: 2em; margin-right: 2em;
padding: .5em .25em .25em 0; padding: .5em .25em .25em 0;
pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */ pointer-events: auto; /* needed for drag-and-drop in UIDynamicList */
color: #666; color: var(--black-color-low);
border-bottom: 2px solid rgba(0, 0, 0, .26); border-bottom: 2px solid var(--gray-color-high);
outline: 0; outline: 0;
cursor: move; /* drag-and-drop */ cursor: move; /* drag-and-drop */
user-select: text; /* text selection in drag-and-drop */ user-select: text; /* text selection in drag-and-drop */
@@ -1532,8 +1532,8 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
.cbi-dropdown > ul > li[placeholder] { .cbi-dropdown > ul > li[placeholder] {
font-weight: bold; font-weight: bold;
display: none; display: none;
color: #777; color: var(--gray-color-high);
text-shadow: 1px 1px 0 var(--white-color); text-shadow: none;
} }
.cbi-dropdown > ul > li { .cbi-dropdown > ul > li {
@@ -1558,7 +1558,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
} }
.cbi-dropdown > ul > li[display]:not([display="0"]) { .cbi-dropdown > ul > li[display]:not([display="0"]) {
border-left: thin solid #ccc; border-left: thin solid var(--gray-color-high);
} }
.cbi-dropdown[empty] > ul { .cbi-dropdown[empty] > ul {
@@ -1594,9 +1594,9 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
min-width: 100%; min-width: 100%;
max-width: none; max-width: none;
max-height: 200px !important; max-height: 200px !important;
border: thin solid #918e8c; border: thin solid var(--gray-color-high);
background: #f6f6f6; background: var(--white-color);
box-shadow: 0 0 4px #918e8c; box-shadow: 0 0 4px var(--gray-color-high);
color: var(--main-menu-color); color: var(--main-menu-color);
} }
@@ -1635,17 +1635,17 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
} }
.cbi-dropdown[open] > ul.dropdown > li { .cbi-dropdown[open] > ul.dropdown > li {
border-bottom: thin solid #ccc; border-bottom: thin solid var(--gray-color-high);
} }
.cbi-dropdown[open] > ul.dropdown > li[selected] { .cbi-dropdown[open] > ul.dropdown > li[selected] {
background: #b0d0f0; background: var(--submenu-bg-hover-active);
color: var(--black-color); color: var(--header-color);
} }
.cbi-dropdown[open] > ul.dropdown > li.focus, .cbi-dropdown[open] > ul.dropdown > li.focus,
.cbi-dropdown[open] > ul.dropdown > li:hover { .cbi-dropdown[open] > ul.dropdown > li:hover {
background: linear-gradient(90deg, #a3c2e8 0%, #84aad9 100%); background: var(--submenu-bg-hover);
} }
.cbi-dropdown[open] > ul.dropdown > li:last-child { .cbi-dropdown[open] > ul.dropdown > li:last-child {
@@ -1681,8 +1681,8 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
min-width: 170px; min-width: 170px;
height: 20px; height: 20px;
margin: 6px 0; margin: 6px 0;
border: thin solid #999; border: thin solid var(--gray-color-high);
background: #eee; background: var(--white-color-low);
} }
.cbi-progressbar > div { .cbi-progressbar > div {
@@ -1707,7 +1707,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
text-align: center; text-align: center;
white-space: pre; white-space: pre;
text-overflow: ellipsis; text-overflow: ellipsis;
text-shadow: 0 0 2px #eee; text-shadow: 0 0 2px var(--white-color);
} }
#modal_overlay { #modal_overlay {
@@ -1772,7 +1772,7 @@ body:not(.Interfaces) .cbi-rowstyle-2:first-child {
.modal li { .modal li {
list-style-type: square; list-style-type: square;
color: #808080; color: var(--gray-color-high);
} }
.modal p { .modal p {
@@ -1891,8 +1891,8 @@ body.modal-overlay-active #modal_overlay {
display: inline-flex; display: inline-flex;
gap: .2rem; gap: .2rem;
padding: .5rem .8rem; padding: .5rem .8rem;
border-bottom: thin solid #ccc; border-bottom: thin solid var(--gray-color-high);
background: #eee; background: var(--white-color-low);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
} }
@@ -1905,7 +1905,7 @@ body.modal-overlay-active #modal_overlay {
td > .ifacebadge, td > .ifacebadge,
.td > .ifacebadge { .td > .ifacebadge {
font-size: .8rem; font-size: .8rem;
background-color: #f0f0f0; background-color: var(--white-color-low);
} }
.ifacebadge > em, .ifacebadge > em,
@@ -2070,14 +2070,14 @@ td > .ifacebadge,
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
min-width: 100px; min-width: 100px;
border-bottom: thin solid #ccc; border-bottom: thin solid var(--gray-color-high);
background-color: var(--white-color-low); background-color: var(--white-color-low);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 1px 2px rgba(0, 0, 0, .2);
} }
.ifacebox-head { .ifacebox-head {
padding: .25em; padding: .25em;
background: #eee; background: var(--white-color-low);
} }
.ifacebox-head.active { .ifacebox-head.active {
@@ -2105,7 +2105,7 @@ td > .ifacebadge,
.zonebadge .ifacebadge { .zonebadge .ifacebadge {
margin: .1rem .2rem; margin: .1rem .2rem;
padding: .2rem .3rem; padding: .2rem .3rem;
border: thin solid #6c6c6c; border: thin solid var(--gray-color-high);
} }
.zonebadge > input[type="text"] { .zonebadge > input[type="text"] {
@@ -2136,7 +2136,7 @@ td > .ifacebadge,
.cbi-value-field > ul > li .ifacebadge { .cbi-value-field > ul > li .ifacebadge {
margin-top: -.5rem; margin-top: -.5rem;
margin-left: .4rem; margin-left: .4rem;
background-color: #eee; background-color: var(--white-color-low);
} }
.cbi-section-table-row > .cbi-value-field .cbi-dropdown { .cbi-section-table-row > .cbi-value-field .cbi-dropdown {
@@ -2161,12 +2161,12 @@ div.cbi-value var,
td.cbi-value-field var, td.cbi-value-field var,
.td.cbi-value-field var { .td.cbi-value-field var {
font-style: italic; font-style: italic;
color: #0069d6; color: var(--dark-blue-color);
} }
.cbi-optionals { .cbi-optionals {
padding: 1rem 1rem 0 1rem; padding: 1rem 1rem 0 1rem;
border-top: thin solid #ccc; border-top: thin solid var(--gray-color-high);
} }
.cbi-dropdown-container { .cbi-dropdown-container {
@@ -2190,7 +2190,7 @@ span[data-tooltip] .label {
opacity: 0; opacity: 0;
border-radius: 3px; border-radius: 3px;
background: var(--white-color); background: var(--white-color);
box-shadow: 0 0 2px #444; box-shadow: 0 0 2px var(--gray-color-high);
} }
.cbi-tooltip-container:hover .cbi-tooltip { .cbi-tooltip-container:hover .cbi-tooltip {
@@ -2206,7 +2206,7 @@ span[data-tooltip] .label {
} }
.zonebadge-empty { .zonebadge-empty {
color: #404040; color: var(--black-color-low);
background: repeating-linear-gradient(45deg, rgba(204, 204, 204, .5), rgba(204, 204, 204, .5) 5px, rgba(255, 255, 255, .5) 5px, rgba(255, 255, 255, .5) 10px); background: repeating-linear-gradient(45deg, rgba(204, 204, 204, .5), rgba(204, 204, 204, .5) 5px, rgba(255, 255, 255, .5) 5px, rgba(255, 255, 255, .5) 10px);
} }
@@ -2241,9 +2241,9 @@ span[data-tooltip] .label {
white-space: nowrap; white-space: nowrap;
text-decoration: none; text-decoration: none;
text-transform: uppercase; text-transform: uppercase;
color: var(--white-color) !important; color: var(--header-color) !important;
border-radius: 3px; border-radius: 3px;
background-color: #bfbfbf; background-color: var(--gray-color-high);
text-shadow: none; text-shadow: none;
} }
@@ -2441,23 +2441,23 @@ input[name="nslookup"] {
/* wireless overview */ /* wireless overview */
#cbi-wireless > #wifi_assoclist_table > .tr { #cbi-wireless > #wifi_assoclist_table > .tr {
box-shadow: inset 1px -1px 0 #ddd, inset -1px -1px 0 #ddd; box-shadow: inset 1px -1px 0 var(--gray-color), inset -1px -1px 0 var(--gray-color);
} }
#cbi-wireless > #wifi_assoclist_table > .tr.placeholder > .td { #cbi-wireless > #wifi_assoclist_table > .tr.placeholder > .td {
right: 33px; right: 33px;
bottom: 33px; bottom: 33px;
left: 33px; left: 33px;
border-top: thin solid #ddd !important; border-top: thin solid var(--gray-color) !important;
} }
#cbi-wireless > #wifi_assoclist_table > .tr.table-titles { #cbi-wireless > #wifi_assoclist_table > .tr.table-titles {
box-shadow: inset 1px 0 0 #ddd, inset -1px 0 0 #ddd; box-shadow: inset 1px 0 0 var(--gray-color), inset -1px 0 0 var(--gray-color);
} }
#cbi-wireless > #wifi_assoclist_table > .tr.table-titles > .th { #cbi-wireless > #wifi_assoclist_table > .tr.table-titles > .th {
border-bottom: thin solid #ddd; border-bottom: thin solid var(--gray-color);
box-shadow: 0 -1px 0 0 #ddd; box-shadow: 0 -1px 0 0 var(--gray-color);
} }
#wifi_assoclist_table > .tr > .td[data-title="RX Rate / TX Rate"] { #wifi_assoclist_table > .tr > .td[data-title="RX Rate / TX Rate"] {
@@ -2528,8 +2528,8 @@ input[name="nslookup"] {
width: 24% !important; width: 24% !important;
margin: 10px 0 0 10px !important; margin: 10px 0 0 10px !important;
padding: .5rem 1rem; padding: .5rem 1rem;
border-bottom: thin solid #ccc; border-bottom: thin solid var(--gray-color-high);
background: #eee; background: var(--white-color-low);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
} }
@@ -2840,7 +2840,7 @@ input[name="nslookup"] {
} }
.tr.placeholder { .tr.placeholder {
border-bottom: thin solid #ddd; border-bottom: thin solid var(--gray-color);
} }
.tr.placeholder > .td, .tr.placeholder > .td,
@@ -2916,7 +2916,7 @@ input[name="nslookup"] {
display: block; display: block;
flex: 1 1 100%; flex: 1 1 100%;
border-bottom: thin solid rgba(0, 0, 0, .26); border-bottom: thin solid rgba(0, 0, 0, .26);
background: #90c0e0; background: var(--bar-bg);
} }
.td[data-title], .td[data-title],
@@ -3170,16 +3170,49 @@ input[name="nslookup"] {
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: #9e9e9e; background: var(--gray-color-high);
}
/*
::-webkit-scrollbar-thumb:hover {
background: #757575;
} }
}
::-webkit-scrollbar-thumb:active { /* Dark mode overrides */
background: #424242; :root[data-darkmode="true"] .uci-change-list ins,
}*/ :root[data-darkmode="true"] .uci-change-legend-label ins {
border-color: #090;
background-color: #030;
}
:root[data-darkmode="true"] .uci-change-list del,
:root[data-darkmode="true"] .uci-change-legend-label del {
border-color: #900;
background-color: #300;
}
:root[data-darkmode="true"] .uci-change-list var,
:root[data-darkmode="true"] .uci-change-legend-label var {
border-color: var(--gray-color-high);
background-color: var(--white-color);
}
:root[data-darkmode="true"] .zonebadge-empty {
background: repeating-linear-gradient(45deg, rgba(60, 60, 60, .5), rgba(60, 60, 60, .5) 5px, rgba(30, 30, 30, .5) 5px, rgba(30, 30, 30, .5) 10px);
}
:root[data-darkmode="true"] .zonebadge[style],
:root[data-darkmode="true"] .ifacebox-head[style] {
filter: brightness(.7);
}
:root[data-darkmode="true"] .main > .main-left > .nav > li:last-child::before,
:root[data-darkmode="true"] .main > .main-left > .nav > .slide > .menu::before {
filter: invert(1);
}
:root[data-darkmode="true"] .spinning::before {
filter: invert(1);
}
:root[data-darkmode="true"] .darkMask {
background-color: rgba(0, 0, 0, .7);
} }
/* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */ /* === STATUS OVERVIEW: HIDE/SHOW BUTTONS === */
themes/luci-theme-material/htdocs/luci-static/material/custom.css
+57 -1
View File
@@ -28,7 +28,7 @@
--light-blue-color: #5bc0de; --light-blue-color: #5bc0de;
--light-blue-color-high: #46b8da; --light-blue-color-high: #46b8da;
--on-light-blue-color: var(--white-color); --on-light-blue-color: var(--white-color);
--main-color: #00B5E2; --main-color: #00B5E2;
--secondary-color: #0099cc; --secondary-color: #0099cc;
@@ -58,4 +58,60 @@
--on-error-color: var(--white-color); --on-error-color: var(--white-color);
--font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB"; --font-body: "Microsoft Yahei", "WenQuanYi Micro Hei", "sans-serif", "Helvetica Neue", "Helvetica", "Hiragino Sans GB";
color-scheme: light;
}
:root[data-darkmode="true"] {
--white-color: #1a1a1a;
--white-color-low: #111111;
--black-color: #e0e0e0;
--black-color-low: #cccccc;
--yellow-color: #c4903e;
--yellow-color-high: #b8832e;
--on-yellow-color: #1a1a1a;
--red-color: #b34440;
--red-color-high: #a33530;
--on-red-color: #e0e0e0;
--green-color: #4a9a4a;
--green-color-high: #3d8d3d;
--on-green-color: #e0e0e0;
--dark-blue-color: #4a8cc2;
--dark-blue-color-high: #3d7aad;
--on-dark-blue-color: #e0e0e0;
--gray-color: #3a3a3a;
--gray-color-high: #4a4a4a;
--light-blue-color: #3a9ab5;
--light-blue-color-high: #2e8aa5;
--on-light-blue-color: #e0e0e0;
--main-color: #00a0cc;
--secondary-color: #0088b3;
--header-bg: #005570;
--header-color: #e0e0e0;
--bar-bg: #3a9ab5;
--menu-bg-color: #0d0d0d;
--menu-color: #a0a0a0;
--menu-color-hover: #d0d0d0;
--main-menu-color: #d0d0d0;
--submenu-bg-hover: #333333;
--submenu-bg-hover-active: #005570;
--notice-color: #1a4a6a;
--on-notice-color: #e0e0e0;
--danger-color: var(--red-color);
--on-danger-color: var(--on-red-color);
--warning-color: #6b6330;
--on-warning-color: #e0e0e0;
--success-color: var(--green-color);
--on-success-color: var(--on-green-color);
--error-color: #cc3333;
--on-error-color: #e0e0e0;
color-scheme: dark;
} }
themes/luci-theme-material/root/etc/uci-defaults/30_luci-theme-material
+23 -7
View File
@@ -1,12 +1,28 @@
#!/bin/sh #!/bin/sh
if [ "$PKG_UPGRADE" != 1 ]; then changed=0
uci get luci.themes.Material >/dev/null 2>&1 || \
uci batch <<-EOF set_opt() {
set luci.themes.Material=/luci-static/material local key=$1
set luci.main.mediaurlbase=/luci-static/material local val=$2
commit luci
EOF if ! uci -q get "luci.$key" 2>/dev/null; then
uci set "luci.$key=$val"
changed=1
fi
}
set_opt themes.Material /luci-static/material
if [ "$PKG_UPGRADE" != 1 ] && [ $changed = 1 ]; then
set_opt main.mediaurlbase /luci-static/material
fi
set_opt themes.MaterialDark /luci-static/material-dark
set_opt themes.MaterialLight /luci-static/material-light
if [ $changed = 1 ]; then
uci commit luci
fi fi
exit 0 exit 0
themes/luci-theme-material/ucode/template/themes/material/header.ut
+13 -1
View File
@@ -22,15 +22,27 @@
import { getuid, getspnam } from 'luci.core'; import { getuid, getspnam } from 'luci.core';
const boardinfo = ubus.call('system', 'board'); const boardinfo = ubus.call('system', 'board');
const darkpref = (theme == 'material-dark' ? 'true' : (theme == 'material-light' ? 'false' : null));
http.prepare_content('text/html; charset=UTF-8'); http.prepare_content('text/html; charset=UTF-8');
-%} -%}
<!DOCTYPE html> <!DOCTYPE html>
<html lang="{{ dispatcher.lang }}"> <html lang="{{ dispatcher.lang }}" {{ darkpref ? `data-darkmode="${darkpref}"` : '' }}>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
{% if (!darkpref): %}
<script>
var mediaQuery = window.matchMedia('(prefers-color-scheme: dark)'),
rootElement = document.querySelector(':root'),
setDarkMode = function(match) { rootElement.setAttribute('data-darkmode', match.matches) };
mediaQuery.addEventListener('change', setDarkMode);
setDarkMode(mediaQuery);
</script>
{% endif %}
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="darkreader-lock">
<link rel="stylesheet" href="{{ media }}/cascade.css"> <link rel="stylesheet" href="{{ media }}/cascade.css">
<link rel="icon" href="{{ media }}/logo_48.png" sizes="48x48"> <link rel="icon" href="{{ media }}/logo_48.png" sizes="48x48">
<link rel="icon" href="{{ media }}/logo.svg" sizes="any"> <link rel="icon" href="{{ media }}/logo.svg" sizes="any">