Design update in eOS 8 style

flatpak.css

@@ -27,116 +27,6 @@ menubar > menu[_moz-menuactive="true"][open="true"] {
     color: black !important;
 }
 
-/* Dark Mode in Firefox */
-menupopup:-moz-lwtheme-brighttext, panel:-moz-lwtheme-brighttext {
-    --panel-background: #303030 !important;
-    --panel-color: #fff !important;
-    --panel-border-color: #000 !important;
-    --arrowpanel-background: #303030 !important;
-    --arrowpanel-color: #fff !important;
-    --arrowpanel-border-color: #000 !important;
-    --button-hover-bgcolor: rgba(255,255,255,0.10) !important;
-    --panel-item-hover-bgcolor: rgba(255,255,255,0.10) !important;
-}
-menupopup:not(#BMB_bookmarksPopup) menu[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton):-moz-lwtheme-brighttext,
-menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"]:not([disabled="true"]):not(.subviewbutton):-moz-lwtheme-brighttext {
-    appearance: none !important;
-    color: #FFF !important;
-    background-color: rgba(255,255,255,0.10) !important;
-}
-#BMB_unsortedBookmarksPopup menu[_moz-menuactive="true"][disabled="true"]:-moz-lwtheme-brighttext,
-#BMB_unsortedBookmarksPopup menuitem[_moz-menuactive="true"][disabled="true"]:-moz-lwtheme-brighttext {
-    appearance: none !important;
-    background-color: #303030 !important;
-}
-menubar > menu[_moz-menuactive="true"][open="true"]:-moz-lwtheme-brighttext {
-    appearance: none !important;
-	color: #d1d1d1 !important;
-	background-color: rgba(255,255,255,0.10) !important;
-	margin: 0px 6px !important;
-}
-
-/* Dark Mode in Tweaks */
-.urlbarView-favicon:-moz-lwtheme-brighttext,
-#urlbar-input-container image:not(#userContext-indicator):-moz-lwtheme-brighttext,
-.urlbarView image:-moz-lwtheme-brighttext,
-#customization-palette-container image:-moz-lwtheme-brighttext,
-#nav-bar-customization-target > toolbarbutton:not(hbox) > image:-moz-lwtheme-brighttext,
-#nav-bar-customization-target > toolbarpaletteitem image:-moz-lwtheme-brighttext,
-#nav-bar-overflow-button image:-moz-lwtheme-brighttext,
-#nav-bar-customization-target stack:-moz-lwtheme-brighttext,
-#PopupSearchAutoComplete image:-moz-lwtheme-brighttext,
-#searchbar image:-moz-lwtheme-brighttext,
-.tab-content > image:not(.tab-icon-image):-moz-lwtheme-brighttext,
-.toolbarbutton-icon[type="menu"]:-moz-lwtheme-brighttext,
-#bookmarks-toolbar-placeholder image:-moz-lwtheme-brighttext,
-#PlacesChevron .toolbarbutton-icon:-moz-lwtheme-brighttext,
-#import-button image:-moz-lwtheme-brighttext,
-#TabsToolbar-customization-target > toolbarbutton:not(hbox) > image:-moz-lwtheme-brighttext,
-#TabsToolbar-customization-target > toolbarpaletteitem image:-moz-lwtheme-brighttext,
-#nav-bar-customization-target > #zoom-controls > toolbarbutton > image:-moz-lwtheme-brighttext,
-#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > image:-moz-lwtheme-brighttext,
-#urlbar-search-mode-indicator-close:-moz-lwtheme-brighttext {
-    fill: #fff !important;
-}
-.urlbarView-body-inner:-moz-lwtheme-brighttext,
-.search-one-offs:not([is_searchbar="true"]):-moz-lwtheme-brighttext,
- #customization-footer:-moz-lwtheme-brighttext {
-    border-top: 1px solid rgba(255,255,255,0.2) !important;
-}
-.urlbarView-row[label]:-moz-lwtheme-brighttext,
-#urlbar-input:-moz-lwtheme-brighttext,
-.urlbarView-title:-moz-lwtheme-brighttext,
-#urlbar-one-offs-header-label:-moz-lwtheme-brighttext,
-.urlbarView-title-separator:-moz-lwtheme-brighttext,
-#customization-palette-container label:-moz-lwtheme-brighttext,
-#customization-palette-container:-moz-lwtheme-brighttext,
-#customization-footer checkbox:-moz-lwtheme-brighttext,
-.searchbar-textbox:-moz-lwtheme-brighttext,
-#PopupSearchAutoComplete label:-moz-lwtheme-brighttext,
-#PopupSearchAutoComplete button:-moz-lwtheme-brighttext,
-#PopupSearchAutoComplete richlistitem:-moz-lwtheme-brighttext,
-#identity-icon-label:-moz-lwtheme-brighttext,
-#import-button label:-moz-lwtheme-brighttext,
-#nav-bar-customization-target > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext,
-#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext,
-#TabsToolbar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext,
-#nav-bar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label:-moz-lwtheme-brighttext,
-#urlbar-zoom-button label:-moz-lwtheme-brighttext,
-#urlbar-search-mode-indicator-title:-moz-lwtheme-brighttext,
-#wrapper-personal-bookmarks label:-moz-lwtheme-brighttext,
-.tab-secondary-label label:-moz-lwtheme-brighttext {
-    color: #fff !important;
-}
-.tab-content > image:not(.tab-icon-image):-moz-lwtheme-brighttext {
-    fill: rgba(255,255,255,1) !important;
-}
-.tab-icon-pending:-moz-lwtheme-brighttext,
-.tab-throbber:-moz-lwtheme-brighttext,
-.tab-loading-burst:-moz-lwtheme-brighttext {
-    --tab-loading-fill: #fff !important;
-    color: #fff !important;
-}
-.tab-icon-image:-moz-lwtheme-brighttext {
-    fill: #fff !important;
-}
-#customization-container:-moz-lwtheme-brighttext {
-    background: #2A2A2E !important;
-}
-.browserContainer > findbar:-moz-lwtheme-brighttext {
-    background-color: #303030 !important;
-    color: #fff !important;
-    border: 1px solid rgba(56,56,56,1) !important;
-}
-.findbar-textbox:-moz-lwtheme-brighttext {
-    background-color: rgba(68,68,68,1) !important;
-    color: #fff !important;
-    border: 1px solid rgba(56,56,56,1) !important;
-}
-.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [crashed]):not(:is([pinned])):-moz-lwtheme-brighttext {
-    fill: #fff !important;
-}
-
 /* Dark Mode in Tweaks and elementary OS System */
 @media (prefers-color-scheme: dark) {
 menupopup, panel {
@@ -163,85 +53,4 @@ menupopup:not(#BMB_bookmarksPopup) menuitem[_moz-menuactive="true"]:not([disable
 menubar > menu[_moz-menuactive="true"][open="true"] {
 	color: #fff !important;
 	background-color: rgba(255,255,255,0.10) !important;
-}
-
-/* Dark Mode in Tweaks */
-.urlbarView-favicon,
-#urlbar-input-container image:not(#userContext-indicator),
-.urlbarView image,
-#customization-palette-container image,
-#nav-bar-customization-target > toolbarbutton:not(hbox) > image,
-#nav-bar-customization-target > toolbarpaletteitem image,
-#nav-bar-overflow-button image,
-#nav-bar-customization-target stack,
-#PopupSearchAutoComplete image,
-#searchbar image,
-.tab-content > image:not(.tab-icon-image),
-.toolbarbutton-icon[type="menu"],
-#bookmarks-toolbar-placeholder image,
-#PlacesChevron .toolbarbutton-icon,
-#import-button image,
-#TabsToolbar-customization-target > toolbarbutton:not(hbox) > image,
-#TabsToolbar-customization-target > toolbarpaletteitem image,
-#nav-bar-customization-target > #zoom-controls > toolbarbutton > image,
-#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > image,
-#urlbar-search-mode-indicator-close {
-    fill: #fff !important;
-}
-.urlbarView-body-inner,
-.search-one-offs:not([is_searchbar="true"]),
- #customization-footer {
-    border-top: 1px solid rgba(255,255,255,0.2) !important;
-}
-.urlbarView-row[label],
-#urlbar-input,
-.urlbarView-title,
-#urlbar-one-offs-header-label,
-.urlbarView-title-separator,
-#customization-palette-container label,
-#customization-palette-container,
-#customization-footer checkbox,
-.searchbar-textbox,
-#PopupSearchAutoComplete label,
-#PopupSearchAutoComplete button,
-#PopupSearchAutoComplete richlistitem,
-#identity-icon-label,
-#import-button label,
-#nav-bar-customization-target > #zoom-controls > toolbarbutton > label,
-#TabsToolbar-customization-target > #zoom-controls > toolbarbutton > label,
-#TabsToolbar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label,
-#nav-bar-customization-target > #wrapper-zoom-controls > #zoom-controls > toolbarbutton > label,
-#urlbar-zoom-button label,
-#urlbar-search-mode-indicator-title,
-#wrapper-personal-bookmarks label,
-.tab-secondary-label label {
-    color: #fff !important;
-}
-.tab-content > image:not(.tab-icon-image) {
-    fill: rgba(255,255,255,1) !important;
-}
-.tab-icon-pending,
-.tab-throbber,
-.tab-loading-burst {
-    --tab-loading-fill: #fff !important;
-    color: #fff !important;
-}
-.tab-icon-image {
-    fill: #fff !important;
-}
-#customization-container {
-    background: #2A2A2E !important;
-}
-.browserContainer > findbar {
-    background-color: #303030 !important;
-    color: #fff !important;
-    border: 1px solid rgba(56,56,56,1) !important;
-}
-.findbar-textbox {
-    background-color: rgba(68,68,68,1) !important;
-    color: #fff !important;
-    border: 1px solid rgba(56,56,56,1) !important;
-}
-.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture], [crashed]):not(:is([pinned])) {
-    fill: #fff !important;
 }}

