From 52b5647d14b0593e22bda06fefb2e1d556f4d843 Mon Sep 17 00:00:00 2001 From: bmFtZQ Date: Fri, 10 Jun 2022 21:42:06 +0800 Subject: [PATCH] apply edge colors to 'light' and 'dark' themes #30 --- README.md | 2 +- chrome/content/newtab.css | 2 +- chrome/global/colors.css | 18 +++++++++----- chrome/global/tweaks.css | 51 ++++++++++++++++++++++++++++++--------- chrome/toolbar/urlbar.css | 4 ++- 5 files changed, 56 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index 6187dd6..d7c182d 100644 --- a/README.md +++ b/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)| diff --git a/chrome/content/newtab.css b/chrome/content/newtab.css index 444b421..7f535ec 100644 --- a/chrome/content/newtab.css +++ b/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; diff --git a/chrome/global/colors.css b/chrome/global/colors.css index 3c35531..42e18d4 100644 --- a/chrome/global/colors.css +++ b/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; } diff --git a/chrome/global/tweaks.css b/chrome/global/tweaks.css index f97c76e..4eb1660 100644 --- a/chrome/global/tweaks.css +++ b/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; } diff --git a/chrome/toolbar/urlbar.css b/chrome/toolbar/urlbar.css index b15994f..8cebc62 100644 --- a/chrome/toolbar/urlbar.css +++ b/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; }