apply edge colors to 'light' and 'dark' themes #30

README.md

@@ -48,7 +48,7 @@ To disable a tweak, set the key to `false` or delete it, then restart the browse
 |enable Mica toolbar background (Windows 11 only)|
 |-|
 |**See [Mica Tweak Instructions (Windows 11 Only)](#mica-tweak-instructions-windows-11-only) for installation instructions.**|
-|**NOTE: Only works on default theme: 'System theme - auto'**|
+|**NOTE: Only works on default themes: 'System theme - auto', 'Light' and 'Dark'**|
 |`uc.tweak.win11-mica`|
 
 |force tab background colour to `--toolbar-bg` (useful for Proton themes)|

chrome/content/newtab.css

@@ -30,7 +30,7 @@
     --newtab-button-secondary-color: inherit !important;
   }
 
-  body[style*="--newtab-background-color: rgb(43, 42, 51); --newtab-text-primary-color: rgba(251, 251, 254, 1);"]:not([style*="--newtab-background-color-secondary"])[lwt-newtab-brighttext],
+  body[style*="--newtab-background-color: rgb(43, 42, 51)"][lwt-newtab-brighttext],
   body:not([style*="color"])[lwt-newtab-brighttext] {
     --newtab-background-color: #252525 !important;
     --newtab-background-color-secondary: #4A4A4A !important;

chrome/global/colors.css

@@ -1,7 +1,8 @@
 /* EdgeFr-Fox by bmFtZQ - colors.css */
 
 /* light */
-:root:not(:-moz-lwtheme) {
+:root:not(:-moz-lwtheme),
+:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] {
   --lwt-accent-color: #cecece !important;
   --lwt-accent-color-inactive: #e8e8e8 !important;
   --lwt-text-color: #000 !important;
@@ -67,7 +68,8 @@
 }
 
 /* dark */
-:root[lwt-default-theme-in-dark-mode="true"] {
+:root[lwt-default-theme-in-dark-mode="true"],
+:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] {
   --lwt-accent-color: #1C1C1C !important;
   --lwt-accent-color-inactive: #2e2e2e !important;
   --lwt-text-color: #E5E5E5 !important;
@@ -130,19 +132,23 @@
 }
 
 /* Change Colour of page when loading */
-:root:not(:-moz-lwtheme) #tabbrowser-tabpanels {
+:root:not(:-moz-lwtheme) #tabbrowser-tabpanels,
+:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #tabbrowser-tabpanels {
   background-color: #f7f7f7 !important;
 }
 
-:root[lwt-default-theme-in-dark-mode="true"] #tabbrowser-tabpanels {
+:root[lwt-default-theme-in-dark-mode="true"] #tabbrowser-tabpanels,
+:root[style*="--lwt-accent-color: rgb(28, 27, 34)"] #tabbrowser-tabpanels {
   background-color: #252525 !important;
 }
 
 /* make the titlebar buttons black/white on default themes */
-:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox {
+:root:not(:-moz-lwtheme)[tabsintitlebar] .titlebar-buttonbox,
+:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] .titlebar-buttonbox {
   color: #000 !important;
 }
 
-:root[lwt-default-theme-in-dark-mode="true"][tabsintitlebar] .titlebar-buttonbox {
+:root[lwt-default-theme-in-dark-mode="true"][tabsintitlebar] .titlebar-buttonbox,
+:root[style*="--lwt-accent-color: rgb(28, 27, 34)"][tabsintitlebar] .titlebar-buttonbox {
   color: #fff !important;
 }

chrome/global/tweaks.css

@@ -46,13 +46,15 @@ browsing indicator) */
 }
 
 @supports -moz-bool-pref("uc.tweak.floating-tabs") {
-  :root:not(:-moz-lwtheme) {
+  :root:not(:-moz-lwtheme),
+  :root[style*="--lwt-accent-color: rgb(240, 240, 244)"] {
     --lwt-accent-color: #f3f3f3 !important;
     --lwt-accent-color-inactive: unset !important;
     --toolbar-bgcolor: #fff !important;
   }
 
-  :root[lwt-default-theme-in-dark-mode="true"] {
+  :root[lwt-default-theme-in-dark-mode="true"],
+  :root[style*="--lwt-accent-color: rgb(28, 27, 34)"] {
     --toolbar-bgcolor: #4D4D4D !important;
     --lwt-accent-color-inactive: unset !important;
     --chrome-content-separator-color: #535353 !important;
@@ -137,18 +139,23 @@ browsing indicator) */
   @supports -moz-bool-pref("uc.tweak.win11-mica") {
     /* enable mica appearance */
     #main-window:not(:-moz-lwtheme),
-    #main-window[lwt-default-theme-in-dark-mode="true"] {
+    #main-window[style*="--lwt-accent-color: rgb(240, 240, 244)"],
+    #main-window[lwt-default-theme-in-dark-mode="true"],
+    #main-window[style*="--lwt-accent-color: rgb(28, 27, 34)"] {
       appearance: -moz-win-glass !important;
       background: transparent !important;
     }
 
-    #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
+    #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive),
+    #main-window[style*="--lwt-accent-color: rgb(28, 27, 34)"] #navigator-toolbox:not(:-moz-window-inactive) {
       background: transparent !important;
     }
 
     @supports -moz-bool-pref("uc.tweak.floating-tabs") {
       #navigator-toolbox:not(:-moz-lwtheme),
-      #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive) {
+      #main-window[style*="--lwt-accent-color: rgb(240, 240, 244)"] #navigator-toolbox,
+      #main-window[lwt-default-theme-in-dark-mode="true"] #navigator-toolbox:not(:-moz-window-inactive),
+      #main-window[style*="--lwt-accent-color: rgb(28, 27, 34)"] #navigator-toolbox:not(:-moz-window-inactive) {
         background: transparent !important;
       }
     }
@@ -159,36 +166,56 @@ browsing indicator) */
     }
 
     /* color adjustments */
-    :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+    :root:not(:-moz-lwtheme):not(:-moz-window-inactive),
+    :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]:not(:-moz-window-inactive) {
       --lwt-accent-color: #00000020 !important;
     }
 
     @supports -moz-bool-pref("uc.tweak.floating-tabs") {
-      :root:not(:-moz-lwtheme):not(:-moz-window-inactive) {
+      :root:not(:-moz-lwtheme):not(:-moz-window-inactive),
+      :root[style*="--lwt-accent-color: rgb(240, 240, 244)"]:not(:-moz-window-inactive) {
         --toolbar-bgcolor: #ffffffcc !important;
       }
 
-      :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive) {
+      :root[lwt-default-theme-in-dark-mode="true"]:not(:-moz-window-inactive),
+      :root[style*="--lwt-accent-color: rgb(28, 27, 34)"]:not(:-moz-window-inactive)
+       {
         --toolbar-bgcolor: #ffffff20 !important;
       }
     }
 
     /* line up buttons with duplicate icons from -moz-win-glass */
-    :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-buttonbox-container {
+    :root:is(:not(:-moz-lwtheme),
+    :root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
+    [lwt-default-theme-in-dark-mode="true"],
+    :root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
+    ) .titlebar-buttonbox-container {
       --uc-titlebar-button-size: 30px;
       --uc-titlebar-size: calc(var(--tab-min-height) + var(--tab-block-margin));
       margin-bottom: calc(var(--uc-titlebar-size) - var(--uc-titlebar-button-size)) !important;
     }
 
-    :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
+    :root:is(:not(:-moz-lwtheme),
+    :root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
+    [lwt-default-theme-in-dark-mode="true"],
+    :root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
+    ) .titlebar-button:not(.titlebar-close:hover, :-moz-window-inactive) {
       list-style-image: none !important;
     }
 
-    :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-button {
+    :root:is(:not(:-moz-lwtheme),
+    :root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
+    [lwt-default-theme-in-dark-mode="true"],
+    :root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
+    ) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-button {
       padding-block: 7px 9px !important;
     }
 
-    :root:is(:not(:-moz-lwtheme), [lwt-default-theme-in-dark-mode="true"]) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
+    :root:is(:not(:-moz-lwtheme),
+    :root[style*="--lwt-accent-color: rgb(240, 240, 244)"],
+    [lwt-default-theme-in-dark-mode="true"],
+    :root[style*="--lwt-accent-color: rgb(28, 27, 34)"]
+    ) :root:is([inFullscreen], [sizemode="maximized"]) .titlebar-close {
       padding-block: 7px 9px !important;
       padding-right: 19px !important;
     }

chrome/toolbar/urlbar.css

@@ -14,7 +14,9 @@
 }
 
 #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background:not(:-moz-lwtheme),
-#searchbar:not(:-moz-lwtheme):focus-within {
+#searchbar:not(:-moz-lwtheme):focus-within,
+:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #urlbar[focused="true"]:not([suppress-focus-border])>#urlbar-background,
+:root[style*="--lwt-accent-color: rgb(240, 240, 244)"] #searchbar:focus-within {
   outline-color: color-mix(in srgb, var(--toolbar-field-focus-border-color) 50%, transparent) !important;
 }