Enhance theme customization capabilities

This commit introduces several key changes aimed at enhancing the theme customization capabilities across the application. In `MainLayout.razor`, the navigation menu component has been updated from `NavMenuLight` to `NavMenuDark`, indicating a shift towards a darker theme preference for the navigation bar. The `TopNavMenu.razor` file sees the removal of the background color setting, allowing for more flexibility and reliance on CSS for styling, which is further supported by the commenting out of specific color variables in `TopNavMenu.razor.css`. This move suggests a broader effort to transition away from hardcoded color values towards a dynamic, theme-based approach to styling.

Significant updates have been made to the `Home.razor.css`, where the `.splash` class styling now utilizes variables and a new gradient, replacing hardcoded colors and background images. This change supports a more customizable and theme-driven design philosophy.

Additionally, `themeSelector.js` has been enhanced with new functionality that dynamically applies theme variables as CSS custom properties from a fetched SCSS file, indicating a sophisticated approach to theme customization. Although some code has been commented out, it hints at potential future developments for theme manipulation based on the selected theme.

Lastly, the addition of the `NavMenuDark.razor` component aligns with the overall shift towards a darker theme, enriching the site's aesthetic and user experience with a dark-themed navigation bar setup.

These changes collectively represent a significant step forward in making the application's theme more customizable and dynamic, reflecting a thoughtful approach to user interface design and user experience enhancement.

src/Client/Components/Layout/MainLayout.razor

@@ -2,7 +2,7 @@
 
 <div class="d-flex flex-column h-100">
     <!---Top Nav---> 
-    <NavMenuLight />
+    <NavMenuDark />
     <!-- Main -->
    <main class="flex-grow-1 mt-5"> 
         @Body

src/Client/Components/Layout/NavMenuDark.razor

@@ -0,0 +1,56 @@
+<nav class="navbar navbar-expand-lg bg-dark fixed-top mb-5" data-bs-theme="dark">
+    <div class="container">
+        <a class="navbar-brand" href="/">Gerald Ncube</a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarColor01">
+            <ul class="navbar-nav me-auto">
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">Home</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="skills">Skills</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="projects">Projects</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="challenges">Challenges</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="blog">Blog</NavLink>
+                </li>
+                <li class="nav-item">
+                    <NavLink class="nav-link" href="contact">Contact</NavLink>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+                    <div class="dropdown-menu">
+                        <a class="dropdown-item" href="#">Action</a>
+                        <a class="dropdown-item" href="#">Another action</a>
+                        <a class="dropdown-item" href="#">Something else here</a>
+                        <div class="dropdown-divider"></div>
+                        <a class="dropdown-item" href="#">Separated link</a>
+                    </div>
+                </li>
+            </ul>
+            <ul class="navbar-nav ms-md-auto">
+                <li class="nav-item">
+                    <a target="_blank" rel="noopener" class="nav-link" href="https://github.com/thomaspark/bootswatch/">
+                        <i class="bi bi-github"></i><span class="d-lg-none ms-2">GitHub</span>
+                    </a>
+                </li>
+                <li class="nav-item">
+                    <a target="_blank" rel="noopener" class="nav-link" href="https://twitter.com/bootswatch">
+                        <i class="bi bi-twitter"></i><span class="d-lg-none ms-2">Twitter</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
+
+@code {
+
+}

src/Client/Components/Layout/TopNavMenu.razor

@@ -1,5 +1,5 @@
 
-<nav class="navbar navbar-expand-lg fixed-top bg-primary mb-5">
+<nav class="navbar navbar-expand-lg fixed-top mb-5">
     <div class="container">
         <a class="navbar-brand" href="#">Gerald Ncube</a>
         <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">

src/Client/Components/Layout/TopNavMenu.razor.css

@@ -1,7 +1,7 @@
 .navStyle {
-    background-color: var(--cf-theme-900);
+    /*background-color: var(--cf-theme-900);*/
 }
 
 .navbar-nav {
-    --bs-navbar-hover-color: var(--cf-theme-400);
+    /*--bs-navbar-hover-color: var(--cf-theme-400);*/
 }

src/Client/Components/Pages/Home.razor.css

@@ -1,10 +1,16 @@
-.splash {
+
+.splash {
     position: relative;
     padding: 12em 0 6em;
-    color: #fff;
     text-align: center;
-    background-color: #375ee3;
-    background-image: url(../../images/splash.svg), linear-gradient(145deg, #375ee3 0%, #6543e0 80%);
-    background-repeat: no-repeat;
+    color: var(--bs-body-color);
+    background-color: var(--bs-body-bg);
+    /*
+        background-image: url(../../images/splash.svg), linear-gradient(145deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 80%);
+        background-image: url(../../images/splash.svg), linear-gradient(145deg, var(--bs-body-bg) 0%, var(--bs-body-bg) 80%);
+        background-image: url(../../images/splash.svg), linear-gradient(145deg, var(--bs-body-color) 0%, var(--bs-body-color) 80%);
+    */
+
+    background-image: url(../../images/splash.svg), linear-gradient(145deg, #060606 40%, #282828 80%);
     background-size: cover;
 }

src/Client/wwwroot/js/themeSelector.js

@@ -16,13 +16,49 @@
 
                 select.addEventListener('change', (e) => {
                     const theme = themes[e.target.value];
+
+                    // Fetch and apply the theme variables as CSS custom properties
+                    //this.applyThemeVariables(theme.scssVariables);
+
                     document.querySelector('#theme').setAttribute('href', theme.css);
                     document.querySelector('.themeSelector dt').textContent = theme.name;
                     document.querySelector('.themeSelector dd').textContent = theme.description;
+
+                    // Update the top div's class with the selected theme name
+                    //const topDiv = document.querySelector('.top-div'); 
+                    //if (topDiv) {
+                    //    // Remove any previously added theme class
+                    //    topDiv.classList.forEach(className => {
+                    //        if (className.startsWith('theme-')) {
+                    //            topDiv.classList.remove(className);
+                    //        }
+                    //    });
+                    //    // Add the new theme class
+                    //    topDiv.classList.add(`theme-${theme.name.toLowerCase().replace(/\s+/g, '-')}`);
+                    //}
                 });
 
                 const changeEvent = new Event('change');
                 select.dispatchEvent(changeEvent);
             });
+    },
+    applyThemeVariables: function (variablesUrl) {
+        console.log(`Fetching SCSS variables from: ${variablesUrl}`); // Log the URL being fetched
+        fetch(variablesUrl)
+            .then(response => response.text())
+            .then(scss => {
+                console.log(`Fetched SCSS content: ${scss.substring(0, 100)}...`); // Log a snippet of the SCSS content
+                const root = document.documentElement;
+                const lines = scss.split('\n');
+                lines.forEach(line => {
+                    if (line.startsWith('$')) {
+                        const [name, value] = line.split(':').map(part => part.trim());
+                        const cssVarName = name.substring(1); // Remove the '$'
+                        const cssValue = value.split(';')[0]; // Remove the ';' at the end
+                        console.log(`Applying --${cssVarName}: ${cssValue}`); // Log each variable being applied
+                        root.style.setProperty(`--${cssVarName}`, cssValue);
+                    }
+                });
+            });
     }
 };