User Contributed CSS Themes

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

Templates

Format

:root {
    /* LIGHT THEME COLORS */
    --whoogle-logo: #______;
    --whoogle-page-bg: #______;
    --whoogle-element-bg: #______;
    --whoogle-text: #______;
    --whoogle-contrast-text: #______;
    --whoogle-secondary-text: #______;
    --whoogle-result-bg: #______;
    --whoogle-result-title: #______;
    --whoogle-result-url: #______;
    --whoogle-result-visited: #______;

    /* DARK THEME COLORS */
    --whoogle-dark-logo: #______;
    --whoogle-dark-page-bg: #______;
    --whoogle-dark-element-bg: #______;
    --whoogle-dark-text: #______;
    --whoogle-dark-contrast-text: #______;
    --whoogle-dark-secondary-text: #______;
    --whoogle-dark-result-bg: #______;
    --whoogle-dark-result-title: #______;
    --whoogle-dark-result-url: #______;
    --whoogle-dark-result-visited: #______;
}

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: #000000;
    --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) -- default dark theme [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: #212131;
    --whoogle-dark-element-bg: #4285f4;
    --whoogle-dark-text: #ffffff;
    --whoogle-dark-contrast-text: #ffffff;
    --whoogle-dark-secondary-text: #bbbbbb;
    --whoogle-dark-result-bg: #121222;
    --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;
}