Simple dark theme patch for the IPFire web interface.
The latest version is 0.5.3
and 0.5.8
.
The patch simply consist in two files:
functions.pl
file,include
folderdarkmode.js
Once loaded, it will check if your environment is already configured in dark mode and load the required CSS code accordingly.
To provide a manual switch between light and dark modes, it also inject a selector next to the RED traffic stats.
What the patch does exactly is the following:
The heavy work is mainly to find the right CSS selectors to use for targetting the DOM elements that needs to be styled. It was pretty easy for the generic part of the WUI but not really for the pages composed of tables.
Please check the roadmap to see if pages with tables are now fully supported or if the work is still in progress.
The project is written in pure Javascript and does not rely on any third party code or frameworks and does not load any external resources but it uses the localStorage feature supported by the modern browsers to store the theme preference. If you have something against that, please don't use this project.
I totally understand that people can be against storing data in their browser space and will try to provide a better way to store theme preference in the next release.
As I had some difficulties to make a proper update process, it resulted in potentially broken updates or simply new releases not being installed correctly. Please, accept all my appologies for that. 🙇♂️
So to help users to find out if they are running the latest version, I'll describe here the whole process.
Go to the project folder and run the following command:
# ./patch.sh -v
You can also use
--version
if you prefer use explicit arguments.
You should get something similar:
Check for corresponding SRI hash in patch.js.sri and patch.sh
line #38.
Check for corresponding SRI hash in functions.pl
, you can see it from your browser in any page source code, the <script></script>
line injected in the WUI can be found before the </head>
tag:
NPXhjUcE2TVeAAe/K1aXUbsrqRxnFfOsKD0lwB8KGzdTK36H3V3wS/tEp9+44OKGiTdzuq+SGqEjXrpWvycH2Q==
Check patch.js
version and patch.sh
version, both are respectively 0.5.3
and 0.5.8
.
If you are running the latest version and still have nothing working on your side, please create a new issue and I'll try my best to debug it.
Hit the F12 key or Ctrl + Shift + I to open the web console.
You should see something like that:
Dark mode patch for IPFire loaded.
Version: 0.5.3
git
with Pakfire# pakfire install -y git
# git clone https://github.com/Jiab77/ipfire-dark-theme.git
# cd ipfire-dark-theme
# ./patch.sh
Once done, simply reload the page(s).
You can remove
git
right after from Pakfire once installed.git
is just required for downloading and updating the project to get the latest versions.
Once you've installed the patch, you should notice a new icon next to the RED Traffic stats:
Just click on it and it will trigger the handler that will apply the dark theme and toggle the icon state:
The code should automatically detect if your environment is already configured in dark mode and apply the dark theme on page load but you can always click on the icon to switch between dark and light theme.
Your theme selection will be stored using the localStorage feature in HTML5
supported by modern browsers:
I initially wanted to use sessionStorage instead of localStorage but the user theme selection would have been lost once the tab or browser is closed and I wanted to make it the most convenient as possible for the users.
I don't plan to store more than what you see on the screenshot but if you are annoyed or dislike that choice, please create an issue and I'll switch back to sessionStorage.
Run the patch script with -u
, it will then:
git
is installed (You can install it with Pakfire)# cd ipfire-dark-theme
# ./patch.sh -u
You can also use
--update
if you prefer the long version.
Run the patch script with -r
, it will then remove the installed patch.
# cd ipfire-dark-theme
# ./patch.sh -r
You can also use
--remove
if you prefer the long version.
Run the patch script with -R
, it will then remove and reinstall the patch.
# cd ipfire-dark-theme
# ./patch.sh -R
You can also use
--reset
if you prefer the long version.
Few other features has been implemented in the patching script.
# cd ipfire-dark-theme
# ./patch.sh -v
You can also use
--version
if you prefer the long version.
# cd ipfire-dark-theme
# ./patch.sh -c
You can also use
--changelog
if you prefer the long version.
# cd ipfire-dark-theme
# ./patch.sh -s
You can also use
--sanity
if you prefer the long version.
update
featureno-sri
featureversion
featurechangelog
featuresanity
check featurereset
featuresolarized
theme<table>
based pages (almost done?)
<table>
contentsYou can find the discussion around this project here.
There is at least two ways to contribute to this project. I'll try to describe them below.
If you fins something that gets difficult to read when the Dark Theme is enabled, please join the discussion or create a new issue.
The main
branch is protected by some security rules:
Here is the development flow / method that you must follow:
--no-sri
argument./tools/gen-sri.sh patch.js -s
I'm not sure to be very clear in this part as I'm not very used to that yet :sweat_smile: so please bear with me :grin:
I'll to make it better as soon as I can.
I'd like to give huge thanks for these people from the IPFire community who helped me a lot to improve this project and make it as good as it is now. :bowing_man:
Nickname | Contribution |
@bonnietwin |
For the introduction to the community and help on the understanding of the developers guidelines and way to do things |
@cfusco |
For his very good security advices and his shared web development interest |
@luani |
For his care and interest into the project development |
@sec-con |
For his care about security and portability aspects in the project |
@roberto ,
@mumpitz ,
@siosios ,
@experimental ,
@tphz ,
@ummeegge
|
For their extensive and detailed issues reporting and testing |
And all others who gave a try and appreciated my work |
Hope to not have forgotten anyone but if so, please let me know and I'll add you. :wink: