Opera-GX Theme for Firefox Css

(EN) A theme for Opera GX Skin Lovers. Complete compatibility with the stable version of the browser.

¿How to install?

Steps to configure the theme:
1. Download the theme with the big button: Code >> Download.zip
2. Copy the chrome folder and the user.js file into your Firefox profile directory.
3. Install and use a compatible theme.
4. Restart the browser.

• To find out the location of your profile directory go to about:support or about:profiles.

Temas - Themes

• Temas Principales - Main Themes: 🔴Fuchsia 🔵Blue 🟢Green 🌈Custom
• Otros Colores - Other Colors: 💜Purple 💚Aquamarine 🦧Orange 💠Cyan 🍏GreenLight 💛Yellow 🗻Gray
• White Theme ⚪

Here a "Video Explanation" to how switch into light and dark mode.

---

You can also use the "Firefox Color" extension to change the accent color to your preference. To change the color go into the extension page:

1. In "Custom colors" tab change the color in "Toolbar Color", select a black color for a dark theme or select white for a light theme.
2. Go to "Advanced colors" tab and change the color in "icons attention", this color will set the accent color to the theme.

Extras

• OneLine - The tabs-bar will be next to the navbar.
• Main-Image - This configuration will simulate a image behind all the browser.
• Left Side-Bar - The bookmark-bar will display on the left of the window.
• Tree Style Tabs - Compatibility to the extension that put the tabs vertically.
• Play/Pause icon button extension - Enables the possibility to play or pause tabs with a click on the sound icon.

Customize

Personalizaciones Varias - Various customizations

• The file --> chrome --> components --> ogx_root-personal.css contains very useful and easy to use variables, so it is easier to change:

  • Wallpaper and its brightness.
  • Height of the tabs and toolbar.
  • The width and label of the menu button.
  • The label of your account replacing the email in the hamburger-menu.
  • Hide or show the firefox logo or the search bar.

  Every variable has a description on the right, so you know what to customize without breaking the file.

Fondo Nueva Pestaña - NewTab Wallpaper

• (Option 1) In the directory: chrome >> images >> newtab there is a set of wallpapers, the images that the theme will select by default are: "wallpaper-light.png" and "wallpaper-dark.png", you could rename the images you want with that names and the theme will select them, you can add your own images. If you don't want a wallpaper just delete the files with the specified names. You can find more images here: >>This Gallery<< . Restarting the browser after changing the wallpaper is required.

• (Option 2) Editing the code --> chrome --> components --> ogx_root-personal.css lines: 19 and 23.

Color Principal - Accent Color

• It has manual customization of the accent color for userContent.css (new-tab, preferences and add-ons page). The file in --> chrome --> components --> ogx_root-personal.css has the variable: " --general-color " to set the color, you could choose whatever you like. 💙💚💜🤎💛🧡❤ --> Restarting the browser is required.

Compatibility

• Windows 7 (Not tested) ❌
• Linux - Manjaro KDE (Tested) ✔ - Preview
• Windows 10 (Tested) ✔ - Preview
• Windows 11 (Tested) ✔ - Preview
• MacOS (Tested) ✔ - Preview
  ( ⚠ - Please delete the ogx_menu.css file)
  Thanks to FormalSnake for helping to test the theme.

Example of about:support

To add the full profile "The firefox folder"

Note this profile have more extentions and more

you can enable haptic sound on click using "noice" extension "installed"

• Go to about:profiles
• Create a New Profile



• choose name for the profile and choose the firefox folder
• Click finish and set as default close the browser and open it again
• NOTE DO NOT DELETE THE FOLDER OF "firefox" so store it in safe place

Opera-gx linux

run_directly:

firefox --profile /path/to/firefox-folder