Skip to content

Add dark mode support #84

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 support #84

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
76646f3
Implement theme settings and iframe styling
RKBoss6 Dec 22, 2025
35bde96
Update index.js
RKBoss6 Dec 22, 2025
a01a348
Update index.js
RKBoss6 Dec 22, 2025
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
55 changes: 53 additions & 2 deletions js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
alwaysAllowUpdate : false, // Always show "reinstall app" button regardless of the version
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 @@ -24,6 +25,10 @@
connected : false, // are we connected via BLE right now?
appsInstalled : [] // list of app {id,version} of installed apps
};




Comment on lines +29 to +31
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These blank lines appear to be unnecessary and should be removed to maintain code consistency.

Suggested change

Copilot uses AI. Check for mistakes.
// FOR TESTING ONLY
/*let LANGUAGE = {
"//":"German language translations",
Expand Down Expand Up @@ -312,6 +317,15 @@
// when iframe is loaded, call 'onInit' with info about the device
iframe.addEventListener("load", function() {
console.log("IFRAME loaded");
// Style custom apps for dark mode
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc && iframeDoc.body) {
const bgColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? '#2c2c2c' : '#ffffff';
const textColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? '#FFFFFF' : '#000000';
Comment on lines +320 to +324
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The iframe styling always checks the system's color scheme preference using matchMedia, but it should respect the user's theme setting (SETTINGS.theme) instead. When the user selects "light" or "dark" explicitly, the iframe should use that theme rather than always following the system preference. Consider using the applyTheme logic or a similar approach to determine which theme to apply based on SETTINGS.theme.

Suggested change
// Style custom apps for dark mode
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc && iframeDoc.body) {
const bgColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? '#2c2c2c' : '#ffffff';
const textColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? '#FFFFFF' : '#000000';
// Style custom apps according to theme (light/dark/device)
const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
if (iframeDoc && iframeDoc.body) {
// Determine effective theme: use SETTINGS.theme if available, otherwise default
const currentSettings = (typeof SETTINGS !== "undefined" && SETTINGS) ? SETTINGS : DEFAULTSETTINGS;
const theme = currentSettings && currentSettings.theme ? currentSettings.theme : DEFAULTSETTINGS.theme;
const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
const isDark = theme === "dark" || (theme === "device" && prefersDark);
const bgColor = isDark ? "#2c2c2c" : "#ffffff";
const textColor = isDark ? "#FFFFFF" : "#000000";

Copilot uses AI. Check for mistakes.
Comment on lines +323 to +324
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The matchMedia check is duplicated for both bgColor and textColor. Consider storing the result in a variable to avoid checking twice.

Suggested change
const bgColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? '#2c2c2c' : '#ffffff';
const textColor = window.matchMedia('(prefers-color-scheme: dark)').matches ? '#FFFFFF' : '#000000';
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
const bgColor = prefersDark ? '#2c2c2c' : '#ffffff';
const textColor = prefersDark ? '#FFFFFF' : '#000000';

Copilot uses AI. Check for mistakes.
iframeDoc.body.style.backgroundColor = bgColor;
iframeDoc.body.style.color = textColor;
}

/* if we get a message from the iframe (eg asking to send data to Puck), handle it
otherwise pass to messageHandler because handleCustomApp may want to handle it */
iframe.contentWindow.addEventListener("message",function(event) {
Expand Down Expand Up @@ -431,7 +445,7 @@
</div>
<div class="modal-body" style="height:100%">
<div class="content" style="height:100%">
<iframe src="apps/${appTemplate.id}/${appTemplate.custom}" style="width:100%;height:100%;border:0px;">
<iframe class="modal-iframe" src="apps/${appTemplate.id}/${appTemplate.custom}" style="width:100%;height:100%;border:0px;">
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'modal-iframe' class is added to the iframe element but is not used anywhere in the codebase (no CSS rules or JavaScript selectors reference it). Consider removing this class if it's not needed, or ensure the corresponding styles are added if it's intended for styling.

Suggested change
<iframe class="modal-iframe" src="apps/${appTemplate.id}/${appTemplate.custom}" style="width:100%;height:100%;border:0px;">
<iframe src="apps/${appTemplate.id}/${appTemplate.custom}" style="width:100%;height:100%;border:0px;">

Copilot uses AI. Check for mistakes.
</div>
</div>
</div>
Expand Down Expand Up @@ -1399,7 +1413,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 @@ -1420,6 +1435,23 @@
saveSettings();
});
}
function applyTheme(theme){
if(theme=="dark") document.documentElement.style.colorScheme = 'dark';
else if(theme=="light") document.documentElement.style.colorScheme = 'light';
else{
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
console.log(prefersDark)
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This console.log statement appears to be a leftover debug statement and should be removed.

Suggested change
console.log(prefersDark)

Copilot uses AI. Check for mistakes.
const theme = prefersDark ? 'dark' : 'light';
document.documentElement.style.colorScheme = theme;
Comment on lines +1444 to +1445
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The local variable 'theme' shadows the function parameter with the same name. Consider renaming this variable to something like 'computedTheme' or 'resolvedTheme' to avoid confusion.

Suggested change
const theme = prefersDark ? 'dark' : 'light';
document.documentElement.style.colorScheme = theme;
const computedTheme = prefersDark ? 'dark' : 'light';
document.documentElement.style.colorScheme = computedTheme;

Copilot uses AI. Check for mistakes.
}
}
function repaintSite(){
//tricks browser into repainting the site to apply theme changes
const body = document.body;
body.style.display = 'none';
body.offsetHeight;
body.style.display = '';
}
Comment on lines +1448 to +1454
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The repaintSite function is defined but never called anywhere in the code. This function should either be removed or integrated into the theme application logic if it's needed.

Suggested change
function repaintSite(){
//tricks browser into repainting the site to apply theme changes
const body = document.body;
body.style.display = 'none';
body.offsetHeight;
body.style.display = '';
}

Copilot uses AI. Check for mistakes.
settingsCheckbox("settings-pretokenise", "pretokenise");
settingsCheckbox("settings-minify", "minify");
settingsCheckbox("settings-settime", "settime");
Expand All @@ -1428,6 +1460,25 @@
settingsCheckbox("settings-nopacket", "noPackets");
loadSettings();

selectTheme = document.getElementById("settings-theme");

Check warning on line 1463 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

'selectTheme' is not defined
Copy link

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The variable 'selectTheme' is not declared with 'let', 'const', or 'var', making it an implicit global variable. Add 'const' or 'let' before 'selectTheme' to properly declare it.

Suggested change
selectTheme = document.getElementById("settings-theme");
const selectTheme = document.getElementById("settings-theme");

Copilot uses AI. Check for mistakes.
// Update theme selector
selectTheme.value = SETTINGS.theme;

Check warning on line 1465 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

'selectTheme' is not defined
selectTheme.addEventListener("change",event=>{

Check warning on line 1466 in js/index.js

View workflow job for this annotation

GitHub Actions / test 

'selectTheme' is not defined
SETTINGS.theme = event.target.value;

Check warning on line 1467 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 1468 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 1469 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';
document.documentElement.style.colorScheme = newTheme;
}
});

let btn;

btn = document.getElementById("defaultsettings");
Expand Down