Add Theme switcher

mohdali · Oct 13, 2023 · fe418ff · fe418ff
1 parent eedac10
commit fe418ff
Show file tree

Hide file tree

Showing 9 changed files with 136 additions and 30 deletions.
diff --git a/src/mohdali.github.io/Components/ThemeProvider.razor b/src/mohdali.github.io/Components/ThemeProvider.razor
@@ -0,0 +1,3 @@
+@inherits BaseMudThemeProvider
+
+@((MarkupString)BuildTheme())
diff --git a/src/mohdali.github.io/Components/ThemeSwitcher.razor b/src/mohdali.github.io/Components/ThemeSwitcher.razor
@@ -0,0 +1,54 @@
+<MudTooltip Text="Switch Theme">
+    <MudIconButton @ref="@_iconButton" Icon="@(_selectedTheme == ThemeOption.System? @Icons.Material.Filled.AutoMode :
+        _selectedTheme == ThemeOption.Dark? @Icons.Material.Outlined.DarkMode :
+        @Icons.Material.Outlined.LightMode)" OnClick="@ToggleMode" />
+</MudTooltip>
+
+@code {
+
+    public enum ThemeOption
+    {
+        System,
+        Dark,
+        Light,
+    }
+
+    [Inject]
+    private IJSRuntime JsRuntime { get; set; } = null!;
+
+    private MudIconButton _iconButton;
+    private ThemeOption _selectedTheme;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+
+        var theme = await JsRuntime.InvokeAsync<string>("getTheme");
+
+        if (Enum.TryParse<ThemeOption>(theme, out _selectedTheme))
+        {
+            await JsRuntime.InvokeVoidAsync("setTheme");
+        }
+    }
+
+    private async Task ToggleMode()
+    {
+        switch (_selectedTheme)
+        {
+            case ThemeOption.Dark:
+                _selectedTheme = ThemeOption.Light;
+                break;
+            case ThemeOption.Light:
+                _selectedTheme = ThemeOption.System;
+                break;
+            default:
+                _selectedTheme = ThemeOption.Dark;
+                break;
+
+        }
+
+        await JsRuntime.InvokeVoidAsync("storeTheme", _selectedTheme.ToString());
+
+        await JsRuntime.InvokeVoidAsync("setTheme");
+    }
+}
diff --git a/src/mohdali.github.io/Shared/MainLayout.razor b/src/mohdali.github.io/Shared/MainLayout.razor
@@ -1,14 +1,20 @@
 @inherits LayoutComponentBase
 
-<MudThemeProvider @ref="@_mudThemeProvider" IsDarkMode="true" />
+<MudThemeProvider />
+<ThemeProvider IsDarkMode="true" Theme="@_darkTheme"/>
+
 <MudDialogProvider />
 <MudSnackbarProvider />
 
 
 <MudLayout>
     <MudAppBar Color="Color.Primary">
-        <MudIconButton Icon="@Icons.Material.Filled.Home" href="/" />
-        <MudText Typo="Typo.h5" class="ml-3">mohdali.dev</MudText>
+        <MudTooltip Text="Home">
+            <MudIconButton Icon="@Icons.Material.Filled.Home" href="/" />
+        </MudTooltip>
+        <MudLink Typo="Typo.h5" class="ml-3 logo" Href="/" Color="Color.Default">mohdali.dev</MudLink>
+        <MudSpacer />
+        <ThemeSwitcher />
 
     </MudAppBar>
     <MudMainContent class="main-content mb-16">
@@ -20,16 +26,27 @@
     <MudAppBar Bottom="true" Fixed="true" Color="Color.Dark" Elevation="1">
         <p>&copy; Mohamed Ali</p>
         <MudSpacer />
-        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Target="_blank" href="https://github.com/mohdali/" />
-        <MudIconButton Icon="@Icons.Custom.Brands.Twitter" Target="_blank" href="https://twitter.com/mohdali" />
-        <MudIconButton Icon="fab fa-mastodon" Target="_blank" Href="https://mastodon.online/&#64;mohdali" />
-        <MudIconButton Icon="@observableIcon" Target="_blank" href="https://observablehq.com/&#64;mohdali" />
+        <MudTooltip Text="Github Profile">
+            <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Target="_blank" href="https://github.com/mohdali/" />
+        </MudTooltip>
+        <MudTooltip Text="Twitter Profile">
+            <MudIconButton Icon="@Icons.Custom.Brands.Twitter" Target="_blank" href="https://twitter.com/mohdali" />
+        </MudTooltip>
+        <MudTooltip Text="Mastodon Profile">
+            <MudIconButton Icon="fab fa-mastodon" Target="_blank" Href="https://mastodon.online/&#64;mohdali" />
+        </MudTooltip>
+        <MudTooltip Text="Observalbe Profile">
+            <MudIconButton Icon="@observableIcon" Target="_blank" href="https://observablehq.com/&#64;mohdali" />
+        </MudTooltip>
     </MudAppBar>
 </MudLayout>
 
 @code {
-    private bool _isDarkMode;
-    private MudThemeProvider _mudThemeProvider;
+    private MudTheme _darkTheme = new () {
+        PseudoCss = new() {
+            Scope = "is(.dark-theme)"
+        }
+    };
 
     private string observableIcon = @"
 <svg viewBox='0 0 25 28' fill='currentColor' class='bi' width='24' height='24'>
@@ -46,19 +63,5 @@
 17.25 12.5 17.25C13.3885 17.25 14.124 16.9315 14.7063 16.2945ZM12.5 27C19.4031 27 25 21.1792 25 14C25 6.82075 19.4031 1
 12.5 1C5.59687 1 0 6.82075 0 14C0 21.1792 5.59687 27 12.5 27Z'></path></svg>
 ";
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        if (firstRender)
-        {
-            _isDarkMode = await _mudThemeProvider.GetSystemPreference();
-            await _mudThemeProvider.WatchSystemPreference(OnSystemPreferenceChanged);
-            StateHasChanged();
-        }
-    }
 
-    private async Task OnSystemPreferenceChanged(bool newValue)
-    {
-        _isDarkMode = newValue;
-        StateHasChanged();
-    }
 }
diff --git a/src/mohdali.github.io/Shared/NavMenu.razor b/src/mohdali.github.io/Shared/NavMenu.razor
diff --git a/src/mohdali.github.io/Shared/NavMenu.razor.css b/src/mohdali.github.io/Shared/NavMenu.razor.css
diff --git a/src/mohdali.github.io/_Imports.razor b/src/mohdali.github.io/_Imports.razor
@@ -9,4 +9,5 @@
 @using BlogEngine
 @using mohdali.github.io
 @using mohdali.github.io.Shared
+@using mohdali.github.io.Components
 @using MudBlazor
diff --git a/src/mohdali.github.io/wwwroot/css/app.css b/src/mohdali.github.io/wwwroot/css/app.css
@@ -13,4 +13,13 @@ h1:focus {
 .post p {
     margin-top: 1em;
     margin-bottom: 1em;
+}
+
+.logo {
+    color: #FFF;
+    text-decoration: none;
+}
+
+.logo:hover {
+    text-decoration: none !important; 
 }
diff --git a/src/mohdali.github.io/wwwroot/index.html b/src/mohdali.github.io/wwwroot/index.html
@@ -13,8 +13,7 @@
     <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" rel="stylesheet" />
     <link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
 
-    <link href="css/app.css" rel="stylesheet" />    
-    <link href="mohdali.github.io.styles.css" rel="stylesheet" />
+    <link href="css/app.css" rel="stylesheet" />
 </head>
 
 <body>
@@ -29,6 +28,8 @@
     <script src="_content/MudBlazor/MudBlazor.min.js"></script>
 
     <script src="_content/BlogEngine/BlogEngine.min.js"></script>
+
+    <script src="js/app.js"></script>
 
     <script src="_framework/blazor.webassembly.js"></script>
     <!-- Google tag (gtag.js) -->

diff --git a/src/mohdali.github.io/wwwroot/js/app.js b/src/mohdali.github.io/wwwroot/js/app.js
@@ -0,0 +1,40 @@
+'use strict'
+
+const ThemeOption = {
+    System: "System",
+    Dark: "Dark",
+    Light: "Light"
+}
+
+window.getTheme = () => localStorage.getItem('theme');
+
+window.storeTheme = theme => localStorage.setItem('theme', theme);
+
+window.getThemePreference = () => {
+    const theme = getTheme()
+
+    if (theme && theme != ThemeOption.System)
+        return theme;
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'Dark' : 'Light'
+}
+
+window.setTheme = () => {
+    const theme = getThemePreference();
+
+    if (theme == ThemeOption.Dark) {
+        document.body.classList.add(
+            'dark-theme'
+        );
+    }
+    else {
+        document.body.classList.remove(
+            'dark-theme'
+        );
+    }
+}
+
+window.onload = (event) => {
+    console.log("Hello World!");
+    setTheme();
+};