diff --git a/CHANGELOG.md b/CHANGELOG.md index f8ad43156..6239ecbfd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,8 @@ +# 2.4.2 + +### Notable enhancements and fixes +- Fixed a german translation in the english translation file. + # 2.4.1 ### Notable enhancements and fixes diff --git a/admin/package.json b/admin/package.json index 39a604f3b..20723272e 100644 --- a/admin/package.json +++ b/admin/package.json @@ -1,7 +1,7 @@ { "name": "admin", "private": true, - "version": "2.4.1", + "version": "2.4.2", "type": "module", "scripts": { "dev": "vite", diff --git a/bin/package.json b/bin/package.json index c17ee5648..46d128ca2 100644 --- a/bin/package.json +++ b/bin/package.json @@ -1,6 +1,6 @@ { "name": "bin", - "version": "2.4.1", + "version": "2.4.2", "description": "", "main": "checkAllPads.js", "directories": { diff --git a/package.json b/package.json index 237123821..05938017d 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,6 @@ "type": "git", "url": "https://github.com/ether/etherpad-lite.git" }, - "version": "2.4.1", + "version": "2.4.2", "license": "Apache-2.0" } diff --git a/settings.json.docker b/settings.json.docker index be83e0062..24aef23c8 100644 --- a/settings.json.docker +++ b/settings.json.docker @@ -194,6 +194,12 @@ */ "authenticationMethod": "${AUTHENTICATION_METHOD:sso}", + /** + * Allow setting dark mode for the enduser. This is so if the user has preferred dark mode in their browser, Etherpad will respect that. + * Of course this overrides all the skin variants and the skinName set by the administrator. + **/ + "enableDarkMode": "${ENABLE_DARK_MODE:true}", + /* * Node native SSL support * diff --git a/settings.json.template b/settings.json.template index 93026dece..5c8a90cf4 100644 --- a/settings.json.template +++ b/settings.json.template @@ -617,6 +617,12 @@ */ "authenticationMethod": "${AUTHENTICATION_METHOD:sso}", + /** + * Allow setting dark mode for the enduser. This is so if the user has preferred dark mode in their browser, Etherpad will respect that. + * Of course this overrides all the skin variants and the skinName set by the administrator. + **/ + "enableDarkMode": "${ENABLE_DARK_MODE:true}", + /* * From Etherpad 1.8.5 onwards, when Etherpad is in production mode commits from individual users are rate limited * diff --git a/src/locales/en.json b/src/locales/en.json index ec6a11a4f..e341d8df8 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -40,7 +40,7 @@ "index.recentPadsEmpty": "No recent pads found.", "index.generateNewPad": "Generate random pad name", "index.labelPad": "Pad name (optional)", - "index.placeholderPadEnter": "Gib den Namen des Pads ein...", + "index.placeholderPadEnter": "Please enter a pad name...", "index.createAndShareDocuments": "Create and share documents in real time", "index.createAndShareDocumentsDescription": "Etherpad allows you to edit documents collaboratively in real-time, much like a live multi-player editor that runs in your browser.", diff --git a/src/node/handler/PadMessageHandler.ts b/src/node/handler/PadMessageHandler.ts index ca5e7e6e2..79f4a8182 100644 --- a/src/node/handler/PadMessageHandler.ts +++ b/src/node/handler/PadMessageHandler.ts @@ -990,6 +990,7 @@ const handleClientReady = async (socket:any, message: ClientReadyMessage) => { accountPrivs: { maxRevisions: 100, }, + enableDarkMode: settings.enableDarkMode, automaticReconnectionTimeout: settings.automaticReconnectionTimeout, initialRevisionList: [], initialOptions: {}, diff --git a/src/node/utils/Settings.ts b/src/node/utils/Settings.ts index de21727f0..645713d44 100644 --- a/src/node/utils/Settings.ts +++ b/src/node/utils/Settings.ts @@ -109,6 +109,7 @@ exports.ttl = { exports.updateServer = "https://static.etherpad.org" +exports.enableDarkMode = true; /* * Skin name. diff --git a/src/package.json b/src/package.json index e251e3edc..81461d129 100644 --- a/src/package.json +++ b/src/package.json @@ -144,6 +144,6 @@ "debug:socketio": "cross-env DEBUG=socket.io* node --require tsx/cjs node/server.ts", "test:vitest": "vitest" }, - "version": "2.4.1", + "version": "2.4.2", "license": "Apache-2.0" } diff --git a/src/static/js/pad.ts b/src/static/js/pad.ts index 5edcb1119..3b5f9491c 100644 --- a/src/static/js/pad.ts +++ b/src/static/js/pad.ts @@ -1,5 +1,6 @@ // @ts-nocheck 'use strict'; +const skinVariants = require('./skin_variants'); /** * This code is mostly from the old Etherpad. Please help us to comment this code. @@ -479,6 +480,9 @@ 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) { + skinVariants.updateSkinVariantsClasses(['super-dark-editor', 'dark-background', 'super-dark-toolbar']); + } hooks.aCallAll('postAceInit', {ace: padeditor.ace, clientVars, pad}); }; diff --git a/src/static/js/skin_variants.ts b/src/static/js/skin_variants.ts index c9783aaa3..6bfd286ba 100644 --- a/src/static/js/skin_variants.ts +++ b/src/static/js/skin_variants.ts @@ -1,38 +1,43 @@ // @ts-nocheck 'use strict'; +const containers = ['editor', 'background', 'toolbar']; +const colors = ['super-light', 'light', 'dark', 'super-dark']; + +// add corresponding classes when config change +const updateSkinVariantsClasses = (newClasses) => { + const domsToUpdate = [ + $('html'), + $('iframe[name=ace_outer]').contents().find('html'), + $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html'), + ]; + + colors.forEach((color) => { + containers.forEach((container) => { + domsToUpdate.forEach((el) => { el.removeClass(`${color}-${container}`); }); + }); + }); + + domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); }); + + domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); }); +}; + // Specific hash to display the skin variants builder popup if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') { $('#skin-variants').addClass('popup-show'); - const containers = ['editor', 'background', 'toolbar']; - const colors = ['super-light', 'light', 'dark', 'super-dark']; - - // add corresponding classes when config change - const updateSkinVariantsClasses = () => { - const domsToUpdate = [ - $('html'), - $('iframe[name=ace_outer]').contents().find('html'), - $('iframe[name=ace_outer]').contents().find('iframe[name=ace_inner]').contents().find('html'), - ]; - colors.forEach((color) => { - containers.forEach((container) => { - domsToUpdate.forEach((el) => { el.removeClass(`${color}-${container}`); }); - }); - }); - - domsToUpdate.forEach((el) => { el.removeClass('full-width-editor'); }); - + const getNewClasses = () => { const newClasses = []; $('select.skin-variant-color').each(function () { newClasses.push(`${$(this).val()}-${$(this).data('container')}`); }); if ($('#skin-variant-full-width').is(':checked')) newClasses.push('full-width-editor'); - domsToUpdate.forEach((el) => { el.addClass(newClasses.join(' ')); }); - $('#skin-variants-result').val(`"skinVariants": "${newClasses.join(' ')}",`); - }; + + return newClasses; + } // run on init const updateCheckboxFromSkinClasses = () => { @@ -48,9 +53,11 @@ if (window.location.hash.toLowerCase() === '#skinvariantsbuilder') { }; $('.skin-variant').on('change', () => { - updateSkinVariantsClasses(); + updateSkinVariantsClasses(getNewClasses()); }); updateCheckboxFromSkinClasses(); - updateSkinVariantsClasses(); + updateSkinVariantsClasses(getNewClasses()); } + +exports.updateSkinVariantsClasses = updateSkinVariantsClasses;