projects / project / luci.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: cd6ad0a)
luci-theme-bootstrap: add explicit dark/light mode selection
authorJo-Philipp Wich <jo@mein.io>
Sun, 7 Nov 2021 10:04:52 +0000 (11:04 +0100)
committerJo-Philipp Wich <jo@mein.io>
Sun, 7 Nov 2021 10:06:33 +0000 (11:06 +0100)
Register two further "virtual" themes called BootstrapDark and
BootstrapLight which force dark and light mode respectively.

The actual Bootstrap theme itself will continue to auto-select
dark mode preference based on OS/Browser preference settings.

Fixes: #5492
Signed-off-by: Jo-Philipp Wich <jo@mein.io>
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark [new symlink] patch | blob
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light [new symlink] patch | blob
themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css patch | blob | history
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark [new symlink] patch | blob
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light [new symlink] patch | blob
themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm patch | blob | history
themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap patch | blob | history

diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark
new file mode 120000 (symlink)
index 0000000..ac7bcbb
--- /dev/null
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-dark
@@ -0,0 +1 @@
+bootstrap
\ No newline at end of file
diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light
new file mode 120000 (symlink)
index 0000000..ac7bcbb
--- /dev/null
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap-light
@@ -0,0 +1 @@
+bootstrap
\ No newline at end of file
diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
index 4063a39face2a71df4443d07fb81adcbcc86106c..615ce80ea954690b52437a409da1c65e0655ab2a 100644 (file)
--- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
+++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css
@@ -70,18 +70,16 @@
        color-scheme: light dark;
 }
 
-@media (prefers-color-scheme: dark) {
-       :root {
-               --background-color-delta-l-sign: 1;
-               --background-color-high-h: 0;
-               --background-color-high-s: 0%;
-               --background-color-high-l: calc(34 / 255 * 100%);
-               --text-color-delta-l-sign: -1;
-               --text-color-highest-h: 0;
-               --text-color-highest-s: 0%;
-               --text-color-highest-l: 100%;
-               --border-color-delta-l-sign: 1;
-       }
+:root[data-darkmode="true"] {
+       --background-color-delta-l-sign: 1;
+       --background-color-high-h: 0;
+       --background-color-high-s: 0%;
+       --background-color-high-l: calc(34 / 255 * 100%);
+       --text-color-delta-l-sign: -1;
+       --text-color-highest-h: 0;
+       --text-color-highest-s: 0%;
+       --text-color-highest-l: 100%;
+       --border-color-delta-l-sign: 1;
 }
 
 /* Reset.less
diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark
new file mode 120000 (symlink)
index 0000000..ac7bcbb
--- /dev/null
+++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-dark
@@ -0,0 +1 @@
+bootstrap
\ No newline at end of file
diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light
new file mode 120000 (symlink)
index 0000000..ac7bcbb
--- /dev/null
+++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap-light
@@ -0,0 +1 @@
+bootstrap
\ No newline at end of file
diff --git a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
index 6e4861fe0b93b9f5e38baf0036204d0a55023f57..a3f28fd709ab0a620c6bee041ecd4518c6437519 100644 (file)
--- a/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
+++ b/themes/luci-theme-bootstrap/luasrc/view/themes/bootstrap/header.htm
@@ -15,14 +15,32 @@
 
        local node = disp.context.dispatched
 
+       local darkpref
+
+       if theme == "bootstrap-dark" then
+               darkpref = "true"
+       elseif theme == "bootstrap-light" then
+               darkpref = "false"
+       end
+
        -- send as HTML5
        http.prepare_content("text/html")
 -%>
 <!DOCTYPE html>
-<html lang="<%=luci.i18n.context.lang%>">
+<html lang="<%=luci.i18n.context.lang%>"<%= ifattr(darkpref ~= nil, "data-darkmode", darkpref) %>>
        <head>
                <meta charset="utf-8">
                <title><%=striptags( (boardinfo.hostname or "?") .. ( (node and node.title) and ' - ' .. translate(node.title) or '')) %> - LuCI</title>
+               <% if darkpref == nil then %>
+                       <script type="text/javascript">
+                               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>
+               <% end %>
                <meta name="viewport" content="initial-scale=1.0">
                <link rel="stylesheet" href="<%=media%>/cascade.css">
                <link rel="stylesheet" media="only screen and (max-device-width: 854px)" href="<%=media%>/mobile.css" type="text/css" />
diff --git a/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap b/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap
index 4381a15c2e7d1185dd4e32ac3399a0fa73c2cae8..b66e5b2be3934714dcffef6bd4f4b98a627513b8 100755 (executable)
--- a/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap
+++ b/themes/luci-theme-bootstrap/root/etc/uci-defaults/30_luci-theme-bootstrap
@@ -1,12 +1,28 @@
 #!/bin/sh
 
+changed=0
+
+set_opt() {
+       local key=$1
+       local val=$2
+
+       if ! uci -q get "luci.themes.$key" 2>/dev/null; then
+               uci set "luci.themes.$key=$val"
+               changed=1
+       fi
+}
+
+set_opt Bootstrap /luci-static/bootstrap
+set_opt BootstrapDark /luci-static/bootstrap-dark
+set_opt BootstrapLight /luci-static/bootstrap-light
+
 if [ "$PKG_UPGRADE" != 1 ]; then
-       uci get luci.themes.Bootstrap >/dev/null 2>&1 || \
-       uci batch <<-EOF
-               set luci.themes.Bootstrap=/luci-static/bootstrap
-               set luci.main.mediaurlbase=/luci-static/bootstrap
-               commit luci
-       EOF
+       uci set luci.main.mediaurlbase=/luci-static/bootstrap
+       changed=1
+fi
+
+if [ $changed = 1 ]; then
+       uci commit luci
 fi
 
 exit 0
Lua Configuration Interface (mirror)