readme.md

@@ -1,5 +1,5 @@
 # An elementary OS theme for Firefox
-![Screenshot](Promo_image_november-2024.png)
+![Screenshot](eos8_style_update.png)
 ## 🙏 Credits
 
 Credits to [Harvey Cabaguio](https://github.com/harveycabaguio/firefox-elementary-theme) for setting the theme up, [sempasha](https://github.com/sempasha) and [Ryo Nakano](https://github.com/ryonakano) for the install script and the elementary team for the UI design and icons.
@@ -9,8 +9,26 @@ Credits to [Harvey Cabaguio](https://github.com/harveycabaguio/firefox-elementar
 For now theme installation is supported for:
 
 1. [🦊 Firefox 📦 Flatpak version](https://flathub.org/apps/details/org.mozilla.firefox).
-2. [🦊 Firefox 📦 Snap version](https://snapcraft.io/firefox).
-3. [🐺 Librewolf 📦 Flatpak version](https://flathub.org/apps/details/io.gitlab.librewolf-community).
+2. [🐺 Librewolf 📦 Flatpak version](https://flathub.org/apps/details/io.gitlab.librewolf-community).
+3. [🦊 Firefox 📦 download package](https://www.mozilla.org/en-US/firefox/new/).
+
+**You can use Main menu to create a Firefox desktop entry:**
+- Download Firefox from the [website](https://www.mozilla.org/en-US/firefox/new/) and extract in a folder of your choice.
+- Open [Main menu](https://flathub.org/apps/page.codeberg.libre_menu_editor.LibreMenuEditor) (install it in AppCenter), click on the Settings wheel in the app list on the top right and select `New launcher`.
+- Fill in each section starting with Icon. Press the search glass and go to your Firefox folder `browser/chrome/icons/default` and select `default256.png`.
+- Under that section you can fill in `Firefox` as name of the launcher.
+- Under `Execute > Command` you fill in your Firefox folder location like `home/<username>/Apps/firefox/firefox` where the last "firefox" is the run file.
+- You can toggle "show this application in the main menu" `on`.
+- Then under that you can choose in which category the launcher is showing like `Internet`.
+- Then you can toggle animation `on` too.
+- Save by clicking the `save` button in the top bar of the window.
+
+**Now you need a dot under the Firefox icon when opened in the dock. Edit the desktop entry file:**
+- In the left list of Main menu, select Firefox icon and click on the Settings wheel and select `Edit document`, this opens Code with the desktop entry file visible.
+- Then open Firefox and Terminal.
+- Type `xprop WM_CLASS` in the Terminal, the result: your mouse cursor changes into a crosshair.
+- You can now click your crosshair cursor on the Firefox window and you will see the WM_Class of Firefox in Terminal.
+- Go to Code and type a new line in the `Desktop Entry` section, something like: `StartupWMClass=firefox`. Code will automatically save the file so just close all and move the Firefox icon from Slingshot to the Dock and enjoy the fully working and integrated Firefox.
 
 ❗*For other versions of Firefox, like Tor Browser for example, the theme needs to be installed manually. [We welcome contributions](https://github.com/Zonnev/elementaryos-firefox-theme/blob/elementaryos-firefox-theme/CONTRIBUTING.md) like editing a userChrome,*
 *for example to make a fully supported other version possible. Thanks in advance.*
@@ -40,9 +58,9 @@ This will make purple colors of Private Mode as default style.
 
 ## ➕ After installation
 
-1. In the customization panel in Firefox you can move the new tab button to the left and select System theme. You can also use the dark theme option but light theme is not supported.
-2. If you use [Pantheon Tweaks](https://github.com/pantheon-tweaks/pantheon-tweaks/) with the dark mode on, the theme changes to dark mode by itself. Firefox 98 and newer are changing to dark mode when the elementary OS system dark mode is set.
-3. In `about:config` you can make the bottom window corners rounded by setting `widget.gtk.rounded-bottom-corners.enabled` to `true`.
+1. In the customization panel in Firefox you can move the new tab button to the left. The default is System theme, you can also use the Dark theme option but Light theme is not supported.
+2. In `about:config` you can make the bottom window corners rounded by setting `widget.gtk.rounded-bottom-corners.enabled` to `true`.
+3. If you installed the **Flatpak** version of Firefox and you want to make use of the elementary OS **accent colors**, you have to copy the `usr/share/themes` folder to `home/.themes`. Type or copy-paste in Terminal `mkdir -p $HOME/.themes` to make the folder, then type `cp -r /usr/share/themes/* $HOME/.themes/` to copy the folder and place the files in the folder you have made. And after that `flatpak override --user org.mozilla.firefox --filesystem=$HOME/.themes` to make Flatpak version follow the elementary OS style sheets in the folder.
 
 ## 🔁 Update
 

userContent.css

@@ -40,10 +40,10 @@
 @media (prefers-color-scheme: dark) {
 @-moz-document url-prefix("about:"),  url-prefix("chrome://browser/content") {
 :root {
-    --in-content-page-background: var(--eOS-black-500) !important;
-    --in-content-background-color: var(--eOS-black-500) !important;
+    --in-content-page-background: var(--eOS-black-700) !important;
+    --in-content-background-color: var(--eOS-black-700) !important;
     --in-content-page-color: var(--eOS-silver-100) !important;
-    --in-content-table-background: var(--eOS-black-300) !important;
+    --in-content-table-background: var(--eOS-black-500) !important;
     --in-content-primary-button-text-color: var(--eOS-silver-100) !important;
     --in-content-primary-button-background: var(--eOS-blueberry-500) !important;
     --in-content-primary-button-background-hover: var(--eOS-blueberry-300) !important;
@@ -52,15 +52,15 @@
     --in-content-button-border-color-hover: transparent !important;
     --in-content-button-border-color-active: transparent !important;
 
-    --newtab-background-color: var(--eOS-black-500) !important;
-    --newtab-background-color-secondary: var(--eOS-black-300) !important;
-    --newtab-element-hover-color: var(--eOS-black-300) !important; 
+    --newtab-background-color: var(--eOS-black-700) !important;
+    --newtab-background-color-secondary: var(--eOS-black-500) !important;
+    --newtab-element-hover-color: var(--eOS-black-500) !important; 
     --newtab-overlay-color: rgba(0,0,0,0.8) !important;
     --newtab-primary-action-background: var(--eOS-blueberry-100) !important;
     --newtab-primary-action-background-pocket: var(--eOS-blueberry-100) !important;
 
-    --box-background-color: var(--eOS-black-300) !important;
-    --box-background: var(--eOS-black-500) !important;
+    --box-background-color: var(--eOS-black-500) !important;
+    --box-background: var(--eOS-black-700) !important;
 
     --brand-color-accent: var(--eOS-blueberry-300) !important;
     --brand-color-accent-hover: var(--eOS-blueberry-100) !important;
@@ -74,12 +74,12 @@
     --primary-button-active-background-color: var(--eOS-blueberry-100) !important;
     --primary-button-color: var(--eOS-silver-100) !important;
 
-    --card-background-color:  var(--eOS-black-500) !important; 
+    --card-background-color:  var(--eOS-black-700) !important; 
 
     --button-color: var(--eOS-silver-100) !important;
-    --button-background-color: var(--eOS-black-300) !important;
+    --button-background-color: var(--eOS-black-500) !important;
     --button-hover-background-color: var(--eOS-black-100) !important;
-    --sidebar-background-hover: var(--eOS-black-300) !important;
+    --sidebar-background-hover: var(--eOS-black-500) !important;
 
 /* Reader mode */
     --dark-theme-foreground: var(--eOS-silver-300) !important;
@@ -93,7 +93,7 @@
 
 /* Dialog */
 .dialogBox, dialog {
-    background-color: var(--eOS-black-500) !important;
+    background-color: var(--eOS-black-700) !important;
 }
 
 /* Separator */
@@ -106,26 +106,26 @@ separator {
 checkbox:not(:hover) .checkbox-check:not([checked="true"]), input[type="checkbox"]:not(:hover):not(:checked) {
     appearance: none !important;
     border: 2px solid var(--eOS-silver-300) !important;
-    background: var(--eOS-black-500) !important;
+    background: var(--eOS-black-700) !important;
     border-radius: 2px !important;
 }
 checkbox:hover .checkbox-check:not([checked="true"]), input[type="checkbox"]:hover:not(:checked) {
     appearance: none !important; 
     border: 2px solid var(--eOS-silver-100) !important;
-    background: var(--eOS-black-500) !important;
+    background: var(--eOS-black-700) !important;
     border-radius: 2px !important;
 }
 
 /* Radio */
 radio:not(:hover) .radio-check:not([selected="true"]), input[type="radio"]:not(:hover):not(:checked) {
     appearance: none !important;
-    background: var(--eOS-black-500) !important;
+    background: var(--eOS-black-700) !important;
     border: 0.15em solid var(--eOS-silver-300) !important;
     border-radius: 50% !important;
 }
 radio:hover .radio-check:not([selected="true"]), input[type="radio"]:hover:not(:checked) {
     appearance: none !important;
-    background: var(--eOS-black-500) !important;
+    background: var(--eOS-black-700) !important;
     border: 0.15em solid var(--eOS-silver-100) !important;
     border-radius: 50% !important;
 }}