feat(menu): change palette icon to moon + add option to hide search

- a static moon icon is currently commonly used by popular sites such as Facebook and Reddit to represent a light/dark chooser
- fix automatic light/dark theming when the chooser is hidden with `show_day_night` set to `false`
- add boolean `show_search` option to `main_menu` in `params.toml` to hide search button from main (still accessible from the standard / keyboard shortcut)
This commit is contained in:
George Cushen committed 2020-09-20 14:26:29 +01:00
1 parent 73d157ece0
commit c4ce9f5bd3
4 files changed
+9 -7

No files matched your search

+3 -2
View File
@@ -336,9 +336,10 @@
* Change Theme Mode (0: Day, 1: Night, 2: Auto).
* --------------------------------------------------------------------------- */
// TODO: import theme functions from load-theme.js to avoid duplication.
function canChangeTheme() {
// If the theme changer component is present, then user is allowed to change the theme variation.
return $('.js-theme-selector').length;
// If var is set, then user is allowed to change the theme variation.
return Boolean(window.wcDarkLightEnabled);
}
function getThemeMode() {
+1 -1
View File
@@ -5,7 +5,7 @@
function canChangeTheme() {
// If var is set, then user is allowed to change the theme variation.
return Boolean(window.staDarkLightChooser);
return Boolean(window.wcDarkLightEnabled);
}
function initThemeVariation() {
+1 -1
View File
@@ -11,7 +11,7 @@
{{/* Load day/night theme. */}}
{{/* Initialise default theme. */}}
{{ if site.Params.day_night }}
<script>window.staDarkLightChooser = true;</script>
<script>window.wcDarkLightEnabled = true;</script>
{{ end }}
{{ if eq (.Scratch.Get "light") true }}
<script>const isSiteThemeDark = false;</script>
+4 -3
View File
@@ -139,7 +139,8 @@
</div><!-- /.navbar-collapse -->
<ul class="nav-icons navbar-nav flex-row ml-auto d-flex pl-md-2">
{{ if site.Params.search.engine }}
{{ $show_search := site.Params.main_menu.show_search | default true }}
{{ if and site.Params.search.engine $show_search }}
<li class="nav-item">
<a class="nav-link js-search" href="#" aria-label="{{ i18n "search" }}"><i class="fas fa-search" aria-hidden="true"></i></a>
</li>
@@ -148,8 +149,8 @@
{{ $show_day_night := site.Params.main_menu.show_day_night | default true }}
{{ if and site.Params.day_night $show_day_night }}
<li class="nav-item dropdown theme-dropdown">
<a href="#" class="nav-link js-theme-selector" data-toggle="dropdown" aria-haspopup="true">
<i class="fas fa-palette" aria-hidden="true"></i>
<a href="#" class="nav-link" data-toggle="dropdown" aria-haspopup="true">
<i class="fas fa-moon" aria-hidden="true"></i>
</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item js-set-theme-light">