Задать вопрос
@Parsifal31017
Программист
веб-разработка

Почему результат не сохраняется при изменении темы?

Здравствуйте, я делаю сайт для проведения краудфаундинговых компаний. Ина этом сайте должно быть светлая/темная тема. Я сделала темы, но при изменении с светлой на темную, результат не сохраняется и я не понимаю почему.
@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">
                            <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>


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;
    }


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;
    }


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

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

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

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

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

    link.setAttribute("href", currTheme);

    Save ( document.cookie );
}

document.cookie = "theme=Topic"; 
alert(document.cookie);

  function setCookie(name, value, options = {}) {

    options = {
      path: '/',
      ...options
    };
  
    if (options.expires instanceof Date) {
      options.expires = options.expires.toUTCString();
    }
  
    let updatedCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);
  
    for (let optionKey in options) {
      updatedCookie += "; " + optionKey;
      let optionValue = options[optionKey];
      if (optionValue !== true) {
        updatedCookie += "=" + optionValue;
      }
    }
  
    document.cookie = updatedCookie;
  }
  
  setCookie('theme', 'Topic', {secure: true, 'max-age': 5000});

  function deleteCookie(name) {
    setCookie(name, "", {
      'max-age': -1
    })
  }


Заранее спасибо
  • Вопрос задан
  • 41 просмотр
Комментировать
Подписаться 1 Простой Комментировать
Решения вопроса 1
boyarskiy_mihail
@boyarskiy_mihail
Что под функцией Save ?
Еще нужно при обновлении страницы брать значение из куки текущей темы и подставлять в элемент.
Зачем использовать куки, если выбор темы это только для пользователя? Или в запросах к бекенду нужно учитывать какая тема у пользователя? По мне так проще использовать localStorage.
const link = document.getElementById('theme-link');
const lightTheme = '/css/light.css';
const darkTheme = '/css/dark.css';
let currentTheme = localStorage.getItem('theme');

(function(){
    if( !currentTheme ) {
        currentTheme = lightTheme;
        localStorage.setItem('theme', currentTheme);
    }
    link.setAttribute('href', currentTheme);
})();

document.getElementById('theme-button').addEventListener('click', e => {
    e.preventDefault();
    if( currentTheme == darkTheme ) {
        currentTheme = lightTheme;
    }else {
        currentTheme = darkTheme;
    }
    link.setAttribute('href', currentTheme);
    localStorage.setItem('theme', currentTheme);
});
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
Frontend разработчик
Idea Platform • Москва
от 60 000 до 160 000 ₽
FullStack GameDev Developer (remote)
Wind4Tune
от 60 000 ₽
Project Manager в IT
Wanted. • Ростов-на-Дону
До 160 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сортировка товаров в каталоге на Битрикс
18 дек. 2024, в 16:42
2000 руб./за проект
Разработка ПК игры
18 дек. 2024, в 16:33
2000 руб./в час
Внести изменения на сайт Битрикс
18 дек. 2024, в 16:06
5000 руб./за проект
Ещё заказы