Would anyone know if theming Plinth (i.e for dark mode) is possible?
I have no idea how this could be done but, if I can get any pointers Im willing to try to learn and maybe put some effort for this.
Thanks.
3 Likes
Dark mode would be a very welcome addition to FreedomBox. The web interface is uses Twitter’s Bootstrap CSS library. Bootstrap seems to support dark mode starting version 5.3. Overall effort needed would not be too huge as we just need use the bootstrap’s feature and correct for the custom colors we use along with icons, I suppose. To make this happen we need to start using bootstrap library 5.x versions which is already available in Debian. Debian -- Details of package libjs-bootstrap5 in bookworm . We also need 5.3 version instead of 5.2 but I guess this will come to Debian eventually if the package maintainer helps out.
If you decide to work on this, let us know if you need any help.
1 Like
Allow me some time to try and work to understand Twitter’s Bootstrap. If I feel capable, I will let you know. Thanks!
1 Like
@sunil
Free bootstrap themes including a few dark themes. They have for 5.3 and bootstrap 4 but no 5.2
Simply download a CSS file and replace the one in Bootstrap. No messing around with hex values.
Looks like there might be a dark mode already built in that can be activated with a single line of code right after the html !DOCTYPE.
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
Right click and View Source on my fbx home page and it’s loading bootstrap4 so the bootstrap5 info above is of no help. Boostrap5 supports dark mode natively.
I see some tutorials out there for creating a dark mode switch for bootstrap4.
1 Like
Drop in CSS themes for bs-4
https://bootswatch.com/4/
Article on dark mode switch for bs-4
Demo
Code
1 Like
There aren’t many places where we use colors from bootstrap. So, adjusting the colors (by picking them up from Bootstrap 4 dark themes or by picking them from Bootstrap 5) should not be too much of an effort. Once a patch is submitted after testing, other developers can adjust for factors like code quality, how to include, etc.
Yes I have a custom css browser extension and this little bit of css makes a basic dark mode.
body {color: #DCDCDC; background: #222222;}
.card {background-color: #303030;}
.card-description {color: #DCDCDC;}
.card-title {color: #DCDCDC;}
.content-container {background-color: #303030;}
Problem is, the css extension goes by domain so it affects all the apps.
Looks like most of it comes from two files.
usr/share/plinth/static/theme/css/main.css
and
usr/share/javascript/bootstrap4/bootstrap.css
That means I can put the original bootstrap.min.css back in place since it did nothing when I replaced it with dark version from bootswatch. I should have used the web inspector in the first place.
NOTE: rgb(255, 255, 255) and #000000 and white are all white. main.css uses white while bootstrap.css uses the rgb
Below is original css and selectors I changed with the browser extenstion
usr/share/javascript/bootstrap4/css/bootstrap.css
Line 51: body {color: #212529;}
Line 3636: .card {background-color:rgb(255, 255, 255);}
usr/share/plinth/static/theme/css/main.css
Line 182: background: url('../img/noise.png') var(--background-color);
Line 587: .card-description {color:#646464;}
Line 574: .card .nav-link {color: #DCDCDC;}
Line 358: .content-container {background-color: white;}
I went ahead and edited the two css files and now have this and the apps won’t be affected by it;
Who knows if an update will wipe out my changes. It’s just 6 lines to fix again if it does.
The ideal thing would be a user.css file that won’t get overwritten and gets loaded last so that it overrides the bootstrap and main css.
A built in feature with a code window for custom css would be even better but that’s probably asking a lot. 
I also have a Dark Mode browser extension and it works fine on Shaari and Searx. Really bad on Plinth though. Same with Cockpit.
2 Likes
Found Dark Mode for Cockpit under Sessions menu item at the top right. Cool
1 Like
@poorboy , I am going to create a merge request based on the changes you are suggesting here. Do you agree to publish your changes under AGPL v3+ license same as FreedomBox? I can also mark you as the author if I can use your email address. Would that be okay?
2 Likes
Which changes?
I still think a user.css would be the best way.
From this:
<!-- Bootstrap base CSS -->
<link rel="stylesheet" href="/javascript/bootstrap4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/javascript/fork-awesome/css/fork-awesome.css"/>
<link rel="stylesheet" href="/plinth/static/theme/css/main.css"/>
To this:
<!-- Bootstrap base CSS -->
<link rel="stylesheet" href="/javascript/bootstrap4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/javascript/fork-awesome/css/fork-awesome.css"/>
<link rel="stylesheet" href="/plinth/static/theme/css/main.css"/>
<link rel="stylesheet" href="/plinth/static/theme/css/user.css"/>
I’m almost certain that with user.css being last, it would override bootsptrap.css and main.css
That way people don’t have to dig into bootstrap.css with it’s nearly 8,000 lines. People could share their css tweaks here that way too.
I haven’t looked into trying that and I’m not sure where it’s being called up for injection of those <link rel lines into the rendered html fbx pages.
If you’re thinking of just changing the six lines in two css files, that forces everyone to a dark theme. Also, I haven’t visited and closely looked at every single fbx page so there might be a few more things that need to be tweaked for readability. I’ll have to hit every app page and every system page and do Ctrl+A to make sure no text is invisible due to being the same color as the background it’s on.
You can use anything I suggest here as AGPL v3+ license. If it ends up being a user.css, go ahead and stick my name/email on it.
Found a couple more things to change. The helpful text on system pages was a little dim. Kind of a medium gray on my charcoal background so I brightened it up a bit.
Some system pages have form text fields and those were bright white, hard on the eyes and made the helpful text even harder to see so I dimmed the text fields down a little.
Unexpected that the text field turns white when the cursor is in it but kinda cool.
That came from bootstrap.min.css and neither Kate or Kwrite liked the single line with 174k characters. Got a popup warning with a button to temporarily raise the limit but then they opened as read only and Ctrl+F didn’t work.
Being that bootstrap.min.css is the first css file to load and main.css is third/last, I added my css tweak to the bottom of main.css and it overrides bootstrap.min.css verifying what I mentioned about having a user.css load last. It would override all other css.
bootstrap.min.css Line 12
Before
.form-control {
background-color: #FFF;
}
After
.form-control {
background-color: #9F9F9F;
}
I was wondering why it said Line 12 for a minified file until I opened it and saw 11 lines of comment. At any rate, it got placed into the end of main.css
Then for the helpful text
main.css Line 137
Before
.help-block {
color: #737373
}
After
.help-block {
color: #aeaeae;
}
I visited every System page and those were the only two issues. I still need to visit all the /plinth/apps/ pages.
DONE
/plinth/apps/ pages all look good and are pretty close to all being the same layout and colors.
Installed RSS Bridge to see what an install page looks like. Looks good and not too dissimilar to the apps pages.
EDIT to ADD
Looks like /freedombox/plinth/templates/base.html is where the ref to css files is. So if I add a user.css in the same folder as main.css, it won’t get overwritten. Then add one link ref to base.html and if that got overwritten, it’s just one line in one file to add back in.
Of course if a link ref to user.css could be officially added to base.html but no user.css created in the repository, that would be the ticket. Either that or create user.css but exclude it from updates.
SUCCESS
My css edits are now coming from user.css
I did have to restart the machine for my edited base.html to be take effect. Using the browser’s View Source not shows this;
<!-- Bootstrap base CSS -->
<link rel="stylesheet" href="/javascript/bootstrap4/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/javascript/fork-awesome/css/fork-awesome.css"/>
<link rel="stylesheet" href="/plinth/static/theme/css/main.css"/>
<link rel="stylesheet" href="/plinth/static/theme/css/user.css"/>
Super easy edit to base.html. Copy main.css link ref line and paste that copy below itself then change “main” to “user” on the pasted line. user.css file lives in the same folder as main.css obviously.
Even though I know what user.css is for, I added a comment at the top
/* Add Your Custom CSS Below to Change the Look of FreedomBox */
very difficult task, kudos for the effort and time. imho, maybe lighten up the grey background of app icons… or maybe a slight stroke of white around app icons… nice work all the same!
LOL, the only two I found to be fugly were Matrix and MiniDLNA and I’ll never use the latter. I found the matrixsynapse.svg and turned it from black to white in Inkscape and over-wrote the original.
Base.html got overwritten sometime in the past couple of days. Perhaps you could get this added;
<link rel="stylesheet" href="/plinth/static/theme/css/user.css"/>
as line 57 here - https://salsa.debian.org/freedombox-team/freedombox/-/blob/main/plinth/templates/base.html
It’s easy enough for me to add that line every time it gets wiped out but then the machine has to be restarted for it to take effect.
@poorboy , I will try to include a solution for user.css in the overall changes. I have been busy with other issues so far. I will try to do this in the next few days.
Thank you_______ 
Starting FreedomBox 24.25 (to be released soon) will allow users to provide their own custom styling with users.css.
4 Likes
@poorboy wrote…
People could share their css tweaks here that way too.
Could I encourage you to start a Tips & Tricks topic on themes to make a home for the Theme Team to share their work?
Also, this is brilliant. I started out afraid of this, but you make this look approachable and low risk.
<link rel="stylesheet" href="/plinth/static/theme/css/user.css"/>
I’m almost certain that with user.css being last, it would override bootsptrap.css and main.css
That way people don’t have to dig into bootstrap.css with it’s nearly 8,000 lines. People could share their css tweaks here that way too.