User Contributed CSS Themes
Ben Busby edited this page Aug 10, 2022
·
18 revisions
Pages 5
-
- Themes
- Original
- Grayscale (Dark Only) [by @gripped]
- Doppelgänger [by @benbusby]
- Catpuccin [by @WitherCubes -- screenshots]
- Rosé Pine [by @ThatOneCalculator -- screenshots]
- easydark [by @Jieiku]
- Nord [by @apmechev]
- Solarized [by @apmechev]
- Dark Jade (Dark Only) [by @lenicyl] -- screenshots
- Chroma (Dark Only) [by @ironboy1] -- screenshots
- Dracula (Dark Only) by @Darkempire78
- green_cookie by @alex3o0
Clone this wiki locally
If you have an idea for a theme, open a new issue with the theme in the issue description, and I'll add it to the wiki -- see the template for contributing!
Themes
Original
:root {
/* LIGHT THEME COLORS */
--whoogle-logo: #685e79;
--whoogle-page-bg: #ffffff;
--whoogle-element-bg: #685e79;
--whoogle-text: #000000;
--whoogle-contrast-text: #ffffff;
--whoogle-secondary-text: #70757a;
--whoogle-result-bg: #ffffff;
--whoogle-result-title: #1967d2;
--whoogle-result-url: #0d652d;
--whoogle-result-visited: #4b11a8;
/* DARK THEME COLORS */
--whoogle-dark-logo: #685e79;
--whoogle-dark-page-bg: #222222;
--whoogle-dark-element-bg: #685e79;
--whoogle-dark-text: #ffffff;
--whoogle-dark-contrast-text: #ffffff;
--whoogle-dark-secondary-text: #bbbbbb;
--whoogle-dark-result-bg: #000000;
--whoogle-dark-result-title: #1967d2;
--whoogle-dark-result-url: #4b11a8;
--whoogle-dark-result-visited: #bbbbff;
}
Grayscale (Dark Only) [by @gripped]
:root {
/* LIGHT THEME COLORS */
/* TBD */
/* DARK THEME COLORS */
--whoogle-dark-logo: #888888;
--whoogle-dark-page-bg: #080808;
--whoogle-dark-element-bg: #111111;
--whoogle-dark-text: #dddddd;
--whoogle-dark-contrast-text: #aaaaaa;
--whoogle-dark-secondary-text: #8a8b8c;
--whoogle-dark-result-bg: #111111;
--whoogle-dark-result-title: #dddddd;
--whoogle-dark-result-url: #eceff4;
--whoogle-dark-result-visited: #959595;
}
Doppelgänger [by @benbusby]
:root {
/* LIGHT THEME COLORS */
--whoogle-logo: #685e79;
--whoogle-page-bg: #ffffff;
--whoogle-element-bg: #4285f4;
--whoogle-text: #000000;
--whoogle-contrast-text: #ffffff;
--whoogle-secondary-text: #70757a;
--whoogle-result-bg: #ffffff;
--whoogle-result-title: #1967d2;
--whoogle-result-url: #0d652d;
--whoogle-result-visited: #4b11a8;
/* DARK THEME COLORS */
--whoogle-dark-logo: #685e79;
--whoogle-dark-page-bg: #101020;
--whoogle-dark-element-bg: #4285f4;
--whoogle-dark-text: #ffffff;
--whoogle-dark-contrast-text: #ffffff;
--whoogle-dark-secondary-text: #bbbbbb;
--whoogle-dark-result-bg: #212131;
--whoogle-dark-result-title: #64a7f6;
--whoogle-dark-result-url: #34a853;
--whoogle-dark-result-visited: #bbbbff;
}
#whoogle-w {
fill: #4285f4;
}
#whoogle-h {
fill: #ea4335;
}
#whoogle-o-1 {
fill: #fbbc05;
}
#whoogle-o-2 {
fill: #4285f4;
}
#whoogle-g {
fill: #34a853;
}
#whoogle-l {
fill: #ea4335;
}
#whoogle-e {
fill: #fbbc05;
}
Catpuccin [by @WitherCubes -- screenshots]
:root {
/* LIGHT THEME COLORS */
--whoogle-logo: #4c4f69;
--whoogle-page-bg: #eff1f5;
--whoogle-element-bg: #bcc0cc;
--whoogle-text: #4c4f69;
--whoogle-contrast-text: #5c5f77;
--whoogle-secondary-text: #6c6f85;
--whoogle-result-bg: #ccd0da;
--whoogle-result-title: #7287fd;
--whoogle-result-url: #dc8a78;
--whoogle-result-visited: #e64553;
/* DARK THEME COLORS */
--whoogle-dark-logo: #cdd6f4;
--whoogle-dark-page-bg: #1e1e2e;
--whoogle-dark-element-bg: #45475a;
--whoogle-dark-text: #cdd6f4;
--whoogle-dark-contrast-text: #bac2de;
--whoogle-dark-secondary-text: #a6adc8;
--whoogle-dark-result-bg: #313244;
--whoogle-dark-result-title: #b4befe;
--whoogle-dark-result-url: #f5e0dc;
--whoogle-dark-result-visited: #eba0ac;
}
#whoogle-w {
fill: #89b4fa;
}
#whoogle-h {
fill: #f38ba8;
}
#whoogle-o-1 {
fill: #f9e2af;
}
#whoogle-o-2 {
fill: #89b4fa;
}
#whoogle-g {
fill: #a6e3a1;
}
#whoogle-l {
fill: #f38ba8;
}
#whoogle-e {
fill: #f9e2af;
}
Rosé Pine [by @ThatOneCalculator -- screenshots]
:root {
/* LIGHT THEME COLORS */
--whoogle-logo: #c4a7e7;
--whoogle-page-bg: #faf4ed;
--whoogle-element-bg: #f2e9e1;
--whoogle-text: #575279;
--whoogle-contrast-text: #1f1d2e;
--whoogle-secondary-text: #797593;
--whoogle-result-bg: #faf4ed;
--whoogle-result-title: #d7827e;
--whoogle-result-url: #286983;
--whoogle-result-visited: #907aa9;
/* DARK THEME COLORS */
--whoogle-dark-logo: #c4a7e7;
--whoogle-dark-page-bg: #191724;
--whoogle-dark-element-bg: #1f1d2e;
--whoogle-dark-text: #e0def4;
--whoogle-dark-contrast-text: #e0def4;
--whoogle-dark-secondary-text: #908caa;
--whoogle-dark-result-bg: #393552;
--whoogle-dark-result-title: #9ccfd8;
--whoogle-dark-result-url: #3e8fb0;
--whoogle-dark-result-visited: #c4a7e7;
}
#whoogle-w {
fill: #eb6f92;
}
#whoogle-h {
fill: #f6c177;
}
#whoogle-o-1 {
fill: #ebbcba;
}
#whoogle-o-2 {
fill: #31748f;
}
#whoogle-g {
fill: #9ccfd8;
}
#whoogle-l {
fill: #c4a7e7;
}
#whoogle-e {
fill: #908caa;
}
easydark [by @Jieiku]
/* Colors */
:root {
/* LIGHT THEME COLORS */
--whoogle-logo: #685e79;
--whoogle-page-bg: #ffffff;
--whoogle-element-bg: #4285f4;
--whoogle-text: #000000;
--whoogle-contrast-text: #ffffff;
--whoogle-secondary-text: #70757a;
--whoogle-result-bg: #ffffff;
--whoogle-result-title: #1967d2;
--whoogle-result-url: #0d652d;
--whoogle-result-visited: #4b11a8;
/* DARK THEME COLORS */
--whoogle-dark-logo: #ffffff;
--whoogle-dark-page-bg: #111111;
--whoogle-dark-element-bg: #303134;
--whoogle-dark-text: #dddddd;
--whoogle-dark-contrast-text: #e8eaed;
--whoogle-dark-secondary-text: #bdc1c6;
--whoogle-dark-result-bg: #222222;
--whoogle-dark-result-title: #8ab4f8;
--whoogle-dark-result-url: #34a853;
--whoogle-dark-result-visited: #c58af9;
}
Nord [by @apmechev]
:root {
/* LIGHT THEME COLORS */
--whoogle-page-bg: #d8dee9;
--whoogle-logo: #2e3440;
--whoogle-element-bg: #2e3440;
--whoogle-text: #3B4252;
--whoogle-contrast-text: #eceff4;
--whoogle-secondary-text: #70757a;
--whoogle-result-bg: #fff;
--whoogle-result-title: #4c566a;
--whoogle-result-url: #81a1c1;
--whoogle-result-visited: #a3be8c;
/* DARK THEME COLORS */
--whoogle-dark-page-bg: #292e39;
--whoogle-dark-element-bg: #d8dee9;
--whoogle-dark-logo: #d8dee9;
--whoogle-dark-text: #eceff4;
--whoogle-dark-contrast-text: #2e3440;
--whoogle-dark-secondary-text: #f9fafb;
--whoogle-dark-result-bg: #4c566a;
--whoogle-dark-result-title: #88c0d0;
--whoogle-dark-result-url: #eceff4;
--whoogle-dark-result-visited: #a3be8c;
}
Solarized [by @apmechev]
:root {
/* LIGHT THEME COLORS */
--whoogle-page-bg: #eee8d5;
--whoogle-element-bg: #002b36;
--whoogle-logo: #002b36;
--whoogle-text: #002b36;
--whoogle-contrast-text: #eee8d5;
--whoogle-secondary-text: #3b4252;
--whoogle-result-bg: #fff;
--whoogle-result-title: #268bd2;
--whoogle-result-url: #5f8700;
--whoogle-result-visited: #2aa198;
/* DARK THEME COLORS */
--whoogle-dark-page-bg: #002b36;
--whoogle-dark-element-bg: #eee8d5;
--whoogle-dark-logo: #eee8d5;
--whoogle-dark-text: #eee8d5;
--whoogle-dark-contrast-text: #002b36;
--whoogle-dark-secondary-text: #eee8d5;
--whoogle-dark-result-bg: #073642;
--whoogle-dark-result-title: #3aa6f2;
--whoogle-dark-result-url: #38d5c9;
--whoogle-dark-result-visited: #2aa198;
}
Dark Jade (Dark Only) [by @lenicyl] -- screenshots
:root {
/* LIGHT THEME COLORS
This is a dark theme so there is no light theme :)
Maybe in the future ?
*/
/* DARK THEME COLORS */
--whoogle-dark-page-bg: #212121;
--whoogle-dark-element-bg: #111111 ;
--whoogle-dark-logo: #007261 ;
--whoogle-dark-text: #c6d3d1;
--whoogle-dark-contrast-text: #90AFA3;
--whoogle-dark-secondary-text: #f9fafb;
--whoogle-dark-result-bg: #111111;
--whoogle-dark-result-title: #699C88;
--whoogle-dark-result-url: #b1d2db;
--whoogle-dark-result-visited: #a3be8c;
}
#whoogle-o-1 {
fill: #347F6C;
}
#whoogle-o-2 {
fill: #347F6C;
}
Chroma (Dark Only) [by @ironboy1] -- screenshots
:root {
/* LIGHT THEME COLORS */
/* coming soon.... */
/* DARK THEME COLORS */
--whoogle-dark-logo: #8751a1;
--whoogle-dark-page-bg: #011627;
--whoogle-dark-element-bg: #040A19;
--whoogle-dark-text: #24b89d;
--whoogle-dark-contrast-text: #4186c6;
--whoogle-dark-secondary-text: #8751a1;
--whoogle-dark-result-bg: #040A19;
--whoogle-dark-result-title: #4186c6;
--whoogle-dark-result-url: #f48075;
--whoogle-dark-result-visited: #eb3488;
--whoogle-dark-divider: #4186c6;
}
#whoogle-w {
fill: #4186c6;
}
#whoogle-h {
fill: #eb3488;
}
#whoogle-o-1 {
fill: #f48075;
}
#whoogle-o-2 {
fill: #8751a1;
}
#whoogle-g {
fill: #24b89d;
}
#whoogle-l {
fill: #eb3488;
}
#whoogle-e {
fill: #4186c6;
}
Dracula (Dark Only) by @Darkempire78
:root {
/* LIGHT THEME COLORS */
/* DARK THEME COLORS */
--whoogle-dark-logo: #44475a;
--whoogle-dark-page-bg: #282a36;
--whoogle-dark-element-bg: #282a36;
--whoogle-dark-text: #f8f8f2;
--whoogle-dark-contrast-text: #f8f8f2;
--whoogle-dark-secondary-text: #6272a4;
--whoogle-dark-result-bg: #44475a;
--whoogle-dark-result-title: #f8f8f2;
--whoogle-dark-result-url: #bd93f9;
--whoogle-dark-result-visited: #ff5555;
}
green_cookie by @alex3o0
:root {
/* LIGHT THEME COLORS */
--whoogle-logo: #c4a7e7;
--whoogle-page-bg: #ffe9d6;
--whoogle-element-bg: #fcd6c5;
--whoogle-text: #575279;
--whoogle-contrast-text: #1f1d2e;
--whoogle-secondary-text: #797593;
--whoogle-result-bg: #fcd6c5;
--whoogle-result-title: #5fbfa2;
--whoogle-result-url: steelblue;
--whoogle-result-visited: #3a9278;
/* DARK THEME COLORS */
--whoogle-dark-logo: #c4a7e7;
--whoogle-dark-page-bg: #191724;
--whoogle-dark-element-bg: #1f1d2e;
--whoogle-dark-text: #e0def4;
--whoogle-dark-contrast-text: #e0def4;
--whoogle-dark-secondary-text: #908caa;
--whoogle-dark-result-bg: #393552;
--whoogle-dark-result-title: #9ccfd8;
--whoogle-dark-result-url: #3e8fb0;
--whoogle-dark-result-visited: #c4a7e7;
}
#whoogle-w,#whoogle-h,#whoogle-o-1,#whoogle-o-2,#whoogle-g,#whoogle-l,#whoogle-e {
fill: #7ccbb3;
}