From d0191dcbe57e6e54500def2604e8f0dbf0248826 Mon Sep 17 00:00:00 2001 From: Sai Kurogetsu Date: Sun, 3 Dec 2017 15:00:38 +0000 Subject: [PATCH] support multiple theme variants, issue #2 --- ui/no-white-flash.css | 6 ---- ui/theme-dark.css | 72 +++++++++++++++++++++++++++++++++++++++++++ ui/theme-light.css | 72 +++++++++++++++++++++++++++++++++++++++++++ ui/theme.css | 70 +++-------------------------------------- userChrome.css | 10 ++++-- 5 files changed, 156 insertions(+), 74 deletions(-) delete mode 100644 ui/no-white-flash.css create mode 100644 ui/theme-dark.css create mode 100644 ui/theme-light.css diff --git a/ui/no-white-flash.css b/ui/no-white-flash.css deleted file mode 100644 index 5ce369f..0000000 --- a/ui/no-white-flash.css +++ /dev/null @@ -1,6 +0,0 @@ -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); - -/* Prevent white flash */ -tabbrowser tabpanels { - background-color: #2e3436 !important; -} diff --git a/ui/theme-dark.css b/ui/theme-dark.css new file mode 100644 index 0000000..00eca7e --- /dev/null +++ b/ui/theme-dark.css @@ -0,0 +1,72 @@ +@import "theme.css"; +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Colors */ +:root { + /* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + + /* Browser area before a page starts loading */ + --gnome-browser-before-load-bgcolor: #2e3436; + + /* Extra toolbars like the bookmark bar */ + --toolbar-bgcolor: #2f3434 !important; + --toolbar-bgimage: none !important; + + /* Header bar */ + --gnome-headerbar-bgimage: linear-gradient(rgb(67, 74, 74), rgb(57, 63, 63)); + --gnome-headerbar-border-bottom: 1px solid rgb(28, 31, 31); + --gnome-headerbar-box-shadow: 0 -1px rgb(45, 50, 50) inset, 0 1px rgba(238, 238, 236, .1) inset; + --gnome-headerbar-button-bgimage: linear-gradient(rgb(69, 76, 76), rgb(57, 63, 63) 40%, rgb(45, 50, 50)); + --gnome-headerbar-button-border: 1px solid rgba(28, 31, 31); + --gnome-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, .1) inset, 0 1px rgba(238, 238, 236, .1); + --gnome-headerbar-button-hover-bgimage: linear-gradient(rgb(91, 100, 100), rgb(67, 73, 73) 40%, rgb(55, 60, 60)); + --gnome-headerbar-button-active-bgimage: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)); + --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1); + --gnome-headerbar-button-disabled-bgcolor: #323636; + --gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, .1); + + /* URL bar */ + --gnome-urlbar-bgcolor: #2c2c2c; + --gnome-urlbar-border: 1px solid #1e2222; + --gnome-urlbar-box-shadow: none; + --gnome-urlbar-height: 32px; + + /* Tab bar */ + --gnome-tabbar-bgcolor: #2f3434; + --gnome-tabbar-border-bottom: 1px solid #1e2222; + --gnome-tabbar-tab-color: rgb(147, 150, 149); + --gnome-tabbar-tab-hover-border-bottom: 3px solid #1c1f1f; + --gnome-tabbar-tab-hover-border-sides: 1px solid #2a2f2f; + --gnome-tabbar-tab-hover-color: rgb(192, 194, 192); + --gnome-tabbar-tab-active-bgcolor: #343939; + --gnome-tabbar-tab-active-border-bottom: 3px solid #215d9c; + --gnome-tabbar-tab-active-border-color-sides: #282b2b; + --gnome-tabbar-tab-active-color: rgb(238, 238, 236); + --gnome-tabbar-tab-active-hover-bgcolor: #363c3c; + --gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); + + /* Bookmark bar */ + --gnome-bookmarkbar-border-bottom: 1px solid #1e2222; + --gnome-bookmarkbar-height: 38px; + + /* Burger menu */ + /*--arrowpanel-padding: 10px;*/ + /*--arrowpanel-background: -moz-field;*/ + --arrowpanel-color: #d3d4d2 !important; /* applies to text and icons */ + /*--arrowpanel-border-color: ThreeDShadow;*/ + + /* Dirty hack for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-icons-hack-filter: invert(85%); /* without invert: none */ + --gnome-icons-hack-close-button-border: 1px solid #e3e0e0; /* without invert: 1px solid #1c1f1f */ + --gnome-icons-hack-close-button-filter: invert(100%); /* without invert: none */ + --gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205)); + /* ^ without invert: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)) */ + --gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset, 0 1px rgba(17, 17, 19, .1); + /* ^ without invert: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1) */ +} diff --git a/ui/theme-light.css b/ui/theme-light.css new file mode 100644 index 0000000..00eca7e --- /dev/null +++ b/ui/theme-light.css @@ -0,0 +1,72 @@ +@import "theme.css"; +@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); + +/* Colors */ +:root { + /* Variables that start with --gnome- are added by me and are assigned + * to elements somewhere in this code. The rest of the variables are + * built-in in Firefox, so you need to add an !important if you wanna + * override them. */ + + /* Browser area before a page starts loading */ + --gnome-browser-before-load-bgcolor: #2e3436; + + /* Extra toolbars like the bookmark bar */ + --toolbar-bgcolor: #2f3434 !important; + --toolbar-bgimage: none !important; + + /* Header bar */ + --gnome-headerbar-bgimage: linear-gradient(rgb(67, 74, 74), rgb(57, 63, 63)); + --gnome-headerbar-border-bottom: 1px solid rgb(28, 31, 31); + --gnome-headerbar-box-shadow: 0 -1px rgb(45, 50, 50) inset, 0 1px rgba(238, 238, 236, .1) inset; + --gnome-headerbar-button-bgimage: linear-gradient(rgb(69, 76, 76), rgb(57, 63, 63) 40%, rgb(45, 50, 50)); + --gnome-headerbar-button-border: 1px solid rgba(28, 31, 31); + --gnome-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, .1) inset, 0 1px rgba(238, 238, 236, .1); + --gnome-headerbar-button-hover-bgimage: linear-gradient(rgb(91, 100, 100), rgb(67, 73, 73) 40%, rgb(55, 60, 60)); + --gnome-headerbar-button-active-bgimage: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)); + --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1); + --gnome-headerbar-button-disabled-bgcolor: #323636; + --gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, .1); + + /* URL bar */ + --gnome-urlbar-bgcolor: #2c2c2c; + --gnome-urlbar-border: 1px solid #1e2222; + --gnome-urlbar-box-shadow: none; + --gnome-urlbar-height: 32px; + + /* Tab bar */ + --gnome-tabbar-bgcolor: #2f3434; + --gnome-tabbar-border-bottom: 1px solid #1e2222; + --gnome-tabbar-tab-color: rgb(147, 150, 149); + --gnome-tabbar-tab-hover-border-bottom: 3px solid #1c1f1f; + --gnome-tabbar-tab-hover-border-sides: 1px solid #2a2f2f; + --gnome-tabbar-tab-hover-color: rgb(192, 194, 192); + --gnome-tabbar-tab-active-bgcolor: #343939; + --gnome-tabbar-tab-active-border-bottom: 3px solid #215d9c; + --gnome-tabbar-tab-active-border-color-sides: #282b2b; + --gnome-tabbar-tab-active-color: rgb(238, 238, 236); + --gnome-tabbar-tab-active-hover-bgcolor: #363c3c; + --gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); + + /* Bookmark bar */ + --gnome-bookmarkbar-border-bottom: 1px solid #1e2222; + --gnome-bookmarkbar-height: 38px; + + /* Burger menu */ + /*--arrowpanel-padding: 10px;*/ + /*--arrowpanel-background: -moz-field;*/ + --arrowpanel-color: #d3d4d2 !important; /* applies to text and icons */ + /*--arrowpanel-border-color: ThreeDShadow;*/ + + /* Dirty hack for replaced symbolic icons, they load from + * /usr/share/icons// and on some systems they need to be + * inverted, on others they don't, adjusts the filters below to your + * needs (you may also adjust icon brightness here). */ + --gnome-icons-hack-filter: invert(85%); /* without invert: none */ + --gnome-icons-hack-close-button-border: 1px solid #e3e0e0; /* without invert: 1px solid #1c1f1f */ + --gnome-icons-hack-close-button-filter: invert(100%); /* without invert: none */ + --gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205)); + /* ^ without invert: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)) */ + --gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset, 0 1px rgba(17, 17, 19, .1); + /* ^ without invert: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1) */ +} diff --git a/ui/theme.css b/ui/theme.css index 65d3a2f..4aac06f 100644 --- a/ui/theme.css +++ b/ui/theme.css @@ -1,70 +1,10 @@ @namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); -/* Colors */ -:root { - /* Variables that start with --gnome- are added by me and are assigned - * to elements somewhere in this code. The rest of the variables are - * built-in in Firefox, so you need to add an !important if you wanna - * override them. */ - - /* Extra toolbars like the bookmark bar */ - --toolbar-bgcolor: #2f3434 !important; - --toolbar-bgimage: none !important; - - /* Header bar */ - --gnome-headerbar-bgimage: linear-gradient(rgb(67, 74, 74), rgb(57, 63, 63)); - --gnome-headerbar-border-bottom: 1px solid rgb(28, 31, 31); - --gnome-headerbar-box-shadow: 0 -1px rgb(45, 50, 50) inset, 0 1px rgba(238, 238, 236, .1) inset; - --gnome-headerbar-button-bgimage: linear-gradient(rgb(69, 76, 76), rgb(57, 63, 63) 40%, rgb(45, 50, 50)); - --gnome-headerbar-button-border: 1px solid rgba(28, 31, 31); - --gnome-headerbar-button-box-shadow: 0 1px rgba(255, 255, 255, .1) inset, 0 1px rgba(238, 238, 236, .1); - --gnome-headerbar-button-hover-bgimage: linear-gradient(rgb(91, 100, 100), rgb(67, 73, 73) 40%, rgb(55, 60, 60)); - --gnome-headerbar-button-active-bgimage: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)); - --gnome-headerbar-button-active-box-shadow: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1); - --gnome-headerbar-button-disabled-bgcolor: #323636; - --gnome-headerbar-button-disabled-box-shadow: 0 1px rgba(255, 255, 255, 0) inset, 0 1px rgba(238, 238, 236, .1); - - /* URL bar */ - --gnome-urlbar-bgcolor: #2c2c2c; - --gnome-urlbar-border: 1px solid #1e2222; - --gnome-urlbar-box-shadow: none; - --gnome-urlbar-height: 32px; - - /* Tab bar */ - --gnome-tabbar-bgcolor: #2f3434; - --gnome-tabbar-border-bottom: 1px solid #1e2222; - --gnome-tabbar-tab-color: rgb(147, 150, 149); - --gnome-tabbar-tab-hover-border-bottom: 3px solid #1c1f1f; - --gnome-tabbar-tab-hover-border-sides: 1px solid #2a2f2f; - --gnome-tabbar-tab-hover-color: rgb(192, 194, 192); - --gnome-tabbar-tab-active-bgcolor: #343939; - --gnome-tabbar-tab-active-border-bottom: 3px solid #215d9c; - --gnome-tabbar-tab-active-border-color-sides: #282b2b; - --gnome-tabbar-tab-active-color: rgb(238, 238, 236); - --gnome-tabbar-tab-active-hover-bgcolor: #363c3c; - --gnome-tabbar-tab-icon-filter: invert(100%) sepia(100%) grayscale(100%) brightness(200%) brightness(85%); - - /* Bookmark bar */ - --gnome-bookmarkbar-border-bottom: 1px solid #1e2222; - --gnome-bookmarkbar-height: 38px; - - /* Burger menu */ - /*--arrowpanel-padding: 10px;*/ - /*--arrowpanel-background: -moz-field;*/ - --arrowpanel-color: #d3d4d2 !important; /* applies to text and icons */ - /*--arrowpanel-border-color: ThreeDShadow;*/ - - /* Dirty hack for replaced symbolic icons, they load from - * /usr/share/icons// and on some systems they need to be - * inverted, on others they don't, adjusts the filters below to your - * needs (you may also adjust icon brightness here). */ - --gnome-icons-hack-filter: invert(85%); /* without invert: none */ - --gnome-icons-hack-close-button-border: 1px solid #e3e0e0; /* without invert: 1px solid #1c1f1f */ - --gnome-icons-hack-close-button-filter: invert(100%); /* without invert: none */ - --gnome-icons-hack-close-button-active-bgimage: linear-gradient(rgb(220, 216, 216), rgb(214, 210, 210) 40%, rgb(210, 205, 205)); - /* ^ without invert: linear-gradient(rgb(35, 39, 39), rgb(41, 45, 45) 40%, rgb(45, 50, 50)) */ - --gnome-icons-hack-close-button-active-box-shadow: 0 1px rgba(255, 255, 255, .07) inset, 0 2px 1px -2px rgba(255, 255, 255, .6) inset, 0 1px rgba(17, 17, 19, .1); - /* ^ without invert: 0 1px rgba(0, 0, 0, .07) inset, 0 2px 1px -2px rgba(0, 0, 0, .6) inset, 0 1px rgba(238, 238, 236, .1) */ +/* Browser area before a page starts loading */ +tabbrowser tabpanels { + /* this is something white-ish by default which causes a white flash + * everytime you open a new tab */ + background-color: var(--gnome-browser-before-load-bgcolor) !important; } /* Toolbar */ diff --git a/userChrome.css b/userChrome.css index 8418a0b..ae992cc 100644 --- a/userChrome.css +++ b/userChrome.css @@ -1,3 +1,7 @@ -@import "ui/theme.css"; -@import "ui/no-white-flash.css"; -@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); +/* Here you can switch between the dark and the light theme. Don't use both, coz + * it ain't gonna work. */ + +/* Dark theme */ +@import "ui/theme-dark.css"; /**/ +/* Light theme - doesn't work yet */ +/*@import "ui/theme-light.css"; /**/