Skip to content

[App Loader] Add dark mode support #4103

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

Draft
RKBoss6 wants to merge 18 commits into
base: master
Choose a base branch
from
Draft

[App Loader] Add dark mode support #4103

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
88d8521
Implement light-dark color scheme support
RKBoss6 Dec 22, 2025
56717a3
add a theme setting dropdown in settings page
RKBoss6 Dec 22, 2025
eec4865
Update submodule URL for EspruinoAppLoaderCore
RKBoss6 Dec 22, 2025
c1f6283
updated submodule test
RKBoss6 Dec 22, 2025
4cd2390
Update css/main.css
RKBoss6 Dec 22, 2025
7427058
Update css/main.css
RKBoss6 Dec 22, 2025
29f0d3a
Update css/main.css
RKBoss6 Dec 22, 2025
8d08499
Merge branch 'espruino:master' into apploader-darkmode
RKBoss6 Dec 23, 2025
0c8ede4
Change summary style for Advanced Options details
RKBoss6 Dec 23, 2025
7edc8f9
fix hero img not responding to theme changes
RKBoss6 Dec 23, 2025
e517ba4
Removing extra newlines, fixing indentation
gfwilliams Jan 8, 2026
b650fcf
Merge branch 'espruino:master' into apploader-darkmode
RKBoss6 Jan 9, 2026
a46b41c
custom.html works now, added tag to all custom.htmls
RKBoss6 Jun 26, 2026
6617946
Merged from master
RKBoss6 Jun 26, 2026
7132fab
fix merge issues
RKBoss6 Jun 26, 2026
182aba4
merged css
RKBoss6 Jun 26, 2026
106d595
re-add modal overlay styling from merge delete
RKBoss6 Jun 26, 2026
b38c5f1
Add transparent device thumbnails, cleaned up some dark mode modals
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
2 changes: 1 addition & 1 deletion .gitmodules
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
[submodule "EspruinoAppLoaderCore"]
path = core
url = https://github.com/espruino/EspruinoAppLoaderCore.git
url = https://github.com/RKBoss6/EspruinoAppLoaderCore.git

@gfwilliams gfwilliams Jan 8, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

You'd need to back this out before we merge - although I know it's handy for testing at the moment

