Add dark mode

src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/Views/Shared/_Layout.cshtml

@@ -36,7 +36,13 @@
                 <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">TechCommunityCalendar.com</a>
                 <a class="nav-link text-light" asp-area="" asp-controller="Map" asp-action="Index">Map</a>
                 <a class="nav-link text-dark btn-light btn-sm" asp-area="" asp-controller="AddEvent" asp-action="Index">Add Event <i class="bi bi-plus-circle-fill"></i></a>
-
+                <div class="theme-switch-wrapper">
+                    <div class="navPadding">Dark Theme</div>
+                    <label class="theme-switch" for="checkbox">
+                        <input type="checkbox" id="checkbox" />
+                        <span class="slider round"></span>
+                    </label>
+                </div>
             </div>
         </nav>
     </header>
@@ -97,6 +103,7 @@
     <script src="~/lib/jquery/dist/jquery.min.js"></script>
     <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
     <script src="~/js/site.js" asp-append-version="true"></script>
+    <script src="~/js/darkTheme.js" asp-append-version="true"></script>
     @RenderSection("Scripts", required: false)
 
     <script>

src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/css/site.css

@@ -114,10 +114,118 @@ img#logo {
     align-items: center;
 }
 
+
     .flex-container > div.event-type {
         margin: 0 15px 0px 15px;
     }
 
+
+/*Toggle switch styling*/
+.theme-switch-wrapper {
+    display: flex;
+    align-items: center;
+    position: absolute;
+    top: 10px;
+    right: 70px;
+}
+
+.theme-switch {
+    display: inline-block;
+    height: 34px;
+    position: relative;
+    width: 60px;
+}
+
+    .theme-switch input {
+        display: none;
+    }
+
+.slider {
+    background-color: #ccc;
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    transition: .4s;
+}
+
+    .slider:before {
+        background-color: #fff;
+        bottom: 4px;
+        content: "";
+        height: 26px;
+        left: 4px;
+        position: absolute;
+        transition: .4s;
+        width: 26px;
+    }
+
+input:checked + .slider {
+    background-color: #66bb6a;
+}
+
+    input:checked + .slider:before {
+        transform: translateX(26px);
+    }
+
+.slider.round {
+    border-radius: 34px;
+}
+
+    .slider.round:before {
+        border-radius: 50%;
+    }
+
+/* Adding theme support */
+:root {
+    --primary-color: #424242;
+    --secondary-color: #536390;
+    --font-color: #424242;
+    --bg-color: #fff;
+    --heading-color: #292922;
+    --nav-toggle-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+[data-theme="dark"] {
+    --primary-color: #9A97F3;
+    --secondary-color: #818cab;
+    --font-color: #e1e1ff;
+    --bg-color: #161625;
+    --heading-color: #818cab;
+    --nav-toggle-icon: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
+}
+
+body {
+    color: var(--font-color);
+    background-color: var(--bg-color);
+}
+
+.navbar {
+    color: var(--font-color) !important;
+    background-color: var(--bg-color) !important;
+}
+
+a.navbar-brand {
+    color: var(--font-color) !important;
+    background-color: var(--bg-color) !important;
+}
+
+.nav-link {
+    color: var(--font-color) !important;
+    background-color: var(--bg-color) !important;
+}
+
+.navbar-toggler-icon {
+    background-image: var(--nav-toggle-icon);
+}
+
+.navPadding {
+    padding-right: 8px;
+}
+
+
 /* 
   ##Device = Most of the Smartphones Mobiles (Portrait)
   ##Screen = B/w 320px to 479px

src/TechCommunityCalendar.Solution/TechCommunityCalendar.CoreWebApplication/wwwroot/js/darkTheme.js

@@ -0,0 +1,23 @@
+const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
+const currentTheme = localStorage.getItem('theme');
+
+if (currentTheme) {
+    document.documentElement.setAttribute('data-theme', currentTheme);
+
+    if (currentTheme === 'dark') {
+        toggleSwitch.checked = true;
+    }
+}
+
+function switchTheme(e) {
+    if (e.target.checked) {
+        document.documentElement.setAttribute('data-theme', 'dark');
+        localStorage.setItem('theme', 'dark');
+    }
+    else {        document.documentElement.setAttribute('data-theme', 'light');
+          localStorage.setItem('theme', 'light');
+    }    
+}
+
+toggleSwitch.addEventListener('change', switchTheme, false);
+