Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Refactor theme toggle implementation in JavaScript and HTML for improved clarity and functionality

Browse source
This commit is contained in:
Théophile Diot 2025-01-07 14:31:26 +01:00
parent 10a19fc72c
commit 4846000ad4
No known key found for this signature in database
GPG key ID: FA995104A0BA376A
2 changed files with 5 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/ui/app/static/js/utils.js
View file

@ -450,6 +450,7 @@ $(document).ready(() => {
// If endpoint is "setup", ignore the theme change
if (window.location.pathname.includes("/setup")) return;
$themeSelector = $("#theme-toggle");
const darkMode = $(this).prop("checked");
if (darkMode) {
$("html")
@ -467,6 +468,7 @@ $(document).ready(() => {
$(".dark-mode-toggle-icon").removeClass("bx-sun").addClass("bx-moon");
$("[alt='BunkerWeb logo']").attr("src", $("#bw-logo-white").val());
$("[alt='User Avatar']").attr("src", $("#avatar-url-white").val());
$themeSelector.find("option[value='dark']").prop("selected", true);
} else {
$("html")
.removeClass("dark-style dark")
@ -483,6 +485,7 @@ $(document).ready(() => {
$(".dark-mode-toggle-icon").removeClass("bx-moon").addClass("bx-sun");
$("[alt='BunkerWeb logo']").attr("src", $("#bw-logo").val());
$("[alt='User Avatar']").attr("src", $("#avatar-url").val());
$themeSelector.find("option[value='light']").prop("selected", true);
}
$("#theme").val(darkMode ? "dark" : "light");

4
src/ui/app/templates/profile.html
View file

@ -173,14 +173,14 @@
<div class="col-md-6">
<!-- Theme -->
<div class="card position-relative">
<i class='bx bx-{% if theme == 'light' %}sun{% else %}moon{% endif %} bx-sm position-absolute top-0 end-0 m-3'></i>
<i class='bx bx-{% if theme == 'light' %}sun{% else %}moon{% endif %} bx-sm position-absolute top-0 end-0 m-3 dark-mode-toggle-icon'></i>
<h5 class="card-header">Change Theme</h5>
<div class="card-body pb-4">
<form method="POST" action="{{ profile_url }}/edit">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<div class="row g-3">
<div class="col-md-12 form-floating">
<select class="form-select" id="theme" name="theme">
<select class="form-select" id="theme-toggle" name="theme">
<option value="light" {% if theme == "light" %}selected{% endif %}>Light</option>
<option value="dark" {% if theme == "dark" %}selected{% endif %}>Dark</option>
</select>