{"id":23969099,"url":"https://github.com/jiab77/ipfire-dark-theme","last_synced_at":"2025-04-13T16:23:18.810Z","repository":{"id":87588093,"uuid":"583051075","full_name":"Jiab77/ipfire-dark-theme","owner":"Jiab77","description":"Simple dark theme patch for the IPFire web interface.","archived":false,"fork":false,"pushed_at":"2024-04-11T15:55:05.000Z","size":826,"stargazers_count":4,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-27T07:21:19.288Z","etag":null,"topics":["bash","dark-theme","ipfire","javascript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Jiab77.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2022-12-28T16:06:59.000Z","updated_at":"2024-04-06T22:06:40.000Z","dependencies_parsed_at":null,"dependency_job_id":"fd6b26c9-7ff0-437f-9e0b-35f5e89991f5","html_url":"https://github.com/Jiab77/ipfire-dark-theme","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jiab77%2Fipfire-dark-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jiab77%2Fipfire-dark-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jiab77%2Fipfire-dark-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Jiab77%2Fipfire-dark-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Jiab77","download_url":"https://codeload.github.com/Jiab77/ipfire-dark-theme/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248742116,"owners_count":21154433,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bash","dark-theme","ipfire","javascript"],"created_at":"2025-01-07T01:00:25.821Z","updated_at":"2025-04-13T16:23:18.792Z","avatar_url":"https://github.com/Jiab77.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# IPFire dark theme \u003c!-- omit from toc --\u003e\n\nSimple dark theme patch for the IPFire web interface.\n\n## Current version \u003c!-- omit from toc --\u003e\n\nThe latest version is __`0.5.3`__ and __`0.5.8`__.\n\n## Content \u003c!-- omit from toc --\u003e\n\n* [How it works?](#how-it-works)\n* [What it does exactly?](#what-it-does-exactly)\n* [Is it safe to use?](#is-it-safe-to-use)\n* [How to see if running the latest version?](#how-to-see-if-running-the-latest-version)\n  * [From CLI](#from-cli)\n  * [From files](#from-files)\n  * [From the web console](#from-the-web-console)\n* [Installation](#installation)\n* [Usage](#usage)\n  * [Update](#update)\n  * [Uninstall](#uninstall)\n  * [Reset](#reset)\n* [Misc](#misc)\n  * [Get versions of the files](#get-versions-of-the-files)\n  * [Get latest changes in the project](#get-latest-changes-in-the-project)\n  * [Run basic sanity check](#run-basic-sanity-check)\n* [Screenshots](#screenshots)\n  * [Before patch](#before-patch)\n  * [After patch](#after-patch)\n* [Roadmap](#roadmap)\n* [Community](#community)\n* [Contribute](#contribute)\n  * [By creating / reporting new issues](#by-creating--reporting-new-issues)\n  * [By submitting pull requests](#by-submitting-pull-requests)\n* [Contributors](#contributors)\n* [Author](#author)\n\n---\n\n## How it works?\n\nThe patch simply consist in two files:\n\n1. [patch.js](patch.js) - Does the heavy work for setting up the dark theme\n2. [patch.sh](patch.sh)\n   * Patch the `functions.pl` file,\n   * install the patch in the `include` folder\n   * and rename the patch to `darkmode.js`\n\nOnce loaded, it will check if your environment is already configured in dark mode and load the required CSS code accordingly.\n\nTo provide a manual switch between light and dark modes, it also inject a selector next to the __RED__ traffic stats.\n\n## What it does exactly?\n\nWhat the patch does exactly is the following:\n\n* Check if your environment is already configured in dark mode\n* Target each DOM elements that needs to be styled differently\n* Apply the dark theme CSS code on targetted DOM elements\n* Store the user preference in the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)\n\nThe 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.\n\n\u003e Please check the [roadmap](README.md#roadmap) to see if pages with tables are now fully supported or if the work is still in progress.\n\n## Is it safe to use?\n\nThe 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](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) feature supported by the modern browsers to store the theme preference. __If you have something against that, please don't use this project.__\n\n\u003e 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.\n\n## How to see if running the latest version?\n\nAs 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. 🙇‍♂️\n\nSo to help users to find out if they are running the latest version, I'll describe here the whole process.\n\n### From CLI\n\nGo to the project folder and run the following command:\n\n```console\n# ./patch.sh -v\n```\n\n\u003e You can also use `--version` if you prefer use explicit arguments.\n\nYou should get something similar:\n\n![Components versions from CLI](images/show-cli-versions.png)\n\n### From files\n\n1. Check for corresponding SRI hash in [patch.js.sri](patch.js.sri) and `patch.sh` line [#38](patch.sh#L38).\n2. Check for corresponding SRI hash in `functions.pl`, you can see it from your browser in any page source code, the `\u003cscript\u003e\u003c/script\u003e` line injected in the WUI can be found before the `\u003c/head\u003e` tag:\n\n    ```\n    NPXhjUcE2TVeAAe/K1aXUbsrqRxnFfOsKD0lwB8KGzdTK36H3V3wS/tEp9+44OKGiTdzuq+SGqEjXrpWvycH2Q==\n    ```\n\n3. Check `patch.js` [version](patch.js#L5) and `patch.sh` [version](patch.sh#L7), both are respectively __`0.5.3`__ and __`0.5.8`__.\n\nIf you are running the latest version and still have nothing working on your side, please create a new [issue](https://github.com/Jiab77/ipfire-dark-theme/issues/new/choose) and I'll try my best to debug it.\n\n\n### From the web console\n\nHit the \u003ckbd\u003eF12\u003c/kbd\u003e key or \u003ckbd\u003eCtrl\u003c/kbd\u003e + \u003ckbd\u003eShift\u003c/kbd\u003e + \u003ckbd\u003eI\u003c/kbd\u003e to open the web console.\n\nYou should see something like that:\n\n```\nDark mode patch for IPFire loaded.\n\nVersion: 0.5.3\n```\n\n## Installation\n\n1. Install `git` with __Pakfire__\n2. Clone the project and run the patch:\n\n```console\n# pakfire install -y git\n# git clone https://github.com/Jiab77/ipfire-dark-theme.git\n# cd ipfire-dark-theme\n# ./patch.sh\n```\n\nOnce done, simply reload the page(s).\n\n\u003e 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.\n\n## Usage\n\nOnce you've installed the patch, you should notice a new icon next to the __RED Traffic__ stats:\n\n![Dark theme selector icon](images/dark-theme-selector.png)\n\nJust click on it and it will trigger the handler that will apply the dark theme and toggle the icon state:\n\n![Dark theme selector icon 2](images/dark-theme-selector-2.png)\n\nThe 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.\n\nYour theme selection will be stored using the [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) feature in `HTML5` supported by modern browsers:\n\n![Theme selection stored](images/stored-data.png)\n\n\u003e I initially wanted to use [sessionStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage) instead of [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/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.\n\u003e\n\u003e 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](https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage).\n\n### Update\n\nRun the patch script with `-u`, it will then:\n\n* Check if `git` is installed (*You can install it with __Pakfire__*)\n* Get the latest version from github\n* Compare local and latest versions\n* Run the removal and install methods if necessary\n\n```console\n# cd ipfire-dark-theme\n# ./patch.sh -u\n```\n\n\u003e You can also use `--update` if you prefer the long version.\n\n### Uninstall\n\nRun the patch script with `-r`, it will then remove the installed patch.\n\n```console\n# cd ipfire-dark-theme\n# ./patch.sh -r\n```\n\n\u003e You can also use `--remove` if you prefer the long version.\n\n### Reset\n\nRun the patch script with `-R`, it will then remove and reinstall the patch.\n\n```console\n# cd ipfire-dark-theme\n# ./patch.sh -R\n```\n\n\u003e You can also use `--reset` if you prefer the long version.\n\n## Misc\n\nFew other features has been implemented in the patching script.\n\n### Get versions of the files\n\n```console\n# cd ipfire-dark-theme\n# ./patch.sh -v\n```\n\n\u003e You can also use `--version` if you prefer the long version.\n\n### Get latest changes in the project\n\n```console\n# cd ipfire-dark-theme\n# ./patch.sh -c\n```\n\n\u003e You can also use `--changelog` if you prefer the long version.\n\n### Run basic sanity check\n\n```console\n# cd ipfire-dark-theme\n# ./patch.sh -s\n```\n\n\u003e You can also use `--sanity` if you prefer the long version.\n\n## Screenshots\n\n### Before patch\n\n![System info before patch](images/system-before-patch.png)\n\n### After patch\n\n![System info after patch](images/system-after-patch.png)\n\n## Roadmap\n\n* [X] Create initial version\n* [X] Add missing CSS code for tables\n* [X] Avoid exposing sensible details about the WUI structure\n* [X] Replace icons used by open source ones from [feather](https://github.com/feathericons/feather)\n* [X] Improve the main README\n* [X] Create an issue regarding the discovered table rendering bug\n* [X] Implement `update` feature\n* [X] Implement [SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity)\n* [X] Add strict type check on user stored preference value\n* [X] Move the patching code to an [IIFE](https://en.wikipedia.org/wiki/Immediately_invoked_function_expression) to avoid polluting global scope\n* [X] Implement `no-sri` feature\n* [X] Implement `version` feature\n* [X] Implement `changelog` feature\n* [X] Implement `sanity` check feature\n* [X] Implement `reset` feature\n* [ ] Implement `solarized` theme\n* [ ] Improve support for all `\u003ctable\u003e` based pages (_almost done?_)\n  * [ ] Improve support for `\u003ctable\u003e` contents\n* [ ] Improve support for all major browsers (_almost done?_)\n* [ ] Apply to the IPFire developer guidelines and mailing lists (_process started_)\n* [ ] ~~Package and distribute the code as an [add-on](https://wiki.ipfire.org/devel/ipfire-2-x/addon-howto)~~ (_might be not necessary_)\n* [ ] Find a way to add my code in the core project\n* [ ] Make it persistent across updates\n\n## Community\n\nYou can find the discussion around this project [here](https://community.ipfire.org/t/missing-dark-mode/9132).\n\n## Contribute\n\nThere is at least two ways to contribute to this project. I'll try to describe them below.\n\n### By creating / reporting new issues\n\nIf you fins something that gets difficult to read when the Dark Theme is enabled, please join the [discussion](https://community.ipfire.org/t/missing-dark-mode/9132) or create a new [issue](https://github.com/Jiab77/ipfire-dark-theme/issues/new/choose).\n\n### By submitting pull requests\n\nThe `main` branch is protected by some security rules:\n\n* Contributors must sign their commits with their GPG key\n  * __All unsigned commits will be automatically rejected.__\n* The above rule can't be bypassed\n\nHere is the development flow / method that you must follow:\n\n* Make 2 test VMs (dev / prod)\n* Work only from the latest version\n* Clone the project and run the [install script](patch.sh) with the `--no-sri` argument\n* When you've finished your tests and are ready to push your code:\n  * Increment version number in [patch.js](patch.js)\n  * Run the [gen-sri.sh](tools/gen-sri.sh) script\n    * `./tools/gen-sri.sh patch.js -s`\n  * Update the [install script](patch.sh) and this [README](README.md) with the newly generated SRI hash\n  * Increment version number in [patch.sh](patch.sh)\n\n\u003e 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:\n\u003e\n\u003e I'll to make it better as soon as I can.\n\n## Contributors\n\nI'd like to give huge thanks for these people from the [IPFire](https://www.ipfire.org/) community who helped me a lot to improve this project and make it as good as it is now. :bowing_man:\n\n\u003ctable\u003e\n  \u003ctr\u003e\n  \u003ctd align=\"center\"\u003e\u003cstrong\u003eNickname\u003c/strong\u003e\u003c/td\u003e\n  \u003ctd align=\"center\"\u003e\u003cstrong\u003eContribution\u003c/strong\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ccode\u003e@bonnietwin\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eFor the introduction to the community and help on the understanding of the developers guidelines and way to do things\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ccode\u003e@cfusco\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eFor his very good security advices and his shared web development interest\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ccode\u003e@luani\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eFor his care and interest into the project development\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\u003ccode\u003e@sec-con\u003c/code\u003e\u003c/td\u003e\n    \u003ctd\u003eFor his care about security and portability aspects in the project\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\"\u003e\n      \u003ccode\u003e@roberto\u003c/code\u003e,\n      \u003ccode\u003e@mumpitz\u003c/code\u003e,\n      \u003ccode\u003e@siosios\u003c/code\u003e,\n      \u003ccode\u003e@experimental\u003c/code\u003e,\n      \u003ccode\u003e@tphz\u003c/code\u003e,\n      \u003ccode\u003e@ummeegge\u003c/code\u003e\n    \u003c/td\u003e\n    \u003ctd\u003eFor their extensive and detailed issues reporting and testing\u003c/td\u003e\n  \u003c/tr\u003e\n  \u003ctr\u003e\n    \u003ctd colspan=\"2\" align=\"center\"\u003e\u003cstrong\u003eAnd all others who gave a try and appreciated my work\u003c/strong\u003e\u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003e Hope to not have forgotten anyone but if so, please let me know and I'll add you. :wink:\n\n## Author\n\n* __Jiab77__\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiab77%2Fipfire-dark-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjiab77%2Fipfire-dark-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjiab77%2Fipfire-dark-theme/lists"}