[submodule "webtools"]
path = webtools
url = https://github.com/espruino/EspruinoWebTools.git
2 changes: 1 addition & 1 deletion core
Open in desktop
Submodule core updated 2 files
+ − .DS_Store
+52 −1 js/index.js
72 changes: 61 additions & 11 deletions css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,17 @@
/* NAVIGATION BAR AND GENERAL STYLES */
:root {
color-scheme: light dark; /* Informs the browser the site supports both schemes */
--hero-img-filter: invert(0%);
}
body {
color: #3c3c3c;
background-color: light-dark(#ffffff, #232323);
color: light-dark(#3c3c3c, #cacaca);
padding-left: 1em;
padding-right: 1em;
}

.navbar {
background-color: #5755d9;
background-color: light-dark(#5755d9, #3a386f);
padding: 1em 1em 1em 1em;
}

Expand Down Expand Up @@ -57,9 +62,11 @@
border-radius: 1em;
padding: 0.5em;
padding-left: 1em;
border: solid 1px #dadee4;
background-color: light-dark(#fff, #2d2d2d);
border: solid 1px light-dark(#dadee4, #3a386f);
box-shadow: none;
margin: -1;
color: light-dark(#3c3c3c, #cacaca);
}

.panel-header {
Expand Down Expand Up @@ -111,21 +118,39 @@
transform: scale(1, 1);
}
}

.modal-overlay {
background: light-dark(#ffffff4b,#5e5e5ebc)!important;
/* Add the blur effect */
/* Apply the blur to the backdrop */
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* Safari support */
}
.btn {
border-radius: 0.4em;
background-color: light-dark(#ffffff, #232323);
}

#connectmydevice {
margin-right: 1.5em;
background-color:#fff;
}

.menu{
background-color:light-dark(#ffffff, #313131);
color: light-dark(#3c3c3c, #cacaca);
}

.btn.input-group-btn {

border-bottom-right-radius: 1em;
border-top-right-radius: 1em;
}

.btn.btn-clear{
color:light-dark(#000000,#FFFFFF);
}
.form-select{
background-color:light-dark(#ffffff, #232323)!important;
border-radius:0.4em;
}
.btn.btn-favourite:focus,
.btn.btn-favourite:focus-visible,
.btn-favourite:focus,
Expand Down Expand Up @@ -336,9 +361,12 @@
padding-left: 0.01em;
}

.avatar {
background-color: transparent!important;
}
.avatar img {
border-radius: 5px 5px 5px 5px;
background: #fff;
background-color: transparent!important;
border-radius: 0.3em!important;
}

#toastcontainer {
Expand Down Expand Up @@ -403,7 +431,7 @@

box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.025);

border: solid 1.3px #dadee47c;
border: solid 1.3px light-dark(#dadee47c,#484848);
margin: 0;
/* spacing handled by container gap */
padding: 0.9em;
Expand All @@ -422,7 +450,28 @@
}
.chip{
border-radius: 0.7em;
background-color: light-dark(#EEF0F3,#424242);
}
code{
background-color: light-dark(#fdf2f2,#2f2e2e);
}
.hero-img {
filter: invert(0%);
}


html[data-theme="dark"] {
--hero-img-filter: invert(100%);
}
.hero-img {
filter: var(--hero-img-filter);
}
.modal-title{
color: light-dark(#000000,#FFFFFF);
}
.hero.bg-gray{
background-color: light-dark(#F7F7F9,#2C2C2C)!important;
border-radius:1em;
}
.link-github {
position: absolute;
Expand All @@ -448,7 +497,7 @@
justify-content: flex-end;
padding: 0em 1em;
margin-right: 0.05em;
background-color: rgba(87, 85, 217, 0.055);
background-color: light-dark(rgba(87, 85, 217, 0.055), rgba(87, 85, 217, 0.152));
border-radius: 999px;
font-family: sans-serif;
height: auto;
Expand All @@ -457,7 +506,7 @@

.modal-container {
border-radius: 1.5em;
background-color: rgb(253, 253, 255);
background-color: light-dark(rgb(253, 253, 255), rgb(44, 44, 44));
padding: 1em;

}
Expand All @@ -476,6 +525,7 @@
align-items: center;
/* Centers vertically */
text-align: left;
color: light-dark(#3c3c3c, #cacaca);

}

Expand Down
16 changes: 14 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,7 +122,7 @@
<div class="container apploader-tab" id="morecontainer" style="display:none">
<div class="hero bg-gray">
<div class="hero-body">
<a href="https://banglejs.com" target="_blank"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
<a class="hero-img"href="https://banglejs.com" target="_blank"><img src="img/banglejs-logo-mid.png" alt="Bangle.js"></a>
<h2>App Loader</h2>
<p>A tool for uploading and removing apps from <a href="https://banglejs.com" target="_blank">Bangle.js Smart Watches</a></p>
</div>
Expand Down Expand Up @@ -152,7 +152,9 @@ <h3>Utilities</h3>
<button class="btn tooltip" id="newGithubIssue" data-tooltip="Create a new issue on GitHub">New issue on GitHub</button>
</p>
<h3>Settings</h3>

<div class="form-group">

<label class="form-switch">
<input type="checkbox" id="settings-pretokenise">
<i class="form-icon"></i> Pretokenise apps before upload (smaller, faster apps)
Expand All @@ -174,13 +176,23 @@ <h3>Settings</h3>
<i class="form-icon"></i> Send app analytics to banglejs.com (apps installed, favourites, firmware version).<br/>
<small>Used for 'Sort by Installed/Favourited' functionality. See the <a href="http://www.espruino.com/Privacy">privacy policy</a></small>.
</label>
<select class="form-select form-inline" id="settings-theme" style="width: 10em">
<option value="light">Light</option>
<option value="dark">Dark</option>
<option value="device">Device</option>

</select>&nbsp;&nbsp;<span>App Loader Theme</span>
</div>
<div class="form-group">
<select class="form-select form-inline" id="settings-lang" style="width: 10em">
<option value="">None (English)</option>
</select>&nbsp;&nbsp;<span>Translations (<a href="https://github.com/espruino/BangleApps/issues/1311" target="_blank">BETA - more info</a>). Any apps that are uploaded to Bangle.js after changing this will have any text automatically translated.</span>
</div>
<div class="form-group">


<details>
<summary>Advanced Options</summary>
<summary style="cursor: pointer;">Advanced Options</summary>
<label class="form-switch">
<input type="checkbox" id="settings-minify">
<i class="form-icon"></i> Minify apps before upload (⚠️DANGER⚠️: Not recommended. Uploads smaller, faster apps but this <b>will</b> break many apps)
Expand Down