Update Linux/GTK theme + screenshots #126

Also clean up and sort the theme colour variables.

README.md

@@ -11,12 +11,13 @@ Screenshot: macOS / Firefox 120 / Tweaks: rounded corners, hide forward button.
 2. Download the repository and extract the files.
 3. From the repository folder, copy the `chrome` folder and `user.js` file into your Firefox profile folder.
 4. Close and restart Firefox, if performed correctly, the theme should now be installed.
-5. Optionally, listed below are some settings that can be changed using `about:config`:
+5. Optionally, listed below are some additional Firefox settings that can be changed using `about:config`:
 
-   | Description                              | Preference Name                      | Value   |
-   | ---------------------------------------- | ------------------------------------ | ------- |
-   | Use Edge-themed context menu on macOS    | `widget.macos.native-context-menus`  | `false` |
-   | Use light theme in private browsing mode | `browser.theme.dark-private-windows` | `false` |
+   | Description                                | Preference Name                              | Value   |
+   | ------------------------------------------ | -------------------------------------------- | ------- |
+   | Use Edge-themed context menu on macOS      | `widget.macos.native-context-menus`          | `false` |
+   | Use light theme in private browsing mode   | `browser.theme.dark-private-windows`         | `false` |
+   | Use rounded bottom window corners on Linux | `widget.gtk.rounded-bottom-corners.enabled ` | `true`  |
 
    Additional tweaks can also be applied to the theme such as Floating tabs, Rounded browser corners and more. See [Tweaks](#tweaks).
 
@@ -28,6 +29,7 @@ Screenshot: macOS / Firefox 120 / Tweaks: rounded corners, hide forward button.
 | Default (Windows 11)                         | ![Light][s-light]                        | ![Dark][s-dark]                        |
 | Floating Tabs + Rounded Corners (Windows 11) | ![Light, Floating Tabs][s-light-ft]      | ![Dark, Floating Tabs][s-dark-ft]      |
 | Hide Tabs Bar + Rounded Corners (macOS)      | ![Light, Hide Tabs Bar][s-light-mac-htb] | ![Dark, Hide Tabs Bar][s-dark-mac-htb] |
+| Rounded Corners (Linux, Ubuntu Yaru theme)   | ![Light, Rounded Corners][s-light-linux] | ![Dark, Rounded Corners][s-dark-linux] |
 
 ## Tweaks
 Certain tweaks can be applied to the theme, to enable them navigate to `about:config` and create a boolean key for each tweak you want to use and set it to `true`.
@@ -52,7 +54,7 @@ redesign of Edge.
 ---
 
 ### Hide tabs toolbar
-This hides the tabs toolbar and is useful when using vertical tab addons such as
+This hides the tabs toolbar, useful for when using vertical tab addons such as
 Sidebery, Tree Style Tab or Tab Center Reborn.
 
 **Note: Only works on Windows or macOS.**
@@ -163,13 +165,6 @@ Disable the custom Edge-themed context menu and use the default Firefox menus.
 
 ---
 
-## Mica Tweak Notice
-Mica is broken due to changes made in the Firefox 115 update, Mica has now been
-removed from this theme.
-
-If you still have `uc.tweak.win11-mica` set in `about:config` you can safely
-delete it.
-
 ## Acknowledgements
 [muckSponge](https://github.com/muckSponge) - [MaterialFox](https://github.com/muckSponge/MaterialFox)
 
@@ -184,8 +179,10 @@ delete it.
 [s-light]: screenshots/Windows_default_light.png
 [s-light-ft]: screenshots/Windows_floating-tabs_light.png
 [s-light-mac-htb]: screenshots/macOS_hide-tabs-bar_light.png
+[s-light-linux]: screenshots/Linux_light.png
 
 <!-- dark mode screenshot links -->
 [s-dark]: screenshots/Windows_default_dark.png
 [s-dark-ft]: screenshots/Windows_floating-tabs_dark.png
 [s-dark-mac-htb]: screenshots/macOS_hide-tabs-bar_dark.png
+[s-dark-linux]: screenshots/Linux_dark.png

chrome/content/newtab.css

@@ -48,6 +48,22 @@ url-prefix("about:firefoxview") {
     --newtab-status-success: #50B080 !important;
   }
 
+  /* Custom GTK colours. */
+  @media (-moz-gtk-csd-available) {
+    :root:not([lwt-newtab]):not([style*="color"]) {
+      /* Colour adjusted for readability. */
+      --uc-accent-adjusted: light-dark(
+        color-mix(in oklch, AccentColor 92%, black),
+        color-mix(in oklch, AccentColor 60%, white)
+      );
+      --newtab-background-color: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important;
+      --newtab-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important;
+      --newtab-text-primary-color: -moz-dialogtext !important;
+      --newtab-wordmark-color: light-dark(color-mix(in srgb, -moz-dialogtext 65%, transparent), -moz-dialogtext) !important;
+      --newtab-primary-action-background: var(--uc-accent-adjusted) !important;
+    }
+  }
+
   /* Adjustments for themes. */
   :root[style*="--newtab-background-color"] {
     /* Make the Firefox logo workmark follow text colour. */
@@ -73,6 +89,11 @@ url-prefix("about:firefoxview") {
 
 @-moz-document url-prefix("about:newtab"),
 url-prefix("about:home") {
+  /* Enforce system font selection. */
+  body {
+    font-family: system-ui !important;
+  }
+
   /* hide pin */
   .icon.icon-pin-small {
     display: none !important;
@@ -117,6 +138,10 @@ url-prefix("about:home") {
     opacity: 0 !important;
   }
 
+  .icon-settings {
+    background-image: url("../icons/settings.svg") !important;
+  }
+
   /* top sites */
   .top-site-outer .tile {
     border-radius: 12px !important;
@@ -191,6 +216,22 @@ url-prefix("about:home") {
     }
   }
 
+  /* Custom GTK colours. */
+  @media (-moz-gtk-csd-available) {
+    :root:not([lwt-newtab]):not([style*="color"]) {
+      /* Colour adjusted for readability. */
+      --uc-accent-adjusted: light-dark(
+        color-mix(in oklch, AccentColor 92%, black),
+        color-mix(in oklch, AccentColor 60%, white)
+      );
+
+      --in-content-page-background: light-dark(-moz-dialog, color-mix(in srgb, -moz-dialog 82%, black)) !important;
+      --uc-background-color-secondary: light-dark(Field, color-mix(in srgb, -moz-dialog 86%, white)) !important;
+      --in-content-page-color: -moz-dialogtext !important;
+      --in-content-focus-outline-color: var(--uc-accent-adjusted) !important;
+    }
+  }
+
   .search-inner-wrapper {
     height: 44px !important;
   }