Guide on switching the theme color in c# aspnet core using a toggle button within a partialview

Question

Guide on switching the theme color in c# aspnet core using a toggle button within a partialview

Description

I am looking to change the color scheme of my Bootstrap 5.3 theme by clicking a button within a partial view.

The toggle button is customized to meet my specific requirements, and the chosen value is stored in a cookie for future reference.

This partial view will be integrated into the navigation menu.

Despite extensive efforts, I have not been able to find a suitable solution for this particular scenario.

Query

What is the correct approach to implementing this functionality?

Code snippet from the partial view

@{

static void ToggleTheme()
{
    string bg = HttpContext.Request?.Cookies["mybg"]?.ToString();

    if (bg == "light" || bg == null)
    {
        HttpContext.Response.Cookies.Delete("mybg");
        HttpContext.Response.Cookies.Append("mybg", "dark");
    }
    else
    {
        HttpContext.Response.Cookies.Delete("mybg");
        HttpContext.Response.Cookies.Append("mybg", "light");
    }
}

}

<button type="submit" name="submit" class="btn btn-sm btn-outline-light" onclick="ToggleTheme()">

Theme

javascript c#asp.net-mvc asp.net-core bootstrap-5

Answer 1

Answer №1

Here is a demonstration that you can easily follow:

Partial View (located in Pages/Shared or Views/Shared folder)

@inject Microsoft.AspNetCore.Http.IHttpContextAccessor HttpContextAccessor
@{
    // Retrieve the current theme preference from the cookie
    string currentTheme = HttpContextAccessor.HttpContext.Request?.Cookies["mybg"]?.ToString();
}
<button type="submit" name="submit" class="btn btn-sm btn-outline-light" onclick="ToggleTheme()">ChangeTheme</button>
<script>
    // Function to switch between themes and store the preference in a cookie
    function ToggleTheme() {
        var currentTheme = document.body.classList.contains('theme-dark') ? 'light' : 'dark';

        // Switch the theme class on the body element
        document.body.classList.toggle('theme-dark');

        // Store the theme preference in a cookie
        document.cookie = "mybg=" + currentTheme + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
    }

    // Set initial theme based on the cookie value
    window.onload = function () {
        var currentTheme = "@currentTheme";
        if (currentTheme === "dark") {
            document.body.classList.add('theme-dark');
        }
    };
</script>
<style>
    .theme-dark {
        background-color: #1f1f1f; /* Dark background color */
        color: #ffffff; /* Light text color on dark background */
        /* Additional styles for dark-themed elements */
    }
</style>

Layout

<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container">
        <a class="navbar-brand" asp-area="" asp-page="/Index">IdentityProj8</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">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                </li>
            </ul>
            <partial name="_Partial" />
        </div>
    </div>
</nav>

Answer 2

Here is a demonstration that you can easily follow:

Partial View (located in Pages/Shared or Views/Shared folder)

@inject Microsoft.AspNetCore.Http.IHttpContextAccessor HttpContextAccessor
@{
    // Retrieve the current theme preference from the cookie
    string currentTheme = HttpContextAccessor.HttpContext.Request?.Cookies["mybg"]?.ToString();
}
<button type="submit" name="submit" class="btn btn-sm btn-outline-light" onclick="ToggleTheme()">ChangeTheme</button>
<script>
    // Function to switch between themes and store the preference in a cookie
    function ToggleTheme() {
        var currentTheme = document.body.classList.contains('theme-dark') ? 'light' : 'dark';

        // Switch the theme class on the body element
        document.body.classList.toggle('theme-dark');

        // Store the theme preference in a cookie
        document.cookie = "mybg=" + currentTheme + "; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
    }

    // Set initial theme based on the cookie value
    window.onload = function () {
        var currentTheme = "@currentTheme";
        if (currentTheme === "dark") {
            document.body.classList.add('theme-dark');
        }
    };
</script>
<style>
    .theme-dark {
        background-color: #1f1f1f; /* Dark background color */
        color: #ffffff; /* Light text color on dark background */
        /* Additional styles for dark-themed elements */
    }
</style>

Layout

<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container">
        <a class="navbar-brand" asp-area="" asp-page="/Index">IdentityProj8</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">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
                </li>
            </ul>
            <partial name="_Partial" />
        </div>
    </div>
</nav>

Guide on switching the theme color in c# aspnet core using a toggle button within a partialview

Answer №1

Similar questions

How can I pass my cookie token in a Next.js server-side component request?

Attempting to showcase the data stored within MongoDB documents on my website's user interface

Converting Database Information to JSON Format for Mobile Authentication Form

Is there a way to ensure my chat view functions properly without relying on partial views?

Using jQuery to fetch data asynchronously

Encountering issues with returning values correctly when using module.exports in Node.js

Enhance the Angular KendoGrid excelExport feature with a custom column addition event

The function e.preventDefault() appears to be ineffective when applied to both the submit button and anchor tag within an

Ways to quickly terminate a pipeline in a JavaScript transformation

Plugin for creating a navigation bar with a jQuery and Outlook-inspired style

Accessing the Angular scope and making modifications using Chrome browser

Ways to navigate through a webpage without encountering any overflow issues

Challenge with Angular *ngFor: Struggling to Access Previous Elements

When using Vuejs + Laravel to make an Ajax request, only the most recent information entered into the view is submitted

Convert the existing JavaScript code to TypeScript in order to resolve the implicit error

Is it possible to showcase a dropdown list within a constantly changing table?

Error: A SyntaxError was encountered due to a missing closing parenthesis after an argument list while writing JavaScript within PHP code

I encountered an error of "Unexpected token '>'" while working with an

js issue with passing form data to use with PHP mail function

Using TypeScript to filter and compare two arrays based on a specific condition