added dark mode switch

marek-guran · Dec 17, 2023 · debfd54 · debfd54
1 parent e798023
commit debfd54
Show file tree

Hide file tree

Showing 22 changed files with 677 additions and 21 deletions.
diff --git a/WebGui/Views/Settings/Index.cshtml b/WebGui/Views/Settings/Index.cshtml
@@ -4,6 +4,14 @@
 }
 
 <div class="container mt-3">
+    <h1 class="left-pill"><strong>Settings</strong></h1>
+    <div class="dark-mode-toggle">
+        <label>
+            <strong>Dark Mode</strong>
+            <input type="checkbox" id="dark-mode-switch" class="switch-checkbox">
+            <span class="slider round"></span>
+        </label>
+    </div>
     <h1 class="left-pill"><strong>Updates</strong></h1>
     <div class="row">
         <div class="col-12 mb-3">
@@ -16,11 +24,53 @@
         </div>
     </div>
     <div class="text-center">
-        <a href="https://github.com/marek-guran/linux-server-info/releases/latest" target="_blank" class="btn btn-primary">Open</a>
+        <a href="https://github.com/marek-guran/linux-server-info/releases/latest" target="_blank" class="btn btn-primary">OPEN</a>
     </div>
 </div>
 
 <script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const switchElement = document.getElementById('dark-mode-switch');
