Skip to content

Google Catppuccin by agi-dude

Screenshot of Google Catppuccin

Details

Authoragi-dude

LicenseMIT

Categorywww.google.com

Created

Updated

Size48 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Soothing pastel theme for Google

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name Google Catppuccin
@namespace github.com/catppuccin/userstyles/styles/google
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google
@version 0.2.8
@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agoogle
@description Soothing pastel theme for Google
@author Catppuccin
@license MIT

@preprocessor less
@var select lightFlavor "Light Flavor" ["latte:Latte*", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha"]
@var select darkFlavor "Dark Flavor" ["latte:Latte", "frappe:Frappé", "macchiato:Macchiato", "mocha:Mocha*"]
@var select accentColor "Accent" ["rosewater:Rosewater", "flamingo:Flamingo", "pink:Pink", "mauve:Mauve*", "red:Red", "maroon:Maroon", "peach:Peach", "yellow:Yellow", "green:Green", "teal:Teal", "blue:Blue", "sapphire:Sapphire", "sky:Sky", "lavender:Lavender", "subtext0:Gray"]
==/UserStyle== */


@-moz-document regexp("^https?://(www\\.|images\\.)?google\\..*")
{
  @media (prefers-color-scheme: light) {
    :root {
      #catppuccin(@lightFlavor, @accentColor);
    }
  }
  @media (prefers-color-scheme: dark) {
    :root {
      #catppuccin(@darkFlavor, @accentColor);
    }
  }

  #catppuccin(@lookup, @accent) {
    @flamingo: @catppuccin[@@lookup][@flamingo];
    @pink: @catppuccin[@@lookup][@pink];
    @mauve: @catppuccin[@@lookup][@mauve];
    @red: @catppuccin[@@lookup][@red];
    @maroon: @catppuccin[@@lookup][@maroon];
    @peach: @catppuccin[@@lookup][@peach];
    @yellow: @catppuccin[@@lookup][@yellow];
    @green: @catppuccin[@@lookup][@green];
    @teal: @catppuccin[@@lookup][@teal];
    @sky: @catppuccin[@@lookup][@sky];
    @sapphire: @catppuccin[@@lookup][@sapphire];
    @blue: @catppuccin[@@lookup][@blue];
    @lavender: @catppuccin[@@lookup][@lavender];
    @text: @catppuccin[@@lookup][@text];
    @subtext1: @catppuccin[@@lookup][@subtext1];
    @subtext0: @catppuccin[@@lookup][@subtext0];
    @overlay2: @catppuccin[@@lookup][@overlay2];
    @overlay1: @catppuccin[@@lookup][@overlay1];
    @overlay0: @catppuccin[@@lookup][@overlay0];
    @surface2: @catppuccin[@@lookup][@surface2];
    @surface1: @catppuccin[@@lookup][@surface1];
    @surface0: @catppuccin[@@lookup][@surface0];
    @base: @catppuccin[@@lookup][@base];
    @mantle: @catppuccin[@@lookup][@mantle];
    @crust: @catppuccin[@@lookup][@crust];
    @accent-color: @catppuccin[@@lookup][@@accent];

    color-scheme: if(@lookup = latte, light, dark);
    iframe {
      color-scheme: none !important;
    }

    ::selection {
      background-color: fade(@accent-color, 30%);
    }

    input,
    textarea {
      &::placeholder {
        color: @subtext0 !important;
      }
    }

    &,
    body {
      background: @base !important;
      --uv-styles-color-surface: @crust;
      --uv-styles-color-tertiary: @surface0;
      --uv-styles-color-secondary: fade(@blue, 25%);
      --uv-styles-color-primary: @base;
      --uv-styles-color-on-primary: @blue;
      --uv-styles-color-text-primary: @blue;
      --uv-styles-color-icon-default: @text;
      --uv-styles-color-text-emphasis: @text;
      --uv-styles-color-icon-on-secondary: @subtext0;
      --uv-styles-color-on-tertiary: @text;
      --uv-styles-color-icon-on-tertiary: @text;
      --xhUGwc: @base;
      --bbQxAb: @text;
      --IXoxUe: @subtext0;
      --COEmY: @text;
      --YLNNHc: @text;
      --gS5jXb: @surface0;
      --EpFNW: @mantle;
      --XKMDxc: @mantle;
      --tefdc5886c2f04483: @text;
      --te8f1ea4d4928be48: @text !important;
      --ta884a309a24f44f4: @subtext0 !important;
      --tdee01b39543f1cac: @base !important;
      --tcc8c9ef487836e2b: @surface0 !important;
      --ta83cba65577ef850: @blue !important;
      --t7d1a3050c2c1c0a5: @text !important;
      --t6a0469853a1a02c1: @text !important;
      --t5feec22832a0fdd6: @surface0 !important;
      --t342c96645d13ae13: @accent-color !important;
      --t6c7325fca9d536d4: @text !important;
      --tf7148cf5018d5074: @text !important;
      --t9ab8d922307d428d: @text;
      --t62e84c71989f1975: @red !important;
      --tc9db399ed82142e1: @green !important;
      --uv-styles-color-text-default: @subtext0 !important;
      --uv-styles-color-review-stars: @yellow !important;
      --gm3-sys-color-primary: @surface0;
      --gm3-sys-color-on-primary: @blue;
      --Nsm0ce: @blue;
    }

    /* header background */
    .CvDJxb {
      background-color: @base !important;
    }

    /* safe search toggle dropdown */
    .z4R3Z.yb2zA {
      color: @blue !important;
    }
    .z4R3Z {
      color: @text !important;
    }

    /* selected image background */
    .PNCib.fT6ABc::after {
      background-color: @surface1 !important;
      border-color: @blue !important;
    }

    /* travel  */
    .Usd1Ac {
      background-color: @surface0 !important;
      border-color: @surface2 !important;
    }
    .P77izf {
      background-color: @base !important;
      color: @text !important;
    }
    .VfPpkd-StrnGf-rymPhb-f7MjDc,
    .VfPpkd-qPzbhe-JNdkSc-Bz112c {
      color: @accent-color !important;
    }
    .EL3pcf {
      color: @accent-color !important;
    }
    .bVfPpkd-StrnGf-rymPhb,
    .DMZ54e {
      color: @text !important;
    }
    .VfPpkd-pafCAf,
    .VfPpkd-pafCAf-OWXEXe-Xhs9z {
      fill: @mantle !important;
    }
    .VfPpkd-l6JLsf::after {
      background-color: @blue !important;
    }
    .VfPpkd-l6JLsf::before {
      background-color: @surface2 !important;
    }
    .VfPpkd-uMhiad::after {
      background: @overlay0;
    }
    .dmaMHc {
      background-color: @surface0 !important;
    }
    .AJxgH {
      background-color: @mantle !important;
    }
    .VfPpkd-cTi5dd {
      color: @accent-color !important;
    }
    /* news column thingymaboober idk what it's actually called, but it's like these columns of news headlines so yeah */
    .z7T1i,
    .nEklgc {
      background-color: @surface0;
    }
    .rbYSKb {
      color: @subtext0;
    }
    .FuOudf {
      color: @subtext0;
    }
    /* calculator senpai~ */
    .zRQJhd {
      background-color: @base !important;
    }
    .XH1CIc {
      color: @subtext0;
    }
    .pno7A.hU1rMc .Tqvz7b,
    .pno7A.rfUaPd .SwDSDf {
      color: @subtext1;
    }
    .pno7A.rfUaPd .Tqvz7b {
      color: @text;
    }
    .tR3EBc {
      background-color: @mantle;
    }
    .AOvabd,
    .dxp44d {
      background: @surface0 !important;
      color: @text !important;
      border-color: @surface0 !important;
      &:hover {
        background-color: @surface1;
        border-color: @surface1;
      }
    }
    .zbvg1c {
      color: @text;
    }
    .UUhRt {
      background-color: @blue;
      color: @mantle;
      border-color: @blue;
      &:hover {
        background-color: @sky;
        border-color: @sky;
      }
    }
    .tw-lliw.item-selected .language_list_item {
      color: @blue;
    }
    .qv3Wpe {
      color: @text;
    }
    .TIGsTb {
      border-color: @surface0;
    }
    .TIGsTb:hover {
      background-color: @surface0;
      border-color: @surface0;
    }
    .MEdqYd,
    .feqqG {
      background: @surface2;
      color: @text;
      border-color: @surface2;
      &:hover {
        background-color: @overlay0;
        border-color: @overlay0;
      }
    }
    /* knowoledge panel uwu */
    .H73aad {
      &,
      &hover {
        background-color: @mantle !important;
        border-color: @surface0 !important;
      }
    }

    .AQtWSd,
    .ulmfef,
    .xCBykf,
    .m2E3md {
      color: @blue;
    }

    .joHe2d {
      background-color: @base !important;
      box-shadow: 0 1px 0 @base !important;
    }
    .xt8Uw,
    .ipwqjc,
    .Bk8Hxd:link,
    .ucRBdc,
    .PDzHbe,
    .pt3Hdf,
    .Cv2Brc,
    .IFGUre,
    .review-dialog {
      color: @text;
    }

    .GK1a5e {
      background-color: @text;
    }

    .RC9d6e {
      border-top-color: @text;
    }

    .IFmkIb.IFmkIb {
      background-color: @surface0;
      border-color: @surface2;
    }
    .ab_button {
      background-image: linear-gradient(to top, @surface0, @base);
      background-color: @surface0;
      border-color: @surface1;
    }

    .PGbOqf {
      background-color: @accent-color;
    }

    .yAbdSd {
      color: @red;
    }

    .ycghLd {
      background-color: @red;
      border-color: @red;
    }

    .IRH78d,
    .CFjcj,
    .HkuhB {
      color: @subtext0;
    }
    .l2gNXd {
      background-color: @yellow;
    }
    .uVGhGc,
    .hIqKNb {
      background-color: @surface0;
    }
    .tcuWYc {
      background-image: linear-gradient(
        @overlay0 1px,
        rgba(255, 255, 255, 0) 0
      );
    }
    .qk7LXc.Fb1AKc,
    .fAt9Jd,
    .SME0md,
    .ipwqjc {
      background-color: @base !important;
    }

    .ttBXeb,
    .NDTw3e.K7R36c,
    .knowledge-finance-wholepage-chart__fw-uch .uch-svg {
      color: @subtext0;
    }

    .sQ6RSc {
      fill: @text;
    }

    .egcvbb {
      border-color: @surface2;
      &:hover {
        border-color: @text;
      }
    }

    .knowledge-finance-wholepage-chart__hover-card {
      background-color: @base;
    }
    .knowledge-finance-wholepage-chart__hover-card-time {
      color: @subtext0;
    }

    .fw-ch-sel .KWk7r.qUjgX {
      background-color: @surface0;
      color: @blue;
    }

    .gb_Ka.gb_f,
    .gb_Na.gb_f,
    #gb {
      background-color: @base !important;
      svg,
      .gb_Rc svg,
      .gb_dd .gb_ld,
      .gb_3c .gb_ld {
        color: @text;
      }
    }
    .gb_Nc a.gb_F,
    .gb_Nc span.gb_F {
      color: @text;
    }
    .uU7dJb {
      border-bottom-color: @surface0;
      background-color: @mantle;
      color: @subtext1;
    }
    .gb_Nc .gb_d:hover {
      background-color: @surface0;
    }
    .KxwPGc {
      background-color: @mantle;
    }
    .HJSKzf {
      color: @text;
    }

    .gbqfba,
    .lJ9FBc input[type="submit"] {
      color: @text;
      background-color: @surface0;
      border-color: @surface1;
      &:hover {
        color: @text;
        background-color: @surfa...

Reviews

No reviews yet.