From c0396aebf1198aec2278f3be6285be55282e53da Mon Sep 17 00:00:00 2001
From: SamTV12345 <40429738+SamTV12345@users.noreply.github.com>
Date: Tue, 23 Sep 2025 17:41:22 +0200
Subject: [PATCH] chore: add button to settings popup for dark mode (#7136)
---
src/static/js/pad.ts | 7 +++-
src/static/js/pad_editor.ts | 14 ++++++-
src/static/js/skin_variants.ts | 22 ++++++++++
.../skins/colibris/src/components/popup.css | 40 +++++++++++++++++++
src/templates/pad.html | 15 ++++++-
5 files changed, 95 insertions(+), 3 deletions(-)
diff --git a/src/static/js/pad.ts b/src/static/js/pad.ts
index 3b5f9491c..27447b31d 100644
--- a/src/static/js/pad.ts
+++ b/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']);
}
diff --git a/src/static/js/pad_editor.ts b/src/static/js/pad_editor.ts
index 2403c3e7a..3b1b11498 100644
--- a/src/static/js/pad_editor.ts
+++ b/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());
diff --git a/src/static/js/skin_variants.ts b/src/static/js/skin_variants.ts
index 6bfd286ba..a10074384 100644
--- a/src/static/js/skin_variants.ts
+++ b/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;
diff --git a/src/static/skins/colibris/src/components/popup.css b/src/static/skins/colibris/src/components/popup.css
index 04f47e3a5..db6647431 100644
--- a/src/static/skins/colibris/src/components/popup.css
+++ b/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);;
+}
diff --git a/src/templates/pad.html b/src/templates/pad.html
index 2fea437d6..eb93196e2 100644
--- a/src/templates/pad.html
+++ b/src/templates/pad.html
@@ -164,7 +164,20 @@
<% e.end_block(); %>
- About
+
+
+
+ About
Powered by
Etherpad
<% if (settings.exposeVersion) { %>(commit <%= settings.gitVersion %>)<% } %>