Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Hakanbaban53/RealFire
A minimalist animated oneliner theme for Firefox perfectly matching real Dark.
https://github.com/Hakanbaban53/RealFire
css firefox firefox-css firefox-theme javascript realfire userchrome userscript
Last synced: about 15 hours ago
JSON representation
A minimalist animated oneliner theme for Firefox perfectly matching real Dark.
- Host: GitHub
- URL: https://github.com/Hakanbaban53/RealFire
- Owner: Hakanbaban53
- License: mit
- Created: 2023-09-02T17:50:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-09-09T17:35:33.000Z (18 days ago)
- Last Synced: 2024-09-09T20:56:42.676Z (18 days ago)
- Topics: css, firefox, firefox-css, firefox-theme, javascript, realfire, userchrome, userscript
- Language: JavaScript
- Homepage:
- Size: 60.2 MB
- Stars: 28
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [RealFire 🔥](https://github.com/Hakanbaban53/RealFire)
**A minimalist animated oneliner theme for Firefox perfectly matching real Dark**
## 🏞 Screenshots
Click me 🐈
Adaptive Tab Bar Extension Support
Horizonal Tabs
MacOs Window Control & Fonts
Animated Background
Tab Preview
Context Menu
Auto-hide Scrollbars
Library
Adaptive Window Color With Windows & GNU/Linux
## 📃 Browser JS Files
### [`userChrome.css`](./userChrome.css)
This helps to customize Firefox User Interface.
### [`userContent.css`](./userContent.css)
This helps to customize web content like a specific site.
### [`aboutUserChrome.sys.mjs by aminomancer`](https://github.com/aminomancer/uc.css.js#aboutUserChrome)
This script helps to enabled or disabled browser scripts. Adding new entry the application menu named UserChrome Maneger (Shortcut `Ctrl+Shift+U`).
### [`tabThumbnailTooltip.uc.js by aminomancer`](https://github.com/aminomancer/uc.css.js#tab-thumbnail-tooltip)
Show a large thumbnail image to preview tab content when hovering a tab.
### [`hideScrollbar.uc.js`](./JS/hideScrollbar.uc.js)
It's now possible to autohide scrollbars.
### [`verticalTabsPane.uc.js by aminomancer (Edited for RealFire)`](./JS/verticalTabsPane.uc.js)
This script create a vertical pane across from the sidebar that functions like the vertical tabs pane in Microsoft Edge. Writed by [aminomancer](https://github.com/aminomancer) but I edited full compatibility for RealFire.
### [`macosTheme.uc.js`](./JS/macosTheme.uc.js)
This script to convert font and window controls to macos style.
#### [`You can look here to find out what other scripts do.`](https://github.com/aminomancer/uc.css.js#script-conventions) 👈
## ❓ **But how does it work?**
Custom startup-script (aka [`mozilla.cfg`](./programs/mozilla.cfg) here) is loaded using [`local-settings.js`](./programs/local-settings.js). This startup-script adds "loader" scripts from `utils` folder that loads arbitrary javascript files from the `script` folder into Firefox
`mozilla.cfg` also helps in setting local webpage as your homepage. Details in [Installation](#Installation) (Currently Not Working!).
## 💡 Installation
Curl based Installation (You can install this theme with one line command)
GNU/Linux & MacOS
```console
$ curl -s -o- https://raw.githubusercontent.com/Hakanbaban53/RealFire/main/programs/install-curl.sh | bash # Standard
$ curl -s -o- https://raw.githubusercontent.com/Hakanbaban53/RealFire/main/programs/install-curl.sh | bash -s -- -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak
$ curl -s -o- https://raw.githubusercontent.com/Hakanbaban53/RealFire/main/programs/install-curl.sh | bash -s -- -f ~/snap/firefox/common/.mozilla/firefox/ # Snap
```
Windows
```powershell
> curl -sL "https://raw.githubusercontent.com/Hakanbaban53/RealFire/main/programs/install-curl.bat" > %TEMP%\install-curl.bat && %TEMP%\install-curl.bat REM Standard
> curl -sL "https://raw.githubusercontent.com/Hakanbaban53/RealFire/main/programs/install-curl.bat" > %TEMP%\install-curl.bat && %TEMP%\install-curl.bat -b "C:\Program Files (x86)\Mozilla Firefox" REM Custom binary folder
```
This will download the master branch and run the installation script.
`mozilla.cfg` can be configured after complete installation
Script Installation
1. Clone the repository and enter folder:
```console
$ git clone https://github.com/Hakanbaban53/RealFire.git && cd RealFire
```
2. Run installation script
This script will lookup default Firefox profile location and install the theme with default configurations.
GNU/Linux & MacOS
```console
$ ./programs/install.sh # Standard
$ ./programs/install.sh -f ~/.var/app/org.mozilla.firefox/.mozilla/firefox # Flatpak
$ ./programs/install.sh -f ~/snap/firefox/common/.mozilla/firefox/ # Snap
```
Windows
```powershell
> programs\install.bat REM Standard
> programs\install.bat -e -b "C:\Program Files (x86)\Mozilla Firefox" REM Disable fx-autoconfig and Custom binary folder
```
#### Script options
- `-b ` _optional_
- Set custom Firefox binary folder path, for example `/usr/lib32/firefox`
- Default: Auto detects in linux. `C:\Program Files\Mozilla Firefox` in windows
- `-f ` _optional_
- Set custom Firefox folder path, for example `~/.mozilla/icecat/`
- Default: `~/.mozilla/firefox/` in linux. `%APPDATA%\Mozilla\Firefox` in windows
- `-p ` _optional_
- Set custom profile name, for example `4htgy4pu.app`
- Default: Profile folder name found in `profiles.ini` at ->
```
[Install4F96D1932A9F858E]
Default=1yrah0xg.default-release
Locked=1
```
- `-e` _optional_
- Install [`fx-autoconfig`](https://github.com/MrOtherGuy/fx-autoconfig)
- Runs sudo to copy `mozilla.cfg` and `local-settings.js` to Application Binary folder
- Default: True
- `-h` _optional_
- Shows help message with flags info
Manual Installation
1. Open `about:support` in new tab and click `Open Directory` near `Profile Directory`.
2. Open this directory in terminal and clone the repository
Note: If you already have a `chrome` folder under `Profile Directory`, rename it to `chrome_bak` or anything else to preserve your old theme.
```console
$ cd {Your profile directory}
$ git clone https://github.com/Hakanbaban53/RealFire.git chrome
$ cd chrome
```
MacOS
- `about:support` > `Application Binary` > `{Installation folder}firefox`
Generally `Installation folder` is `/Applications/Firefox.app/Contents/MacOS/` (`Firefox Nightly` for Nightly version)
For `MacOS`, our destination folder is `/Applications/Firefox.app/Contents/Resources/`
```console
$ ln -s "`pwd`/programs/user.js" ../user.js
$ cp ./programs/mozilla.cfg /Applications/Firefox.app/Contents/Resources/
$ cp ./programs/local-settings.js /Applications/Firefox.app/Contents/Resources/defaults/pref/
```
Windows
- `about:support` > `Application Binary` > `{Installation folder}firefox.exe`
Generally `Installation folder` is `C:\Program Files\Mozilla Firefox\`
```powershell
> mklink ..\user.js "%cd%\programs\user.js"
> copy .\programs\mozilla.cfg "C:\Program Files\Mozilla Firefox\"
> copy .\programs\local-settings.js "C:\Program Files\Mozilla Firefox\defaults\pref\"
```
```
- 🗑️ If you want to remove the Theme:
#### GNU/Linux & MacOS
./programs/uninstall.sh
#### Windows
Not Released Yet....
#### 🔧 Follow-up changes
1. In Firefox
- Right click hamburger button > `customize toolbar` disable `Title Bar`, `Drag Space`.
- Remove `Flexible Space` from urlbar.
- Set Density to `Compact/Normal/Touch` and Themes to `Dark` or `Light`.
2. Open `about:support` > `Clear startup cache...` > `Restart` **_twice_**
3. ### **Voilà**
## ⚙️ Configuration
1. You can use the [ realfire-config.css ](https://github.com/Hakanbaban53/RealFire/blob/main/includes/realfire-config.css) change the a lot of variables.
2. If you run the automatic installation script, it will install all the files in the folders where they need to be installed.
3. If something breaks on your system then please raise a issue
## 📌 Known issues
- Adaptive window color with windows not working on preferences page and start page (Windows only). If you want the change it use the [ realfire-config.css ](https://github.com/Hakanbaban53/RealFire/blob/main/includes/realfire-config.css) file.
## 📂 Folder structure
```css
🗃 .
├── 🖿 assets
│ └── 🖻 preview images
├── 🖿 img
│ └── 🖻 new tab background image
├── 🖿 icons
│ ├── 🗎 animation.svg
│ └── 🗐 many icons in .svg format
├── 🖿 includes
│ ├── 🗎 realfire-checkbox.css
│ ├── 🗎 realfire-icons.css
│ ├── 🗎 realfire-config.css
│ └── 🗐 other .css files
├── 🖿 JS
│ ├── 🗎 aboutUserChrome.sys.mjs
│ ├── 🗎 navbarToolbarButtonSlider.uc.js
│ ├── 🗎 tabThumbnailTooltip.uc.js
│ ├── 🗎 verticalTabsPane.uc.js
│ ├── 🗎 tabThumbnailTooltip.uc.js
│ ├── 🗎 macosTheme.us.js
│ └── 🗐 many script in .uc.js format
├── 🖿 programs
│ ├── 🗎 install-cfg.sh
│ ├── 🗎 install.sh
│ ├── 🗎 install-curl.sh
│ ├── 🗎 install.bat
│ ├── 🗎 install-curl.bat
│ ├── 🗎 local-settings.js
│ ├── 🗎 mozilla.cfg
│ └── 🗎 user.js
├── 🖿 resources
│ └── 🗐 userchrome Manager page files
├── 🖿 utils
│ ├── 🗎 .editorconfig
│ ├── 🗎 boot.sys.mjs
│ ├── 🗎 chrome.manifest
│ ├── 🗎 fs.sys.mjs
│ └── 🗎 utils.sys.mjs
├── 🗎 README.md
├── 🗎 userChrome.css
└── 🗎 userContent.css
```
## Credits
- I started with this amazing material theme : [Sweet_Pop!](https://github.com/PROxZIMA/Sweet-Pop) by [PROxZIMA](https://github.com/PROxZIMA)
- One of the best dark theme for Firefox : [ShadowFox](https://overdodactyl.github.io/ShadowFox) by [overdodactyl](https://github.com/overdodactyl)
- [Theme inspiration](https://www.reddit.com/r/FirefoxCSS/comments/ci7i69/another_oneline_theme/) by [u/SENDMEJUDES](https://www.reddit.com/user/SENDMEJUDES/)
- [Installation script](https://github.com/rafaelmardojai/firefox-gnome-theme) details.
---
## Stargazers over time
[](https://starchart.cc/Hakanbaban53/RealFire)
[Back to top](#RealFire_🔥)
---
Hakan İSMAİL ❤