Как переключить цвет темы в ядре C# aspnet с помощью кнопки переключения внутри partalview?
Объяснение
Я хочу переключить цвет темы начальной загрузки 5.3 с помощью кнопки внутри частичного просмотра.
Кнопка переключения настраивается в соответствии с моими конкретными потребностями, а значение сохраняется в файле cookie, который я вызываю при необходимости.
Частичный вид будет включен в меню панели навигации.
По какой-то странной причине мне не удается найти подходящее решение для этого случая.
Вопрос
Как это можно реализовать, какой правильный путь?
Код частичного просмотра
@{
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()">
Тема
@RahulSharma Мне нужно сохранить его в файле cookie, потому что таким образом я смогу сохранить эти настройки на более длительное время. Если вы можете указать мне на какую-нибудь реализацию с помощью jquery, я был бы очень признателен.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Простая демонстрация, которой вы можете следовать:
Частичный просмотр (находится в папке Pages/Shared или Views/Shared)
@inject Microsoft.AspNetCore.Http.IHttpContextAccessor HttpContextAccessor
@{
// Read 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 toggle the theme and save preference in a cookie
function ToggleTheme() {
var currentTheme = document.body.classList.contains('theme-dark') ? 'light' : 'dark';
// Toggle theme class on the body element
document.body.classList.toggle('theme-dark');
// Save 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
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 theme elements */
}
</style>
Макет
<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>
спасибо за код, это очень полезно. Почему он возвращается к значению по умолчанию (тема-свет) при обновлении страницы?
Привет @Fillo, тема вернется к теме по умолчанию только в том случае, если срок действия файла cookie истек или он был удален. В моем проекте это не приведет к тому, что я установил файл cookie в js с истекшим сроком действия expires=Fri, 31 Dec 9999 23:59:59 GMT. Возможно, вам нужно проверить, почему срок действия установленного файла cookie истек или удален.
Странно то, что я ничего не менял и не удалял, это просто код, который вы опубликовали, я просто скопировал/вставил.
Возникла проблема с моим приложением. Я создал новый, и он работает безупречно. Спасибо.
Почему бы не сделать это, используя
JavascriptилиJquery, если вы его используете?