+        const darkMode = getCookie('dark-mode');
+
+        if (darkMode === 'true') {
+            switchElement.checked = true;
+            document.body.classList.add('dark-mode');
+        }
+
+        switchElement.addEventListener('change', function () {
+
+            if (this.checked) {
+                document.body.classList.add('dark-mode');
+                setCookie('dark-mode', 'true', 7);
+            } else {
+                document.body.classList.remove('dark-mode');
+                setCookie('dark-mode', 'false', 7);
+            }
+            location.reload();
+        });
+    });
+
+    function setCookie(name, value, days) {
+        var expires = "";
+        if (days) {
+            var date = new Date();
+            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+            expires = "; expires=" + date.toUTCString();
+        }
+        document.cookie = name + "=" + (value || "") + expires + "; path=/";
+    }
+
+    function getCookie(name) {
+        var nameEQ = name + "=";
+        var ca = document.cookie.split(';');
+        for (var i = 0; i < ca.length; i++) {
+            var c = ca[i];
+            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+    }
     fetch('https://raw.githubusercontent.com/marek-guran/linux-server-info/main/update.json')
         .then(response => response.json())
         .then(data => {

diff --git a/WebGui/Views/Shared/_Layout.cshtml b/WebGui/Views/Shared/_Layout.cshtml
@@ -1,19 +1,31 @@
-<!DOCTYPE html>
+@{
+    var darkModeCookie = Context.Request.Cookies["dark-mode"];
+    var theme = "light";
+
+    if (!string.IsNullOrEmpty(darkModeCookie) && darkModeCookie == "true")
+    {
+        theme = "dark";
+    }
+}
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>@ViewData["Title"]</title>
     <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
-    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true" />
+    <link rel="stylesheet" href="~/css/@(theme).css" asp-append-version="true" />
     <link rel="stylesheet" href="~/Linux_Server_Info.styles.css" asp-append-version="true" />
 </head>
 <body>
     <header>
         <nav class="container navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mt-3 mb-3">
             <div class="container-fluid">
                 <a class="navbar-brand ml-3" href="/">
-                    <img src="~/assets/logo.svg" alt="Logo" style="width: 48px; height: 48px;" />
+                    @{
+                        var logoImage = theme == "dark" ? "logo-dark-mode.svg" : "logo.svg";
+                    }
+                    <img src="~/assets/@logoImage" alt="Logo" style="width: 48px; height: 48px;" />
                 </a>
                 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                         aria-expanded="false" aria-label="Toggle navigation">
@@ -24,23 +36,48 @@
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">
                                 <div class="icon-text">
-                                    <img src="~/assets/@ViewBag.cpuInfo" alt="Hardware Icon" style="height: 48px; width: 48px;">
+                                    @{
+                                        var cpuIcon = "";
+                                        if (theme == "dark")
+                                        {
+                                            if (ViewBag.cpuInfo.EndsWith("cpu.svg"))
+                                            {
+                                                cpuIcon = "cpu-dark-mode.svg";
+                                            }
+                                            else if (ViewBag.cpuInfo.EndsWith("amd.svg"))
+                                            {
+                                                cpuIcon = "amd-dark-mode.svg";
+                                            }
+                                            else
+                                            {
+                                                cpuIcon = ViewBag.cpuInfo;
+                                            }
+                                        }
+                                        else
+                                        {
+                                            cpuIcon = ViewBag.cpuInfo;
+                                        }
+                                    }
+                                    <img src="~/assets/@cpuIcon" alt="Hardware Icon" style="height: 48px; width: 48px;">
                                     <span>Hardware</span>
                                 </div>
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-controller="System" asp-action="Index">
                                 <div class="icon-text">
-                                    <img src="~/assets/@ViewBag.SvgFile" alt="System Icon" style="height: 48px; width: 48px;">
+                                    @{
+                                        var systemIcon = ViewBag.SvgFile.EndsWith("linux.svg") && theme == "dark" ? "linux.svg" : ViewBag.SvgFile;
+                                    }
+                                    <img src="~/assets/@systemIcon" alt="System Icon" style="height: 48px; width: 48px;">
                                     <span>System</span>
                                 </div>
                             </a>
                         </li>
                         <li class="nav-item">
                             <a class="nav-link text-dark" asp-area="" asp-controller="Settings" asp-action="Index">
                                 <div class="icon-text">
-                                    <img src="~/assets/settings.svg" alt="CPU" style="height: 48px; width: 48px;">
+                                    <img src="~/assets/@(theme == "dark" ? "settings-dark-mode.svg" : "settings.svg")" alt="Settings" style="height: 48px; width: 48px;">
                                     <span>Settings</span>
                                 </div>
                             </a>

diff --git a/WebGui/Views/System/Index.cshtml b/WebGui/Views/System/Index.cshtml
@@ -1,6 +1,13 @@
 @model Linux_Server_Info.Models.ServerInfoModel
 @{
     ViewData["Title"] = "System";
+    var darkModeCookie = Context.Request.Cookies["dark-mode"];
+    var theme = "light";
+
+    if (!string.IsNullOrEmpty(darkModeCookie) && darkModeCookie == "true")
+    {
+        theme = "dark";
+    }
 }
 
 <div class="container mt-3">
@@ -30,7 +37,29 @@
     <div class="row">
         <div class="col-6 d-flex justify-content-end">
             <div class="image-container d-flex justify-content-end">
-                <img class="sys-image" src="~/assets/@ViewBag.cpuInfo" alt="CPU Icon">
+                @{
+                    var cpuIcon = "";
+                    if (theme == "dark")
+                    {
+                        if (ViewBag.cpuInfo.EndsWith("cpu.svg"))
+                        {
+                            cpuIcon = "cpu-dark-mode.svg";
+                        }
+                        else if (ViewBag.cpuInfo.EndsWith("amd.svg"))
+                        {
+                            cpuIcon = "amd-dark-mode.svg";
+                        }
+                        else
+                        {
+                            cpuIcon = ViewBag.cpuInfo;
+                        }
+                    }
+                    else
+                    {
+                        cpuIcon = ViewBag.cpuInfo;
+                    }
+                }
+                <img class="sys-image" src="~/assets/@cpuIcon" alt="CPU Icon">
             </div>
         </div>
         <div class="col-6">

diff --git a/WebGui/bin/Debug/net8.0/Linux Server Info.dll b/WebGui/bin/Debug/net8.0/Linux Server Info.dll
diff --git a/WebGui/bin/Debug/net8.0/Linux Server Info.pdb b/WebGui/bin/Debug/net8.0/Linux Server Info.pdb