mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-06-13 01:34:44 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Consider device dark mode setting

Browse source
This commit is contained in:
Stefan Müller 2025-05-17 19:08:39 +02:00
parent 050869aecd
commit bbdfbe88b2
2 changed files with 35 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/static/js/pad.ts
View file

@ -52,6 +52,7 @@ import {randomString} from "./pad_utils";
const socketio = require('./socketio');
const hooks = require('./pluginfw/hooks');
const skinVariants = require('./skin_variants');
// This array represents all GET-parameters which can be used to change a setting.
// name: the parameter-name, eg `?noColors=true` => `noColors`
@ -480,6 +481,10 @@ const pad = {
$('#editorcontainer').addClass('initialized');
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
skinVariants.updateSkinVariantsClasses(['dark-editor', 'dark-background', 'dark-toolbar']);
}
hooks.aCallAll('postAceInit', {ace: padeditor.ace, clientVars, pad});
};

53
src/static/js/skin_variants.ts
View file

@ -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;