feat: clarify day/night modes in appearance chooser

Rather than a 3-way icon-based toggle through light, dark, and automatic modes, present the user with a dropdown list of modes displayed in full textual representation.

Adds language pack options for translating `theme_light`, `theme_dark`, and `theme_auto`.

See #1596

assets/js/academic.js

@@ -338,26 +338,26 @@
 
   function canChangeTheme() {
     // If the theme changer component is present, then user is allowed to change the theme variation.
-    return $('.js-dark-toggle').length;
+    return $('.js-theme-selector').length;
   }
 
   function getThemeMode() {
     return parseInt(localStorage.getItem('dark_mode') || 2);
   }
 
-  function changeThemeModeClick() {
+  function changeThemeModeClick(newMode) {
+    console.info('Request to set theme.');
     if (!canChangeTheme()) {
+      console.info('Cannot set theme - admin disabled theme selector.');
       return;
     }
-    let $themeChanger = $('.js-dark-toggle i');
-    let currentThemeMode = getThemeMode();
     let isDarkTheme;
-    switch (currentThemeMode) {
+    switch (newMode) {
       case 0:
         localStorage.setItem('dark_mode', '1');
         isDarkTheme = 1;
         console.info('User changed theme variation to Dark.');
-        $themeChanger.removeClass('fa-moon fa-sun').addClass('fa-palette');
+        showActiveTheme(0);
         break;
       case 1:
         localStorage.setItem('dark_mode', '2');
@@ -371,18 +371,41 @@
           isDarkTheme = isSiteThemeDark;  // Use the site's default theme variation based on `light` in the theme file.
         }
         console.info('User changed theme variation to Auto.');
-        $themeChanger.removeClass('fa-moon fa-palette').addClass('fa-sun');
+        showActiveTheme(1);
         break;
       default:
         localStorage.setItem('dark_mode', '0');
         isDarkTheme = 0;
         console.info('User changed theme variation to Light.');
-        $themeChanger.removeClass('fa-sun fa-palette').addClass('fa-moon');
+        showActiveTheme(2);
         break;
     }
     renderThemeVariation(isDarkTheme);
   }
 
+  function showActiveTheme(mode){
+    switch (mode) {
+      case 0:
+        // Dark.
+        $('.js-set-theme-light').removeClass('dropdown-item-active');
+        $('.js-set-theme-dark').addClass('dropdown-item-active');
+        $('.js-set-theme-auto').removeClass('dropdown-item-active');
+        break;
+      case 1:
+        // Auto.
+        $('.js-set-theme-light').removeClass('dropdown-item-active');
+        $('.js-set-theme-dark').removeClass('dropdown-item-active');
+        $('.js-set-theme-auto').addClass('dropdown-item-active');
+        break;
+      default:
+        // Light.
+        $('.js-set-theme-light').addClass('dropdown-item-active');
+        $('.js-set-theme-dark').removeClass('dropdown-item-active');
+        $('.js-set-theme-auto').removeClass('dropdown-item-active');
+        break;
+    }
+  }
+
   function getThemeVariation() {
     if (!canChangeTheme()) {
       return isSiteThemeDark;  // Use the site's default theme variation based on `light` in the theme file.
@@ -477,18 +500,17 @@
     // If theme changer component present, set its icon according to the theme mode (day, night, or auto).
     if (canChangeTheme) {
       let themeMode = getThemeMode();
-      let $themeChanger = $('.js-dark-toggle i');
       switch (themeMode) {
         case 0:
-          $themeChanger.removeClass('fa-sun fa-palette').addClass('fa-moon');
+          showActiveTheme(2);
           console.info('Initialize theme variation to Light.');
           break;
         case 1:
-          $themeChanger.removeClass('fa-moon fa-sun').addClass('fa-palette');
+          showActiveTheme(0);
           console.info('Initialize theme variation to Dark.');
           break;
         default:
-          $themeChanger.removeClass('fa-moon fa-palette').addClass('fa-sun');
+          showActiveTheme(1);
           console.info('Initialize theme variation to Auto.');
           break;
       }
@@ -568,9 +590,17 @@
     initThemeVariation();
 
     // Change theme mode.
-    $('.js-dark-toggle').click(function (e) {
+    $('.js-set-theme-light').click(function (e) {
+      e.preventDefault();
+      changeThemeModeClick(2);
+    });
+    $('.js-set-theme-dark').click(function (e) {
+      e.preventDefault();
+      changeThemeModeClick(0);
+    });
+    $('.js-set-theme-auto').click(function (e) {
       e.preventDefault();
-      changeThemeModeClick();
+      changeThemeModeClick(1);
     });
 
     // Live update of day/night mode on system preferences update (no refresh required).

assets/scss/academic/_nav.scss

@@ -59,9 +59,9 @@
     font-size: #{$sta-font-size-small}px;
   }
 
-  // Note: dedicated `i18n-active` class to prevent ScrollSpy removing `active` class from language chooser.
+  // Note: dedicated `dropdown-item-active` class to prevent ScrollSpy removing `active` class from language chooser.
   .dropdown-item.active,
-  .i18n-active {
+  .dropdown-item-active {
     font-weight: bold;
     color: $sta-menu-text-active !important;
   }
@@ -88,7 +88,8 @@
   .i18n-dropdown .nav-link::after {
     content: none;
   }
-  .i18n-dropdown .dropdown-menu {
+  .i18n-dropdown .dropdown-menu,
+  .theme-dropdown .dropdown-menu {
     /* Use style from uncollapsable dropdowns to prevent dropdown going off page. */
     position: absolute;
     /* Below style from .dropdown-menu-right to prevent dropdown going off page. */

i18n/en.yaml

@@ -32,6 +32,17 @@
 - id: edit_page
   translation: Edit this page
 
+# Themes
+
+- id: theme_light
+  translation: Light
+
+- id: theme_dark
+  translation: Dark
+
+- id: theme_auto
+  translation: Automatic
+
 # Buttons
 
 - id: btn_preprint

layouts/partials/navbar.html

@@ -131,8 +131,21 @@
       {{ end }}
 
       {{ if site.Params.day_night }}
-      <li class="nav-item">
-        <a class="nav-link js-dark-toggle" href="#"><i class="fas fa-moon" aria-hidden="true"></i></a>
+      <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>
+        <div class="dropdown-menu">
+          <a href="#" class="dropdown-item js-set-theme-light">
+            <span>{{ i18n "theme_light" | default "Light" }}</span>
+          </a>
+          <a href="#" class="dropdown-item js-set-theme-dark">
+            <span>{{ i18n "theme_dark" | default "Dark" }}</span>
+          </a>
+          <a href="#" class="dropdown-item js-set-theme-auto">
+            <span>{{ i18n "theme_auto" | default "Automatic" }}</span>
+          </a>
+        </div>
       </li>
       {{ end }}
 
@@ -142,7 +155,7 @@
           <i class="fas fa-globe mr-1" aria-hidden="true"></i><span class="d-none d-lg-inline">{{ index site.Data.i18n.languages .Lang }}</span>
         </a>
         <div class="dropdown-menu">
-          <div class="dropdown-item i18n-active font-weight-bold">
+          <div class="dropdown-item dropdown-item-active">
             <span>{{ index site.Data.i18n.languages .Lang }}</span>
           </div>
           {{ range .Translations }}