Skip to content

Commit

Permalink
Merge pull request #325 from pratikb64/fix-dark-mode-switch
Browse files Browse the repository at this point in the history 
fix: dark mode switcher
  • Loading branch information
@pratikb64
pratikb64 authored Jan 22, 2025
2 parents e75106c + b4c4333 commit a24c8f5
Show file tree
Hide file tree
Showing 2 changed files with 70 additions and 71 deletions.
28 changes: 19 additions & 9 deletions wiki/public/js/wiki.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,18 @@ window.Wiki = class Wiki {
}

set_darkmode_button() {
function getDarkModeState() {
const isUserPreferenceDarkMode = localStorage.getItem("darkMode");
const isSystemPreferenceDarkMode = window.matchMedia?.(
"(prefers-color-scheme: dark)"
)?.matches;
const darkModeState = isUserPreferenceDarkMode
? isUserPreferenceDarkMode == "true"
: isSystemPreferenceDarkMode;

return darkModeState;
}

function switchBanner() {
const altSrc = $(".navbar-brand img").data("alt-src");
const src = $(".navbar-brand img").attr("src");
Expand All @@ -63,24 +75,22 @@ window.Wiki = class Wiki {
$(".navbar-brand img").data("alt-src", src);
}
}
localStorage.setItem("darkMode", $("body").hasClass("dark"));
const darkMode = localStorage.getItem("darkMode");

if (
(!("darkMode" in localStorage) &&
!window.matchMedia?.("(prefers-color-scheme: dark)")?.matches) ||
darkMode === "false"
) {

if (getDarkModeState()) {
$(".sun-moon-container .feather-sun").removeClass("hide");
$("body").addClass("dark");
switchBanner();
} else {
$(".sun-moon-container .feather-moon").removeClass("hide");
$("body").removeClass("dark");
switchBanner();
}

$(".sun-moon-container").on("click", function () {
$(".sun-moon-container .feather-sun").toggleClass("hide");
$(".sun-moon-container .feather-moon").toggleClass("hide");

const currentMode = getDarkModeState();
localStorage.setItem("darkMode", !currentMode);
switchBanner();

$("body").toggleClass("dark");
Expand Down
113 changes: 51 additions & 62 deletions wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
View file
Original file line number Diff line number Diff line change
@@ -1,76 +1,65 @@

<script>
if (window.matchMedia?.("(prefers-color-scheme: dark)")?.matches)
document.body.classList.add("dark");
</script>

<nav class="wiki-navbar navbar navbar-light navbar-expand-lg sticky-top pr-4">
<div class="navbar-brand-container">
<a class="navbar-brand" alt="Go to home page" data-prefix="{{ url_prefix }}" href="{{ url_prefix or "" }}{{ home_page or "/" }}">
{%- if light_mode_logo -%}
<img alt="Logo" data-alt-src="{{ dark_mode_logo }}" src='{{ light_mode_logo }}'>
{%- elif dark_mode_logo -%}
<img alt="Logo" data-alt-src="{{ light_mode_logo }}" src='{{ dark_mode_logo }}'>
{%- elif brand_html -%}
{{ brand_html }}
{%- else -%}
<span>{{ (frappe.get_hooks("brand_html") or [_("Home")])[0] }}</span>
{%- endif -%}
</a>
</div>
<div class="navbar-brand-container">
<a class="navbar-brand" alt="Go to home page" data-prefix="{{ url_prefix }}"
href="{{ url_prefix or "" }}{{ home_page or " /" }}">
{%- if light_mode_logo -%}
<img alt="Logo" data-alt-src="{{ dark_mode_logo }}" src='{{ light_mode_logo }}'>
{%- elif dark_mode_logo -%}
<img alt="Logo" data-alt-src="{{ light_mode_logo }}" src='{{ dark_mode_logo }}'>
{%- elif brand_html -%}
{{ brand_html }}
{%- else -%}
<span>{{ (frappe.get_hooks("brand_html") or [_("Home")])[0] }}</span>
{%- endif -%}
</a>
</div>

{% if navbar_search %}
<div class="d-lg-none mobile-search-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
{%- endif -%}
{% if navbar_search %}
<div class="d-lg-none mobile-search-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
{%- endif -%}

<button class="navbar-toggler" type="button"
data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse wiki-navbar-container" id="navbarSupportedContent">
{% include "wiki/doctype/wiki_page/templates/navbar_items.html" %}
</div>
<div class="form-group mb-0 hide" id="language-switcher">
<select class="form-control"></select>
</div>
<div class="collapse navbar-collapse wiki-navbar-container" id="navbarSupportedContent">
{% include "wiki/doctype/wiki_page/templates/navbar_items.html" %}
</div>
<div class="form-group mb-0 hide" id="language-switcher">
<select class="form-control"></select>
</div>
</nav>


{% if navbar_search %}
<!-- separated the modal to avoid being unresponsive when inside <nav> -->
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<input id="searchInput" type="search" class="form-control" placeholder="Search the docs"/>
<div class="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
</div>
<div class="modal-body">
<div class="overflow-hidden search-dropdown-menu w-100" aria-labelledby="dropdownMenuSearch"></div>
<div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<input id="searchInput" type="search" class="form-control" placeholder="Search the docs" />
<div class="search-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-search">
<circle cx="11" cy="11" r="8"></circle>
<line x1="21" y1="21" x2="16.65" y2="16.65"></line>
</svg>
</div>
</div>
<div class="modal-body">
<div class="overflow-hidden search-dropdown-menu w-100" aria-labelledby="dropdownMenuSearch"></div>
</div>
</div>
</div>
</div>

{% endif %}
{% endif %}

0 comments on commit a24c8f5

Please sign in to comment.