Skip to content

User Contributed CSS Themes

Jump to bottom
Ben Busby edited this page Sep 30, 2024 · 23 revisions

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;
}

Google Dark (by @treyg -- screenshots)

:root {
  --whoogle-dark-logo: #685e79;
  --whoogle-dark-page-bg: #202124;
  --whoogle-dark-element-bg: #5f6368;
  --whoogle-dark-text: #fff;
  --whoogle-dark-contrast-text: #fff;
  --whoogle-dark-secondary-text: #93b3f3;
  --whoogle-dark-result-bg: #202124;
  --whoogle-dark-result-title: #93b3f3;
  --whoogle-dark-result-url: #bec1c5;
  --whoogle-dark-result-visited: #bc8cf2;
}

a:link h3 div {
  font-size: 20px !important;
}

#whoogle-w,
#whoogle-h,
#whoogle-o-1,
#whoogle-o-2,
#whoogle-g,
#whoogle-l,
#whoogle-e {
  color: var(--whoogle-dark-text) !important;
  fill: var(--whoogle-dark-text) !important;
}

#search-bar {
  z-index: 3;

  background: #202124;
  border: 1px solid #5f6368 !important;
  box-shadow: none;
  border-radius: 24px;
}

#search-submit {
  height: 40px;
  text-align: center;
  cursor: pointer;
  font-size: 20px;
  align-content: center;
  align-items: center;
  margin: auto;
  border-radius: 5px;
  width: 100px;
  font-size: 14px;
  margin: 23px auto 0 auto;
  padding: 0 16px;
  line-height: 27px;
  height: 36px;
  min-width: 54px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  background-color: #303134 !important;
  border: none !important;
}

.search-fields {
  display: flex;
  flex-direction: column;
}

ChatGPT Theme (by @bbf6 -- screenshots)

:root {
    /* LIGHT THEME COLORS */
    --whoogle-logo: #10a37f;
    --whoogle-page-bg: #ffffff;
    --whoogle-element-bg: #f0f0f0;
    --whoogle-text: #0d0d0d;
    --whoogle-contrast-text: #10a37f;
    --whoogle-secondary-text: #666666;
    --whoogle-result-bg: #f0f0f0;
    --whoogle-result-title: #10a37f;
    --whoogle-result-url: #10a37f;
    --whoogle-result-visited: #1a7f64;

    /* DARK THEME COLORS */
    --whoogle-dark-logo: #10a37f;
    --whoogle-dark-page-bg: #171717;
    --whoogle-dark-element-bg: #2f2f2f;
    --whoogle-dark-text: #ffffff;
    --whoogle-dark-contrast-text: #10a37f;
    --whoogle-dark-secondary-text: #f0f0f0;
    --whoogle-dark-result-bg: #2f2f2f;
    --whoogle-dark-result-title: #10a37f;
    --whoogle-dark-result-url: #10a37f;
    --whoogle-dark-result-visited: #1a7f64;
}

#whoogle-w,#whoogle-h,#whoogle-o-1,#whoogle-o-2,#whoogle-g,#whoogle-l,#whoogle-e {
    fill: #10a37f;
}
Clone this wiki locally