Mirrors/CyberChef
2
0
Fork 0
mirror of https://github.com/gchq/CyberChef synced 2025-01-26 03:05:06 +00:00
Code Issues Projects Releases Packages Wiki Activity

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
Show stats 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.loadLocalStorage();
this.manager.options.applyPreferredColorScheme();
this.populateOperationsList();
this.manager.setup();
this.manager.output.saveBombe();
@ -536,6 +537,8 @@ class App {
// Read in theme from URI params
if (this.uriParams.theme) {
this.manager.options.changeTheme(Utils.escapeHtml(this.uriParams.theme));
} else {
this.manager.options.applyPreferredColorScheme();
}
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;
}
/**
* 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.