feat(theme): add switch to select light/dark mode when the default theme is auto

package.json

@@ -34,7 +34,7 @@
     "node-sass": "^8.0.0",
     "prettier": "^2.8.1",
     "riot": "^7.1.0",
-    "riot-mui": "github:joxit/riot-5-mui#a9b0ce4",
+    "riot-mui": "github:joxit/riot-5-mui#b892806",
     "rollup": "^3.9.0",
     "rollup-plugin-app-utils": "^1.0.6",
     "rollup-plugin-copy": "^3.4.0",

src/components/docker-registry-ui.riot

@@ -101,6 +101,9 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         <li>
           <a href="https://github.com/Joxit/docker-registry-ui/blob/main/LICENSE">License AGPL-3.0</a>
         </li>
+        <li if="{ props.theme === 'auto' }">
+          <material-switch on-change="{ onThemeChange }" checked="{ state.themeSwitch }"></material-switch>
+        </li>
       </ul>
     </material-footer>
   </footer>
@@ -156,7 +159,8 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         this.state.catalogElementsLimit = props.catalogElementsLimit || 100000;
         this.state.pullUrl = this.pullUrl(this.state.registryUrl, props.pullUrl);
         this.state.useControlCacheHeader = props.useControlCacheHeader;
-        loadTheme(props, this.root.parentNode.style);
+        const theme = loadTheme(props, this.root.parentNode.style);
+        this.state.themeSwitch = theme === 'dark';
       },
       onServerChange(registryUrl) {
         this.update({
@@ -216,6 +220,11 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
           filter: value,
         });
       },
+      onThemeChange(e) {
+        const theme = e.target.checked ? 'dark' : 'light';
+        loadTheme({ ...this.props, theme }, this.root.parentNode.style);
+        this.update({ themeSwitch: e.target.checked });
+      },
       baseRoute: '([^#]*?)/(\\?[^#]*?)?(#!)?(/?)',
       router,
       version,

src/index.js

@@ -13,6 +13,7 @@ import {
   MaterialDropdown,
   MaterialPopup,
   MaterialInput,
+  MaterialSwitch,
 } from 'riot-mui';
 
 import DockerRegistryUI from './components/docker-registry-ui.riot';
@@ -31,6 +32,7 @@ register('material-tabs', MaterialTabs);
 register('material-dropdown', MaterialDropdown);
 register('material-popup', MaterialPopup);
 register('material-input', MaterialInput);
+register('material-switch', MaterialSwitch);
 
 const createApp = component(DockerRegistryUI);
 const tags = document.getElementsByTagName('docker-registry-ui');

src/scripts/theme.js

@@ -42,10 +42,12 @@ const preferDarkMode = ({ theme }) => {
 };
 
 export const loadTheme = (props, style) => {
-  THEME = preferDarkMode(props) ? DARK_THEME : LIGHT_THEME;
+  const isDarkMode = preferDarkMode(props);
+  THEME = isDarkMode ? { ...DARK_THEME } : { ...LIGHT_THEME };
   Object.entries(props)
     .filter(([k, v]) => v && /^theme[A-Z]/.test(k))
     .map(([k, v]) => [normalizeKey(k), v])
     .forEach(([k, v]) => (THEME[k] = v));
   Object.entries(THEME).forEach(([k, v]) => style.setProperty(`--${k}`, v));
+  return isDarkMode ? 'dark' : 'light';
 };

src/style.scss

@@ -26,6 +26,7 @@
 @import 'riot-mui/src/material-elements/material-dropdown/material-dropdown.scss';
 @import 'riot-mui/src/material-elements/material-popup/material-popup.scss';
 @import 'riot-mui/src/material-elements/material-input/material-input.scss';
+@import 'riot-mui/src/material-elements/material-switch/material-switch.scss';
 
 @import './roboto.scss';
 @import './material-icons.scss';