SkillAgentSearch skills...

RealFire

A minimalist animated oneliner theme for Firefox perfectly matching real Dark.

GenerateConvertImprove

Install / Use

/learn @Hakanbaban53/RealFire
About this skill

Quality Score

0/100

Supported Platforms

Universal

README

<div align="center">

RealFire 🔥

A minimalist animated oneliner theme for Firefox perfectly matching real Dark

</div> <p align="center"><img src="./assets/preview.png"></p>

🏞 Screenshots

<details><summary>Click me 🐈</summary> <h3 align="center">Adaptive Tab Bar Extension Support</h3> <p align="center"><img src="./assets/adaptive-tab-bar-extension-support.gif"></p> <h3 align="center">MacOs Window Control & Fonts</h3> <p align="center" style="max-heigh:250px"><img src="./assets/mac_os_theme.gif"></p> <h3 align="center">Animated Background</h3> <p align="center" style="max-heigh:250px"><img src="./assets/navbar.gif"></p> <h3 align="center">Context Menu</h3> <p align="center"><img src="./assets/context.png"></p> <h3 align="center">Auto-hide Scrollbars</h3> <p align="center" style="max-heigh:250px"><img src="./assets/hide_scroll_bar.gif"></p> <h3 align="center">Library</h3> <p align="center"><img src="./assets/library.png"></p> <h3 align="center">Adaptive Window Color With Windows & GNU/Linux</h3> <p align="center"><img src="./assets/adaptive.gif"></p> </details>

📃 Browser JS Files

userChrome.css

This helps to customize Firefox User Interface.

userContent.css

This helps to customize web content like a specific site.

hideScrollbar.uc.js

It's now possible to autohide scrollbars.

macosTheme.uc.js

This script to convert font and window controls to macos style.

❓ But how does it work?

Custom startup-script (aka mozilla.cfg here) is loaded using local-settings.js. This startup-script adds "loader" scripts from utils folder that loads arbitrary javascript files from the script folder into Firefox<br> mozilla.cfg also helps in setting local webpage as your homepage. Details in Installation (Currently Not Working!).

💡 Installation

<details><summary><strong><em>GUI Installation</em></strong></summary> <summary>Firefox Theme Installer</summary>

Check This Repo

Explore the Firefox Theme Installer repository for an easy and efficient way to install and manage your Firefox themes.

</details> <details><summary><strong><em>Curl based Installation (You can install this theme with one line command)</em></strong></summary> <details><summary>GNU/Linux & MacOS</summary><br> 
```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
```
</details> <details><summary>Windows</summary><br> 
```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
```
</details> 
This will download the master branch and run the installation script.
`mozilla.cfg` can be configured after complete installation
</details> <details><summary><strong><em>Script Installation</em></strong></summary>

  1. Clone the repository and enter folder:

    $ 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.

    <details><summary>GNU/Linux & MacOS</summary><br> 
    $ ./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
    </details> <details><summary>Windows</summary><br> 
    > programs\install.bat REM Standard
> programs\install.bat -e -b "C:\Program Files (x86)\Mozilla Firefox" REM Disable fx-autoconfig and Custom binary folder
    </details>

    Script options

    • -b <binary_folder> 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 <firefox_folder> optional

      • Set custom Firefox folder path, for example ~/.mozilla/icecat/
      • Default: ~/.mozilla/firefox/ in linux. %APPDATA%\Mozilla\Firefox in windows

    • -p <profile_name> 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
      • Runs sudo to copy mozilla.cfg and local-settings.js to Application Binary folder
      • Default: True

    • -h optional

      • Shows help message with flags info
      </details>
<details><summary><strong><em>Manual Installation</em></strong></summary>

  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.

    $ cd {Your profile directory}

$ git clone https://github.com/Hakanbaban53/RealFire.git chrome

$ cd chrome
    <details><summary>MacOS</summary><br>

    • about:support > Application Binary > {Installation folder}firefox<br> 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/

    $ 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/
    </details> <details><summary>Windows</summary><br>
    • about:support > Application Binary > {Installation folder}firefox.exe<br> Generally Installation folder is C:\Program Files\Mozilla Firefox\
    > 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\"
    </details> ```
</details>

  • 🗑️ If you want to remove the Theme:

    GNU/Linux & MacOS

    ./programs/uninstall.sh

    Windows

    ./programs/uninstall.bat

🔧 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 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

  4. If you want to use vertical tabs, you may need to edit this line in the realfire-config.css file.

📌 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 file.

📂 Folder structure

🗃 .
├── 🖿 assets
│   └── 🖻 preview images
├── 🖿 img
│   └── 🖻 new tab background image
├── 🖿 includes
│   ├── 🗎 realfire-checkbox.css
│   ├── 🗎 realfire-icons.css
│   ├── 🗎 realfire-config.css
│   └── 🗐 other .css files
├── 🖿 JS
│   ├── 🗎 aboutUserChrome.sys.mjs
│   ├── 🗎 navbarToolbarButtonSlider.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
│   ├── 🗎 uninstall.bat
│   ├── 🗎 uninstall.sh
│   └── 🗎 user.js
├── 🖿 resources
│   └── 🖿 icons
│       └── 🗐 many icons in .svg format
├── 🖿 utils
│   ├── 🗎 .editorconfig
│   ├── 🗎 boot.sys.mjs
│   ├── 🗎 chrome.manifest
│   ├── 🗎 fs.sys.mjs
│   └── 🗎 utils.sys.mjs
├── 🗎 README.md
├── 🗎 userChrome.css
└── 🗎 userContent.css

Credits

Stargazers over time

[![Stargazers over time](https://starchart.cc/Hak

Hakanbaban53

View profile

View on GitHub
GitHub Stars31
CategoryDevelopment
Updated8d ago
Forks2
Hakanbaban53/RealFire

Languages

JavaScript

Security Score

95/100

Audited on Apr 1, 2026

No findings