chore: add button to settings popup for dark mode (#7136)

Author: SamTV12345

src/static/js/pad.ts

@@ -480,7 +480,12 @@ const pad = {
       setTimeout(() => { checkChatAndUsersVisibility(mobileMatch); }, 0); // check now after load
 
       $('#editorcontainer').addClass('initialized');
-      if (window.location.hash.toLowerCase() !== '#skinvariantsbuilder' && window.clientVars.enableDarkMode && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+
+      if (window.clientVars.enableDarkMode) {
+        $('#theme-switcher').attr('style', 'display: flex;');
+      }
+
+      if (window.location.hash.toLowerCase() !== '#skinvariantsbuilder' && window.clientVars.enableDarkMode && (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) && !skinVariants.isWhiteModeEnabledInLocalStorage()) {
         skinVariants.updateSkinVariantsClasses(['super-dark-editor', 'dark-background', 'super-dark-toolbar']);
       }
 

src/static/js/pad_editor.ts

@@ -26,6 +26,7 @@ import padutils,{Cookies} from "./pad_utils";
 const padcookie = require('./pad_cookie').padcookie;
 const Ace2Editor = require('./ace').Ace2Editor;
 import html10n from '../js/vendors/html10n'
+const skinVariants = require('./skin_variants');
 
 const padeditor = (() => {
   let pad = undefined;
@@ -86,11 +87,22 @@ const padeditor = (() => {
       $('#delete-pad').on('click', () => {
         if (window.confirm(html10n.get('pad.delete.confirm'))) {
           pad.collabClient.sendMessage({type: 'PAD_DELETE', data:{padId: pad.getPadId()}});
-          // redirect to home page after deletion  
+          // redirect to home page after deletion
           window.location.href = '/';
         }
       })
 
+      // theme switch
+      $('#theme-switcher').on('click',()=>{
+          if (skinVariants.isDarkMode()) {
+            skinVariants.setDarkModeInLocalStorage(false);
+            skinVariants.updateSkinVariantsClasses(['super-light-toolbar super-light-editor light-background']);
+          } else {
+            skinVariants.setDarkModeInLocalStorage(true);
+            skinVariants.updateSkinVariantsClasses(['super-dark-editor', 'dark-background', 'super-dark-toolbar']);
+          }
+      })
+
       // Language
       html10n.bind('localized', () => {
         $('#languagemenu').val(html10n.getLanguage());

src/static/js/skin_variants.ts

@@ -23,6 +23,24 @@ const updateSkinVariantsClasses = (newClasses) => {
   domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); });
 };
 
+
+const isDarkMode = ()=>{
+  return $('html').hasClass('super-dark-editor')
+}
+
+
+const setDarkModeInLocalStorage = (isDark)=>{
+  localStorage.setItem('ep_darkMode', isDark?'true':'false');
+}
+
+const isDarkModeEnabledInLocalStorage = ()=>{
+  return localStorage.getItem('ep_darkMode')==='true';
+}
+
+const isWhiteModeEnabledInLocalStorage = ()=>{
+  return localStorage.getItem('ep_darkMode')==='false';
+}
+
 // Specific hash to display the skin variants builder popup
 if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') {
   $('#skin-variants').addClass('popup-show');
@@ -60,4 +78,8 @@ if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') {
   updateSkinVariantsClasses(getNewClasses());
 }
 
+exports.isDarkMode = isDarkMode;
+exports.setDarkModeInLocalStorage = setDarkModeInLocalStorage
+exports.isWhiteModeEnabledInLocalStorage = isWhiteModeEnabledInLocalStorage
+exports.isDarkModeEnabledInLocalStorage = isDarkModeEnabledInLocalStorage
 exports.updateSkinVariantsClasses = updateSkinVariantsClasses;

src/static/skins/colibris/src/components/popup.css

@@ -85,3 +85,43 @@
 #delete-pad {
   background-color: #ff7b72;
 }
+
+#theme-switcher div {
+  position: relative;
+  width: 30px;
+  background-color: white;
+  height: 10px;
+  border-radius: 5px;
+  align-self: center;
+}
+
+#theme-switcher {
+  display: flex;
+  margin-top: 20px;
+  flex-direction: row;
+}
+
+#theme-switcher div span {
+  width: 15px;
+  display: block;
+  height: 15px;
+  border-radius: 20px;
+  position: absolute;
+  top: -2px;
+  background-color: white;
+  transition: background-color 0.25s;
+}
+
+html.super-light-editor #theme-switcher div {
+  background-color: #ccc;
+}
+
+html.super-light-editor #theme-switcher div span {
+  left: 0;
+  background-color: var(--primary-color);;
+}
+
+html.super-dark-editor #theme-switcher div span {
+  right: 0;
+  background-color: var(--primary-color);;
+}

src/templates/pad.html

@@ -164,7 +164,20 @@ <h2 data-l10n-id="pad.settings.myView"></h2>
             <% e.end_block(); %>
           </div>
           <button data-l10n-id="pad.settings.deletePad" id="delete-pad">Delete pad</button>
-          <h2 data-l10n-id="pad.settings.about">About</h2>
+        <div id="theme-switcher" style="display: none;">
+          <svg width="2rem" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
+          </svg>
+          <div>
+            <span aria-label="theme-switcher-knob"></span>
+          </div>
+          <svg width="2rem" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
+          </svg>
+        </div>
+
+
+        <h2 data-l10n-id="pad.settings.about">About</h2>
           <span data-l10n-id="pad.settings.poweredBy">Powered by</span>
           <a href="https://etherpad.org" target="_blank" referrerpolicy="no-referrer" rel="noopener">Etherpad</a>
         <% if (settings.exposeVersion) { %>(commit <%= settings.gitVersion %>)<% } %>      </div></div>