mirrors/CyberChef
1
0
Fork 0
mirror of https://github.com/gchq/CyberChef.git synced 2025-04-21 15:26:16 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

automatically theme mode based on user preference

Browse source 
Related to #1901

Implemented automatic dark theme change based on user preference using the `prefers-color-scheme` media query.
This commit is contained in:
Vijay Soni 2024-10-07 01:28:46 +05:30
parent d635cca210
commit e484d426fe
2 changed files with 11 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/web/App.mjs Executable file → Normal file
View file

@ -60,6 +60,7 @@ class App {
this.initialiseSplitter(); this.initialiseSplitter();
this.loadLocalStorage(); this.loadLocalStorage();
this.manager.options.applyPreferredColorScheme();
this.populateOperationsList(); this.populateOperationsList();
this.manager.setup(); this.manager.setup();
this.manager.output.saveBombe(); this.manager.output.saveBombe();
@ -536,6 +537,8 @@ class App {
// Read in theme from URI params // Read in theme from URI params
if (this.uriParams.theme) { if (this.uriParams.theme) {
this.manager.options.changeTheme(Utils.escapeHtml(this.uriParams.theme)); this.manager.options.changeTheme(Utils.escapeHtml(this.uriParams.theme));
} else {
this.manager.options.applyPreferredColorScheme();
} }
window.dispatchEvent(this.manager.statechange); window.dispatchEvent(this.manager.statechange);

8
src/web/waiters/OptionsWaiter.mjs Executable file → Normal file
View file

@ -163,6 +163,14 @@ class OptionsWaiter {
themeSelect.selectedIndex = themeSelect.querySelector(`option[value="${theme}"`).index; themeSelect.selectedIndex = themeSelect.querySelector(`option[value="${theme}"`).index;
} }
/**
* Applies the user's preferred color scheme using the `prefers-color-scheme` media query.
*/
applyPreferredColorScheme() {
const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)").matches;
const theme = prefersDarkScheme ? "dark" : "classic";
this.changeTheme(theme);
}
/** /**
* Changes the console logging level. * Changes the console logging level.