Skip to content

Add Dark Mode #91

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
RKBoss6 wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Add Dark Mode #91

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7986a3f
Merge dark mode with all the changes since january
RKBoss6 Jun 26, 2026
cedda81
whitespace
gfwilliams Jun 26, 2026
5f5cf01
Use local images for bangle.js app loader
RKBoss6 Jun 26, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 40 additions & 4 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
alwaysAllowEmulator : false, // Always show "emulator" button regardless of whether it's supported by the app
autoReload: false, // Automatically reload watch after app App Loader actions (removes "Hold button" prompt)
noPackets: false, // Enable File Upload Compatibility mode (disables binary packet upload)
theme: "device" // App Loader theme: light, dark, device
};
let SETTINGS = JSON.parse(JSON.stringify(DEFAULTSETTINGS)); // clone

Expand All @@ -25,6 +26,9 @@
connected : false, // are we connected via BLE right now?
appsInstalled : [] // list of app {id,version} of installed apps
};



// FOR TESTING ONLY
/*let LANGUAGE = {
"//":"German language translations",
Expand Down Expand Up @@ -110,7 +114,7 @@
*/
function extractAppNameFromHref(href) {
if (!href) return null;

try {
const u = new URL(href);
href = u.pathname;
Expand All @@ -122,7 +126,7 @@
// remove leading/trailing slashes
href = href.replace(/^\/+|\/+$/g, '');
if (!href) return null; // was just /, throw it out

const parts = href.split('/').filter(p=>p!="");
// allow './' prefixes by dropping leading '.' segments
while (parts.length && parts[0] === '.') parts.shift();
Expand Down Expand Up @@ -948,9 +952,9 @@
if (file) entrypoint = JSON.stringify(file.name);
else showToast("No entrypoint found for app. Loading default clock.","warning");
// start the emulator and upload the whole app (and dependencies)
startCleanEmulator()

Check warning on line 955 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

'startCleanEmulator' is not defined
.then(() => uploadApp(app))

Check warning on line 956 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

Expected indentation of 12 spaces but found 10
.then(() => Comms.write(`load(${entrypoint});\n`));

Check warning on line 957 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

Expected indentation of 12 spaces but found 10
} else { // fallback - open the Web IDE
if (!file) {
console.error("No entrypoint found for "+appid);
Expand Down Expand Up @@ -1477,6 +1481,7 @@
});
Comms.watchConnectionChange(handleConnectionChange);

// Handle the 'chips'
let filtersContainer = document.querySelector("#librarycontainer .filter-nav");
filtersContainer.addEventListener('click', ({ target }) => {
// Only handle anchor clicks in menu items
Expand Down Expand Up @@ -1515,7 +1520,8 @@
console.error("Invalid settings");
}
// upgrade old settings
if(!SETTINGS.appsfavouritedThisSession) SETTINGS.appsfavouritedThisSession = [];
if(!SETTINGS.appsfavouritedThisSession) SETTINGS.appsfavouritedThisSession = DEFAULTSETTINGS.appsfavouritedThisSession;
if(!SETTINGS.theme) SETTINGS.theme = DEFAULTSETTINGS.theme;
}
/// Save settings
function saveSettings() {
Expand All @@ -1536,6 +1542,20 @@
saveSettings();
});
}
function changeThemeVars(theme){
document.documentElement.style.colorScheme = theme;
document.documentElement.setAttribute('data-theme', theme);

}
function applyTheme(theme){
if(theme=="light" || theme=="dark")changeThemeVars(theme);
else{
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const computedTheme = prefersDark ? 'dark' : 'light';
changeThemeVars(computedTheme);
}
}

settingsCheckbox("settings-pretokenise", "pretokenise");
settingsCheckbox("settings-minify", "minify");
settingsCheckbox("settings-settime", "settime");
Expand All @@ -1546,7 +1566,23 @@
loadSettings();
refreshSort();


const selectTheme = document.getElementById("settings-theme");
// Update theme selector
selectTheme.value = SETTINGS.theme;
selectTheme.addEventListener("change",event=>{
SETTINGS.theme = event.target.value;

Check warning on line 1573 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

Expected indentation of 2 spaces but found 4
saveSettings();

Check warning on line 1574 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

Expected indentation of 2 spaces but found 4
applyTheme(event.target.value);

Check warning on line 1575 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

Expected indentation of 2 spaces but found 4
});
//apply theme on startup
applyTheme(SETTINGS.theme);
//in case system theme changes, add a listener to update site theme if in device mode
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', (e) => {
if(SETTINGS.theme=="device"){
const newTheme = e.matches ? 'dark' : 'light';
changeThemeVars(newTheme);
}
});
function autoAlignMenu(dropdown) {
const menu = dropdown.querySelector('.menu');
if (!menu) return;
Expand Down
Loading