Add dark mode support #84

RKBoss6 · 2025-12-22T19:13:02Z

In conjunction with #4103, this helps add dark mode to the app loader. Adding dark mode helps significantly with eye strain, and blending into the device's UI. Check it out on my personal app loader! and let me know of any suggestions/comments.

Specifically, this PR handles ensuring the right theme is displayed, and theming of app html customizer iframes.

Screenshots:

Added theme setting functionality and updated iframe styles.

Copilot

Pull request overview

This PR adds dark mode support to the app loader with three theme options: light, dark, and device (follows system preference). The implementation handles theme persistence in settings, dynamic theme application, and extends dark mode styling to app customizer iframes.

Key Changes:

Added theme setting with three modes: light, dark, and device
Implemented theme application logic that respects user preferences and system settings
Applied dark mode styling to app customizer iframes

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

js/index.js

Copilot · 2025-12-22T19:16:01Z

js/index.js

+    const theme = prefersDark ? 'dark' : 'light';
+    document.documentElement.style.colorScheme = theme;


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 · 2025-12-22T19:16:01Z

js/index.js

+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 = '';
+}


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 · 2025-12-22T19:16:01Z

js/index.js

 settingsCheckbox("settings-nopacket", "noPackets");
 loadSettings();

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


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 · 2025-12-22T19:16:02Z

js/index.js

+
+
+


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

Suggested change

Copilot · 2025-12-22T19:16:02Z

js/index.js

+    // 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';


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 · 2025-12-22T19:16:02Z

js/index.js

+  else{
+
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    console.log(prefersDark)


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

Suggested change

console.log(prefersDark)

Copilot · 2025-12-22T19:16:02Z

js/index.js

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


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 · 2025-12-22T19:16:02Z

js/index.js

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


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

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Implement theme settings and iframe styling

76646f3

Added theme setting functionality and updated iframe styles.

Copilot AI review requested due to automatic review settings December 22, 2025 19:13

Copilot started reviewing on behalf of RKBoss6 December 22, 2025 19:13 View session

Copilot AI reviewed Dec 22, 2025

View reviewed changes

RKBoss6 mentioned this pull request Dec 22, 2025

[App Loader] Add dark mode support espruino/BangleApps#4103

Draft

4 tasks

RKBoss6 and others added 2 commits December 22, 2025 14:19

Update index.js

35bde96

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update index.js

a01a348

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Add dark mode support #84

Add dark mode support #84

Uh oh!

RKBoss6 commented Dec 22, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Copilot AI Dec 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

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

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

-    // 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";

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

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

Add dark mode support #84

Are you sure you want to change the base?

Add dark mode support #84

Uh oh!

Conversation

RKBoss6 commented Dec 22, 2025

Screenshots:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 22, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant