Opera-GX Theme for Firefox Css

• 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 from the << Releases >> section, in the right side of this page
2. Unzip the file and 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.

⚠ Notice:

The latest code updated in the repository (code > download zip) may work well only on beta or nightly versions.

Themes

• Main Themes:

  🔴Fuchsia

  🔵Blue

  🟢Green

  🖍Poison

  🎑Swamp

  🌈Red-Blur

  🌆Purple-Sky

• Secondary Colors:

  💜Purple

  💚Aquamarine

  🦧Orange

  💠Cyan

  🍏GreenLight

  💛Yellow

  🗻Gray

• White Themes:

  ⚪🔴 Fuchsia

  ⚪🔵 Waves

• Theme Using an extension:

  You can use the "GX-Theme-Styles" Extension to a quick change of themes and colors, this extension works for solid themes only and/or for users that use the extra feature "Main-image". This extension was made by me.	GX Theme Styles
  You can also use the "Firefox Color" extension to change the accent color to your preference. Install the extension. Open the theme you want to set: ⚫ Dark Theme or ⚪ Light Theme. Go to "Advanced colors" tab and change the color in "icons attention", this color will set the accent color to the theme.	Firefox Color

Here a "Video Explanation" to how switch into light and dark mode for your web content.

Extras

Into the "Extras" folder you will find the next features.

• OneLine - The tabs-bar will be next to the navbar.
• Tab Shapes - Give the tabs other style.
• 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.
• Classic-Sound-icon - The tabs with sound will show a rhythm image.
• Night tab extension - Simple OperaGX style Newtab using the Nighttab extension. [external partner]
• Play/Pause icon button extension - Enables the possibility to play or pause tabs with a click on the sound icon.
• Gx-mods Extension - Simulate the Opera-GX sound effects in FIrefox. [non-associated developer].

You can disable icons in context menus by creating and setting this preference to true on the about:config page: firefoxgx.icon.disabled

Tricks

Into the "Tricks" section you will find the next features.

• Solid background - Useful in themes that use images and have bad contrast.
• Image in menus - Display an image in all menus.
• Arrow in popup menus - Add an arrow in popup menus pointing the button active.
• Gradient border in menus - Border of menus will display a gradient.
• Compatibilidad con 'Adaptive-tab-bar-color-extension' - Small code to add in ogx_tricks.css file.

Customize

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.
  • Min-width of horizontal tabs
  • The width and label of the menu button.
  • Hide or show the firefox logo in the new-tab page.

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

NewTab Wallpaper

• (Option 1) In the directory: chrome/newtab there are 12 wallpapers (6 for dark theme and 6 for light theme), those images will display in the NewTab options for you to choose, you could rename the images you want with those names and the theme will display them, you can add your own images. You can find more images in: This Gallery.

• (Option 2) Editing the code chrome/components/ogx_root-personal.css lines from 18 to 34. With this method you can change too the accent color for each wallpaper.

Other 'about' pages Wallpaper

• By default the wallpaper selected is about-page-dark.png and about-page-light.png In the directory: chrome/newtab, you could rename the image you want with those names and the theme will display them in those pages, you can change the names in the chrome/components/ogx_root-personal.css file in the line 38 and the line 44 to the image you want.

Accent Color

• Editing the code chrome/components/ogx_root-personal.css lines from 18 to 34 you can change the accent color for each wallpaper for NewTab page. For the other pages (new-tab without wallpaper, preferences and add-ons pages) The chrome/components/ogx_root-personal.css file has the variable: --general-color to set the color, you could choose whatever you like. 💙💚💜🤎💛🧡❤ Restarting the browser is required.

Compatibility

• Windows 7 (Tested partially) ❌✔ - Preview
• Linux - Manjaro KDE (Tested - Probado) ✔ - Preview
• Windows 10 (Tested - Probado) ✔ - Preview
• Windows 11 (Tested - Probado) ✔ - Preview
• MacOS (Tested partially) ❌✔ - Preview
• Base theme ✔
• Left-sidebar ✔
• Tab-shapes ✔
• Other Extra features ❌

Known Issues

• In themes with images, when moving a tab it will display a bad background.
• Partial support for RTL (right-to-left) languages.

Related CSS-Theme

Example of about:support to reach the profile folder