Skip to content

User Contributed CSS Themes

Jump to bottom
Ben Busby edited this page Nov 1, 2021 · 24 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;
}

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]

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

Dark Jade (Dark Only) [by @ironboy1]

: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;
}
Clone this wiki locally