Почему не сохраняются настройки темы?

Question

Виктория Кабишова @Parsifal31017

Программист

Почему не сохраняются настройки темы?

Здравствуйте, мне в проекте нужно сделать поддержку 2 тем (светлой и темной). Я уже сделала переключение между темами

@using Microsoft.AspNetCore.Mvc.Localization
@inject IViewLocalizer Localizer

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"]SiteAds</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" type="text/css" href="/css/dark.css">
    <link rel="stylesheet" type="text/css" href="/css/light.css" id="theme-link">
</head>
<body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm border-bottom box-shadow mb-3">
            <div class="container">
                <a class="navbar-brand" asp-area="" asp-page="/Index">SiteAds</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-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="/Company/Index">@Localizer["Компании"]</a>
                        </li>
                        @*<li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Ads/Index">@Localizer["Объявления"]</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/User/Index">@Localizer["Администраторы"]</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Departments/Index">@Localizer["Отделы"]</a>
                        </li>*@
                        <li class="nav-item">
                            <button id="theme-button" type="button" name="Topic" class="form-control">@Localizer["Сменить тему"]</button>
                        </li>
                        <li class="nav-item">
                            <button type="button" name="Language" class="form-control">@Localizer["Сменить язык"]</button>
                        </li>
                    </ul>
                    <partial name="_LoginPartial" />
                </div>
            </div>
        </nav>
    </header>
    <div class="container">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
    </div>

    <footer class="border-top footer text-muted">
        <div class="container">
            &copy; 2021 - MyWebSite - <a asp-area="" asp-page="/Privacy">@Localizer["Конфиденциальность"]</a>
            <a asp-area="" asp-page="/About">@Localizer["Информация"]</a>
        </div>
    </footer>
}

    <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 type="text/javascript" src="/js/ChangeTheme.js"></script>

    @await RenderSectionAsync("Scripts", required: false)
</body>
</html>

light.css

body
{
    background: #f4f4f4;
    color: #111;
}

.header
{
    background: #4a76a8;
    color: #f4f4f4;
}

.nav__item
{
    color: #f4f4f4;
    background: #4a76a8;
}

.nav__item:hover, .nav__item_active
{
    background: #4f7faf;
}

.theme-button
{
    color: #f4f4f4;
    background: #444;
}

.theme-button:hover
{
    background: #555;
}

dark.css

body
{
    background: #111;
    color: #f4f4f4;
}

.header
{
    background: #373737;
    color: #f4f4f4;
}

.nav__item
{
    color: #f4f4f4;
    background: #373737;
}

.nav__item:hover, .nav__item_active
{
    background: #444;
}

.theme-button
{
    color: #f4f4f4;
    background: #4f7faf;
}

.theme-button:hover
{
    background: #6f9fcf;
}

ChangeTheme.js

var btn = document.getElementById("theme-button");
var link = document.getElementById("theme-link");

btn.addEventListener("click", function () { ChangeTheme(); });

function ChangeTheme()
{
    let lightTheme = "styles/light.css";
    let darkTheme = "styles/dark.css";

    var currTheme = link.getAttribute("href");
    var theme = "";

    if(currTheme == lightTheme)
    {
   	 currTheme = darkTheme;
   	 theme = "dark";
    }
    else
    {    
   	 currTheme = lightTheme;
   	 theme = "light";
    }

    link.setAttribute("href", currTheme);

    Save(theme);
}

Только вот я не знаю как сохранить изменения (я в проекте использую C#)? я пыталась сохранить изменения с помощью http:////metanit.com/sharp/aspnet5/21.3.php, но у меня не вышло. Можете подсказать как можно по другому сохранить изменения? (Например: cookie)
Вот на всякий случай ссылка на Git- https://github.com/Parsifal31017/MyWebSite.git

Заранее спасибо.