/* ==UserStyle== @name Google Catppuccin @namespace github.com/catppuccin/userstyles/styles/google @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/google @version 2025.05.01.1 @updateURL https://github.com/keonly/userstyles/raw/main/styles/google/catppuccin.user.less @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\\..*") { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } } #catppuccin(@flavor) { @rosewater: @catppuccin[@@flavor][@rosewater]; @flamingo: @catppuccin[@@flavor][@flamingo]; @pink: @catppuccin[@@flavor][@pink]; @mauve: @catppuccin[@@flavor][@mauve]; @red: @catppuccin[@@flavor][@red]; @maroon: @catppuccin[@@flavor][@maroon]; @peach: @catppuccin[@@flavor][@peach]; @yellow: @catppuccin[@@flavor][@yellow]; @green: @catppuccin[@@flavor][@green]; @teal: @catppuccin[@@flavor][@teal]; @sky: @catppuccin[@@flavor][@sky]; @sapphire: @catppuccin[@@flavor][@sapphire]; @blue: @catppuccin[@@flavor][@blue]; @lavender: @catppuccin[@@flavor][@lavender]; @text: @catppuccin[@@flavor][@text]; @subtext1: @catppuccin[@@flavor][@subtext1]; @subtext0: @catppuccin[@@flavor][@subtext0]; @overlay2: @catppuccin[@@flavor][@overlay2]; @overlay1: @catppuccin[@@flavor][@overlay1]; @overlay0: @catppuccin[@@flavor][@overlay0]; @surface2: @catppuccin[@@flavor][@surface2]; @surface1: @catppuccin[@@flavor][@surface1]; @surface0: @catppuccin[@@flavor][@surface0]; @base: @catppuccin[@@flavor][@base]; @mantle: @catppuccin[@@flavor][@mantle]; @crust: @catppuccin[@@flavor][@crust]; @accent: @catppuccin[@@flavor][@@accentColor]; color-scheme: if(@flavor = latte, light, dark); iframe { color-scheme: none !important; } ::selection { background-color: fade(@accent, 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; --uv-styles-color-scrim: fade(@crust, 75%); --uv-styles-color-on-scrim: @text; --uv-styles-color-icon-on-scrim: @text; --xhUGwc: @base; --bbQxAb: @text; --IXoxUe: @subtext0; --COEmY: @text; --YLNNHc: @text; --JKqx2: @blue; --gS5jXb: @surface0; --mXZkqc: @surface0; --EpFNW: @mantle; --XKMDxc: @mantle; --TSWZIb: @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 !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 !important; } .EL3pcf { color: @accent !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 !important; } /* news column thingymaboober idk what it's actually called, but it's like these columns of news headlines so yeah */ .nEklgc { background-color: @surface0; } .JJZKK.Wui1sd { border-color: @surface0; } .rbYSKb, .FuOudf, .GI74Re { color: @subtext0; } /* widgets */ /* timer */ .pMz3A, .qhXOwb, .yrvNxb .pv60Cd, .LPl7kb .pv60Cd, .Q7q8pf .pv60Cd { background-color: @mantle !important; } /* color picker */ .P2c8Dd { background-color: @base; } .R9RxHd { border-color: @surface0; } /* unit converter */ .LNn04b { background-color: @mantle; color: @text !important; border-color: @surface0; } .vXQmIe, .vk_c { color: @text !important; border-color: @surface0 !important; } .NIzGle { background-color: @yellow; color: @crust; } /* periodic table */ .DJ3Gm { background-color: @peach; color: @crust; } .nA1S9d { background-color: @mauve; color: @crust; } .qY66Od { background-color: @blue; color: @crust; } .IJR6Te { background-color: @sky; color: @crust; } .asrVsb { background-color: @surface0; } .VCIyZb { background-color: @red; color: @crust; } .QRbwTb { background-color: @teal; color: @crust; } .tASb2d { background-color: darken(@red, 5%); color: @crust; } .Fm9Me { background-color: @yellow; color: @crust; } .wo1y7c { background-color: @green; color: @crust; } /* search bar right beneath websites */ .YbqTTb, g-flat-button.BwMo1 { background-color: @base; border-color: @surface0; } .YbqTTb:focus { border-color: @accent; } /* some play buttons on games */ .fxvhbc, .pGGGle { background-color: @accent; color: @crust; } /* 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; } } /* more button */ .CybWFf { background-color: @surface0; } .Lu57id { color: @subtext0; } /* live sports */ .Wrsj9b, .ofy7ae, .PPjCfd, .lr-imso-fix { background-color: @accent !important; color: @crust !important; } .liveresults-sports-immersive__match-grid-bottom-border, .liveresults-sports-immersive__match-grid-right-border, .YENodc { border-color: @surface0; } .liveresults-sports-immersive__match-tile:hover, .KAIX8d:hover, .kwbMAe { background-color: @surface0; } .imspo_mt__dt-t, .imspo_mt__pm-infc, .GOsQPe { color: @text !important; } /* 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; } .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: @surface0; border-color: @surface2; } } /* AI search */ .UxeQfc, .s7d4ef, .yXu61c, .X6JNf, .BERAof, .oxbMzd, .A5s9h, .V9Wb7c, .GVUPk, .GyAeWb, .A0hi5, .Tme6jf { background-color: @base !important; } .d3o3Ad, .sZKvbe { fill: @green !important; } .Fzsovc, .cwYVJe, .RJPOee, .vM0jzc, .clOx1e, .vDF3Oc.vDF3Oc .R8BTeb, .vDF3Oc.vDF3Oc .ouxCkc, .Yt787, .mulB1, .xUc8Ie, .sfgTZc, .I6Kpxd, .cQEt3 { color: @text !important; } .yQLaje, .tVoQIb, .f9nOyf, .kHtcsd, .DopHqc, .p7bv, .ar9V1, .DfMusf, .y6CIle, .JukT7c, .xUc8Ie.BXdrne, .sEqX7e, .ZFiwCf { background-color: @surface0 !important; } .xUc8Ie.BXdrne, .YUg0se, .WGbsof { border-color: @surface2 !important; } .NOo3C { color: @subtext1; } .WGbsof[selected] { background-color: @blue; border-color: @blue !important; } /* End of AI search */ /* "People also search for.." / "People also ask" section */ .vIifob, .p8Jhnd { background-color: @surface0 !important; } .vBnbff, .RSWv0c.NaC7Cf, .RSWv0c.NaC7Cf .q8U8x > div:nth-child(1) { background-color: @surface0 !important; color: @text !important; } .DxHbyd { background-color: @surface2 !important; } .dg6jd { color: @text !important; } /* mobile ui */ /* header background & search bar */ .v6U7rf { background-color: @base; } .zGVn2e, .u4frDf { background: @surface0 !important; } /* search suggestions */ .K4VNlb, .Sl6fgd.A7Yvie, .Sl6fgd .zGVn2e, .UUbT9 { background-color: @surface0; border-color: @surface0 !important; } .sb43 { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } /* text */ .SAuUUd-z5C9Gb-fmcmS, .tJaMb, .TElO2c, .cQp1Ab { color: @text !important; } .s49v2 { b, span { color: @text !important; } } .ob9lvb { color: @subtext0; } /* borders */ .Dgr5Hb, .GqbEwc { border-color: @surface0 !important; } #gsr { background-color: @mantle; } .Ww4FFb { box-shadow: 0 0 0 1px @base; } .Faw6Fe, .GpOXq { border-color: @surface0 !important; } .zGVn2e, .jh86Nb { border-color: @surface1 !important; } /* Featured snippets */ @media (prefers-reduced-motion: no-preference) { .c2xzTb .ILfuVd b { background: linear-gradient( 90deg, fade(@accent, 30%) 50%, #0000 50% ) no-repeat 75% 0; background-size: 200% 100%; } } .pHiOh, a.pHiOh { color: @subtext1 !important; } a { color: @blue; } .RNNXgb { background: @surface0; border-color: @surface1; } .RNNXgb:hover, .sbfc .RNNXgb { background: @surface0 !important; border-color: @surface0; box-shadow: 0 1px 6px 0 @crust; } .minidiv .RNNXgb { background: @surface0; border-color: @surface1; &:hover { box-shadow: 0 4px 12px @crust; } } .HSryR .KsRP6 { border-color: @surface2; } .emcav .RNNXgb { box-shadow: 0 1px 6px 0 @crust; background: @surface0; border-color: @surface0; } .aajZCb { background: @surface0; box-shadow: 0 4px 6px 0 @crust; } .xtSCL { border-top-color: @surface2; } .sbct:hover { background-color: @surface1; } .WggQGd { color: @mauve !important; } .JCHpcb { color: @subtext0; } .JCHpcb:hover { color: @blue; } .wM6W7d, .ABAbCc { color: @text; } .uDetx { fill: @text; } .ExCKkf, .BjWz4c { color: @subtext0; } .ACRAdd { border-left-color: @overlay0; } .Pvpvv { background-color: @crust; border-color: @surface1; color: @text; } .w9dUj { color: @text !important; } .Pvpvv .zE5Aq, .adnFRd, .XfJHbe { color: @blue; } .CS4h3e { background-color: @subtext0; } .Pvpvv .xyGai { color: @text; } #SIvCob { color: @text; } .gb_Jc a.gb_B, .gb_Jc span.gb_B { color: @text; } .gb_Jc svg, .gb_Oc.gb_Sc svg, .gb_Jc .gb_ad .gb_id, .gb_Jc .gb_ad .gb_Ic, .gb_Jc .gb_ad .gb_cd, .gb_Oc.gb_Sc .gb_id { color: @text; } .gb_Ka svg, .gb_Oc svg, .gb_ad .gb_id, .gb_0c .gb_id { color: @text; } .gLFyf { color: @text; } .QCzoEc { color: @overlay2; } .szppmdbYutt__middle-slot-promo { color: @text; } .gb_Jc .gb_Ud button:hover svg, .gb_Jc .gb_d:hover { background-color: @surface0; } .gb_Jc .gb_Ud.gb_qe button:hover svg, .gb_Ud button:hover svg, .gb_d:hover { background-color: @surface0; } .gb_We { background: @mantle; color: @text; } a.gb_B, span.gb_B { color: @text; } .gb_zc div:first-child { color: @text; } .gb_zc > * { color: @subtext0; } .ClJ9Yb { color: @subtext0; } .sfbg { background-color: @base; } .jfN4p, .lnXdpd:not([src^="/logos/doodles/"]) { @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } .aXBZVd { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } .zgAlFc { color: @blue; } .fLciMb { color: @text; } .d2IKib { color: @red; } .fLciMb:hover { background-color: @surface0; } .kno-ftr.rpBMYb { color: @subtext0; } .aTI8gc { color: @text; } .wwUB2c { color: @subtext0; } .dhERQc { color: @base !important; background-color: @blue !important; } .z1asCe, .ikb4Bb { color: @subtext1 !important; } .rsGxI.Ww4FFb, .Ww4FFb { background-color: @base; } .RES9jf { color: @text; } .CSkcDe, .related-question-pair div.iDjcJe { color: @text; } .cUnQKe .ILfuVd b, .cUnQKe .QBI8hf b { background-color: fade(@blue, 25%); color: @text; } .cUnQKe .ILfuVd, .cUnQKe .UiGGAb.ILfuVd { color: @subtext1; } .ZYHQ7e { color: @subtext0; } .VuuXrf { color: @text; } .hb8SAc, .gb_Oc a.gb_H, .gb_Oc span.gb_H { color: @text; } .TQc1id .I6TXqe { border-color: @surface2; } .I6TXqe, .zaokob { background: @base; } .tw-lliw:hover, .tw-lliw:focus { background-color: @surface0; } .language_list_languages.tw-ll-top::after { background: linear-gradient(to bottom, transparent, @base); } .HsZQAe { border-bottom-color: @surface2; } .KLEmSd { border-bottom-color: @surface1; } .NtaMpb .niO4u, .nZWEZc .ttwCMe, .xNzW0d, .lWzCpb { background-color: @base; } .aURkK { border-left-color: @surface1; } .iRPzcb { border-bottom-color: @surface1; } .related-question-pair .d0fCJc { color: @text; } cite, cite a:link, cite a:visited { color: @subtext0; } .WZ8Tjf, .EZAeBe, .F0gfrd { color: @subtext0; } .yDYNvb.lyLwlc { color: @text; } .H9lube { background-color: @base; border-color: @surface2; } .Bi9oQd { background-color: @surface1; } .akqY6 { background: @surface1; } .KFFQ0c .YfftMc, .KFFQ0c .YfftMc span, .KFFQ0c .YfftMc div, .KFFQ0c .YfftMc a, g-menu.DWsAYc g-menu-item a.K1yPdf, .f3LoEf, .TXBhSe:hover, .TXBhSe:not(:hover), .r025kc.lVm3ye, .Bo9xMe, .oyj2db { color: @subtext0; } .dyjrff, .LEwnzc { color: @subtext1; } .ZFiwCf { background-color: @surface0; &:hover { background-color: @surface1; } } .LGwnxb, .WGwSK { color: @text; } .EsIlz { background-color: @base; border-color: @surface1; } .O7G3Gd { color: @text; &:hover { color: @blue; } } .appbar { background: @base; border-top-color: @surface1; } .bSeRjc:hover .fKmH1e { color: @subtext1; background-color: @surface0; } .bSeRjc:hover div[aria-expanded="true"] .fKmH1e, div[aria-expanded="true"] .fKmH1e { background-color: fade(@blue, 25%); color: @blue; } .LHJvCe, .vqseUe, .dMCttd { color: @subtext0; } .dG2XIf .xpdbox .yc7KLc { background-color: @base; } .URgIvb { border-color: @blue; background-color: @blue; } .pdpvld { color: @green; } .YrbPuc { color: @subtext1; } .SRfaKe, .SRfaKe h2 { background-color: @mantle; } .y6CIle { background-color: @surface0; } .Yt787, .vDF3Oc.vDF3Oc .R8BTeb { color: @text; } .IDFSOe { background-color: @surface2; } .ffmmcd, .u7yw9 .WeviRb { border-color: @surface1; } .wdQNof { border-color: @surface1; background-color: @base; } .PewBWb { border-top-color: @surface1; } .eadHV.Ses7yd { color: @text !important; } .f, .j04ED, .j04ED a, .j04ED a:link, .XaIwc { color: @subtext0 !important; } #_Xg6uZYKGBYCDhbIPvK2s2AI_27 > div:nth-child(3) > g-right-button:nth-child(1) > g-fab:nth-child(1), g-right-button.wgbRNb > g-fab:nth-child(1) { background-color: @crust !important; } .gb_2e { background-color: @surface0; } .gb_Ec { div:first-child { color: @text; } > * { color: @subtext0; } } .kLhEKe { background-color: @base; } .S8ee5.CwbYXd { color: @text; } .S8ee5 { background: @surface0; } .S8ee5:hover { background: @surface1; } .rhHIGd { background-color: @surface2; } .sY7ric { color: @text; } .I6a0ee { background-color: @base; border-color: @surface2; color: @text; } .I6a0ee:hover { background-color: @mantle; border-color: @surface2; } .I6a0ee:focus { background-color: @crust; border-color: @surface2; } .pxhZNb { background-color: @surface0 !important; color: @text; } .d2F2Td { color: @text; } .c07z9 { color: @subtext0; } .c07z9 a, .c07z9 a:active, .c07z9 a:link { color: @text; text-decoration-color: @subtext0; } .wHYlTd { color: @subtext0; } .dG2XIf .c2xzTb .wDYxhc:first-child { background: @base; } .fm06If .ILfuVd, .c2xzTb .ILfuVd, .Jb0Zif .c2xzTb .ILfuVd { color: @text; } .fm06If .ILfuVd b, .c2xzTb .ILfuVd b { background-color: fade(@blue, 25%); color: @text; } .GKS7s { background: @surface0; border-color: @surface1; box-shadow: inset 0 0 0 1px @surface2; } .GKS7s:hover { background-color: @surface1 !important; border-color: @surface2; } .yXK7lf em { color: @text; } .Lb0dA:hover { background-color: @surface0; } .Lb0dA[aria-expanded="true"]:hover .EGarzf { color: @blue; } .Lb0dA[aria-expanded="true"] { background-color: fade(@blue, 25%); } .BaegVc:hover { background-color: @surface0; } .hdtb-tl-sel .BaegVc { background-color: fade(@blue, 25%); } .BaegVc:focus { background-color: fade(@blue, 25%); } .TZqsAd { background: @overlay0; } .FalWJb { background: @base; } .YeThId { border-top-color: @surface1; } .k8XOCe { background-color: @surface0; } .s75CSd { color: @text; } .ZkkK1e, .uAbMZd { background: @base; border-color: @surface1; &:hover { background: @surface0; } } .QjI2jc { color: @subtext0; } .lhLbod { color: @subtext0; } .nr7I6e div[aria-expanded="true"] .F75bid, .nr7I6e div[aria-expanded="true"]:hover .fFI3rb .F75bid { color: @blue; } .F75bid { color: @subtext0; } div[aria-expanded="true"] .fFI3rb { background-color: fade(@blue, 25%) !important; } div[aria-expanded="true"]:hover .fFI3rb:hover { background-color: fade(@blue, 25%) !important; } .MAMMm { background: @mantle; box-shadow: 0 2px 6px @crust !important; } [selected].nWtjMe { background: fade(@blue, 25%) !important; } .uZNuIf:hover { background-color: @surface0; color: @text; } [selected].nWtjMe .FMKtTb { color: @text; } .nWtjMe .FMKtTb { color: @subtext0; } .GKS7s .FMKtTb, .GKS7s .RWhoyd.mol54e { color: @text; } .ePSouf .FMKtTb { color: @subtext0; } .NkCsjc:hover { background-color: @surface0 !important; color: @text; } .nr7I6e div[aria-haspopup="true"]:hover .F75bid { color: @text; } a.hisnlb { background: fade(@overlay2, 25%); } div[aria-expanded="true"] .fFI3rb, div[aria-expanded="true"]:hover .fFI3rb:hover { background-color: @surface0 !important; } .hdtb-tl-sel .BaegVc .WjMmQ:hover { color: @blue; } .hdtb-mn-hd { color: @subtext0; } .hdtb-mn-hd:hover { color: @text; } .fSnalc { stroke: @blue; } .oOg6Ne { stroke: @yellow; } .ZqPjbb { stroke: @red; } .aPiskd { stroke: @green; } .s8GCU { background-color: @base; } .Lj9fsd { background-color: @base; } .jZWadf { background-color: @base; } .rQEFy, .rQEFy:hover { border-color: fade(@blue, 25%); background-color: fade(@blue, 25%); } .gbZSUe { color: @text; } .gbZSUe:hover { background: @surface0; } .XZ5MVe { color: @blue; } a:visited { color: @mauve; } .SvoXfb > .x5f7Bc { fill: @subtext0; } .SvoXfb:hover > .x5f7Bc { fill: @text; } .SvoXfb:hover { background-color: @surface0; } .IsZvec, .yxAsKe { color: @subtext0; } .zqrO0.k0Jjg .QuU3Wb, .zqrO0.k0Jjg:hover .QuU3Wb { color: @subtext1; } .uo4vr { color: @subtext0; } .minidiv .sfbg { background: @base; box-shadow: 0 1px 6px 0 @crust; } .aqCVJb { background-color: @blue !important; border-color: @blue !important; } .T8VaVe { color: @blue; } .tw-ta, #tw-source-text-container .tw-ta, #tw-source-rmn-container .tw-ta { color: @text; } .tw-bilingual-marked { border-color: @blue; } #tw-target { background-color: @surface0; } .tw-data-placeholder { color: @text; } .j1iyq { border-color: @surface2; } .w8qArf .fl { color: @text !important; } .HSryR a.B1uW2d { border-bottom-color: @surface2; } .usJj9c .zz3gNc { color: @text; } .Ss2Faf a { color: @text; } .aCOpRe em, .yXK7lf em { color: @text; } .FR7ZSc .niO4u { background-color: @base; border-color: @surface2; color: @blue; } .g { color: @text; } .VSHxQ { color: @subtext0; } .cF4V5c { background-color: @crust !important; } .cF4V5c g-menu-item a, .cF4V5c g-menu-item a:visited, .cF4V5c g-menu-item a:hover { color: @text; } .cF4V5c:hover g-menu-item:hover a, .cF4V5c:hover g-menu-item a:visited, .cF4V5c g-menu-item a:hover { background-color: @surface0; } .GZnQqe.LGiluc { border-top-color: @surface2 !important; } .pkWBse { box-shadow: 1px 1px 15px 0 @crust; } .dG2XIf { background: @base; border-color: @surface0 !important; } .Z0LcW { color: @text; } .i29hTd .qLLird { color: @text; } .i29hTd .kR7nSc { color: @text; } .N6Sb2c { color: @subtext0; } .C9iYEe { color: @subtext0; } .KcXNxb { background: @base; } .ss6qqb .PKDVJd { color: @subtext0; } a.oBa0Fe { color: @subtext0; } .o6juZc { background-color: @surface0; } .o6juZc:hover { background-color: @surface0; box-shadow: 0 4px 12px @crust; } .W6pGoe { background: @surface0; box-shadow: 0 4px 6px 0 @crust; } .WdWr7c { border-top-color: @surface2; } .sU3bKf { color: @text; } .O5OUld { color: @subtext0; } .zP7KFe { background: @surface1; } .O5OUld:hover { color: @blue; } .og3lId { color: @text; } .M3w8Nb .o6juZc { box-shadow: 0 1px 6px 0 @crust; } .r8xEL { color: @text; } .ZZ7G7b { color: @text; border-color: @surface1; } .NZmxZe { background-color: @base; border-color: @surface1; color: @text; } .NZmxZe:not(.rQEFy):hover, .cj2HCb.iuN0sf .w6PoOe:hover, .CgGjZc:hover { background-color: @surface0; border-color: @surface1; color: @text; } .ssfWCe .ZXJQ7c, .cj2HCb.iuN0sf .w6PoOe, .G2XB8d, .cj2HCb.iuN0sf .w6PoOe .KA8Jyb { color: @subtext0; .KA8Jyb:hover { fill: @subtext1; } } .KA8Jyb { fill: @subtext0; } .CgGjZc:hover .G2XB8d { color: @subtext1; } .o6OF0 { background-color: @surface1; &:hover { background-color: @surface2; } .SHFPkb { color: @text; } .PnfqLc { color: @subtext0; } } .zbRPDe, .scU1d { color: @text; } .UafVBb { background-color: @base; border-color: @surface2; } .mEQved { color: @subtext0; } .goxjub { > path:nth-child(1) { fill: @blue; } > path:nth-child(2) { fill: @green; } > path:nth-child(3) { fill: @yellow; } > path:nth-child(4) { fill: @red; } } [fill="#34a853"] { fill: @green; } [fill="#4285f4"] { fill: @blue; } [fill="#ea4335"] { fill: @red; } [fill="#fbbc05"] { fill: @yellow; } .ssfWCe .ZXJQ7c:hover { background-color: @surface0; color: @text; } .qcTKEe { background-color: @base; } .ooPrBf { background: @base; } .r9PaP { color: @subtext0; } .r9PaP:hover { color: @blue; } .H1KrKd { fill: @subtext0; } .cEPPT { border-bottom-color: @surface1; } .Ix6LGe { background: @base; box-shadow: 0 2px 10px 0 @crust; } .Hm7Qac:hover, .EuKAde { background-color: @surface0; } .igM9Le { color: @text; } .irf0hb { box-shadow: 1px 1px 15px 0 @crust; } .gb_Mc .gb_Vd button:hover svg, .gb_Mc .gb_d:hover { background-color: @surface0; } .gb_Mc svg, .gb_Rc.gb_Vc svg, .gb_Mc .gb_dd .gb_ld, .gb_Mc .gb_dd .gb_Lc, .gb_Mc .gb_dd .gb_fd, .gb_Rc.gb_Vc .gb_ld { color: @text; } .cEW58 { background-color: @surface0; } .dyAbMb { fill: @subtext0; } .zItAnd, .zItAnd:link, .zItAnd:visited, .zItAnd:hover, .zItAnd:active { color: @text; } .zItAnd { background-color: @base; border-color: @surface1; } .zItAnd:not(.MgQdud):hover { background-color: @surface0; border-color: @surface1; } .fKmH1e { background-color: @base; border-color: @surface1; color: @subtext0; } .fKmH1e:hover { background-color: @surface0; border-color: @surface1; } .nfSF8e, .WRhYSc { color: @subtext0; } .nfSF8e:hover, .WRhYSc:hover { background-color: @surface0; color: @subtext0; } .ssJ7i { color: @text; } .iAIpCb { color: @subtext0; } .KMdzJ, .ss6qqb .oBrLN, .ylgVCe { color: @subtext1; } .PmPt7d { color: @subtext0; } .gb_Mc a.gb_E, .gb_Mc span.gb_E { color: @text; } a.gb_E, span.gb_E { color: @text !important; } .RzdJxc { border-top-color: @surface2; } .rKnmn { border-top-color: @surface2; } .FzCfme { color: @subtext0; } .hMJ0yc { color: @subtext0; } .yg51vc { background-color: @base; } .hdtb-mitem a { color: @subtext0; } .hdtb-mitem .GOE98c, .hdtb-mitem a, .hdtb-mitem.hdtb-msel, .t2vtad { color: @subtext0; } .t2vtad:not(.hdtb-tl-sel) { color: @subtext0; } .dG2XIf .xpdopen .mJ2Mod { border-color: @surface1; } .t2vtad:not(.hdtb-tl-sel):hover { background-color: @surface0; border-color: @surface1; color: @text; box-shadow: 0 1px 1px @crust; } .hdtb-mitem:hover .GOE98c:hover, .hdtb-mitem:hover a, .hdtb-mitem.hdtb-msel, .t2vtad:hover { color: @blue; } .w6PoOe { color: @subtext0; } .w6PoOe:hover { color: @text; } .Lj9fsd.DU1Mzb { background-color: @base; box-shadow: 0 1px 6px 0 @crust; .o6juZc { border-color: @surface1 !important; } } .dZ5aUe .vbLSne .MjJqGe:not(.xvfzbc):hover { background-color: @surface0; } .FjVBEd { color: @green; } title-with-lhs-icon:hover .ekf0x h3 { color: @blue; } .GmE3X { color: @text; } .iv236 { color: @text; } .GLcBOb { border-bottom-color: @surface1; } .ss6qqb .Ui2TZ { color: @text; } .wx62f { color: @subtext0; } #rhs .u7yw9 { border-left-color: @surface1; } .ss6qqb .Jk5Tjc { border-color: @surface2; } #rhs .u7yw9 .cLjAic { border-bottom-color: @surface1; } .JNkvid .HnYYW { color: @text; } .aokhrd .TZahnb { border-left-color: @surface1; } .Cx1ZMc { color: @subtext0; } .CBPSbf { background-color: @base; } .E74aCb { color: @text; } .OE86Gc { background-color: @base; color: @text; fill: @text; } .c72nic { color: @text; } .GXMTjb { background-color: @base; border-color: @surface0; } .A9y7kf { color: @subtext0; } .OE86Gc a { color: @blue; } .Es2Et { color: @subtext0; } .KwJT0.VqKh3b div div { background-color: @base; fill: @text; color: @text; border-color: @surface1; } .rx7XFb { background-color: @surface0; } .VP31Vb { color: @text; } .HXQjqf { background-color: fade(@blue, 25%); color: @blue; } .SW5pqf { color: @blue; } .rQEFy:hover { color: @blue; } .hdtb-tl-sel { border-color: @surface2; background: @surface0; color: @text; } .hdtb-tl-sel:focus { border-color: @surface2; background: @surface0; color: @blue; } .t2vtad:active, .t2vtad:not(.hdtb-tl-sel):hover:active { background-color: @surface0 !important; box-shadow: inset 0 1px 2px @crust !important; } .gTl8xb { border-color: @subtext0 transparent; } .hdtb-mn-hd:hover .gTl8xb { border-color: @text transparent; } .h3L8Ub .yMAEcf { background: @surface0; border-color: @surface2; } .ynRric { color: @subtext0; } .cRV9hb .pcTkSc .wM6W7d { color: @text; } .h3L8Ub .yMAEcf.sbhl { background-color: @surface1; } .sbhl { background: @surface1; } .CjiZvb, .GZnQqe.EpPYLd:active { background-color: @surface0; } .PyJv1b { color: @text; } .REySof { color: @overlay2 !important; } .NQyKp { color: @surface0 !important; background: @accent !important; } .b0Xfjd { color: @base !important; } .LiOdre { background-color: @base; border-color: @surface1; } .LiOdre:hover { background-color: @mantle; border-color: @surface2; } .LiOdre:focus { border-color: @blue; } .mfsgsd { color: @text; } .GCSyeb { background: @surface1; } .IVvPP .cLjAic.WY0eLb, .Hwkikb.WY0eLb { border-left-color: @surface1; } .mQo3nc { background-color: @surface0; color: @subtext0 !important; } .cfBJGe { color: @text; } .f6F9Be { background: @mantle; } .KwU3F { color: @blue; } .b0KoTc { color: @text; } .dfB0uf { color: @text; } .unknown_loc { background: @text; } .GS5rRd { color: @blue; } .xSQxL { color: @blue; } .smiUbb { color: @text; } .b2hzT { border-bottom-color: @surface0; } #swml { border-left-color: @surface0; } .KXbwLb { background-color: @surface2; } .WZH4jc .VknLRd .GNJvt { background: @surface0; } .WZH4jc .VknLRd:hover .GNJvt { background: @surface1; } .GNJvt { color: @text; } .fJOpI.H9lube { background-color: @blue !important; border-color: @blue; } .XNo5Ab.XNo5Ab { color: @base !important; fill: @base !important; } .Ss2Faf.boljiHqtXe7__place-qa-title { color: @text !important; } .xEzgBc { color: @text !important; } .Ss2Faf.sq4Bpf { color: @text !important; } .ea0Lbe { background: @surface0; } .f6GA0, .CacfB, .Ua7Yuf { background: @base; } .DV7the { color: @blue; } .ZeVBtc { color: @subtext0; } .cB9M7 { background-color: @surface0; border-color: @surface1; color: @text; &:hover { border-color: @surface2; } &:focus { border-color: @blue; } } .Qwbd3 { background: @surface0; color: @text; border-color: @surface1; &:hover { background: @surface1; border-color: @surface2; } } .ArIAXb { fill: @surface0; } .qOFLsb { fill: @surface0; } .aHK1bd { color: @subtext0; } .diOlIe { border-top-color: @overlay0; } .p4pvTd { color: @text; } .gIYJUc { background: @base !important; border-color: @surface1 !important; } .Gdd5U > g:nth-child(2) { > circle:nth-child(1) { fill: @green !important; } > circle:nth-child(2) { fill: @blue !important; } > path:nth-child(3) { fill: @red !important; } > path:nth-child(4) { fill: @yellow !important; } > path:nth-child(5) { fill: @blue !important; } } .CbAZb { background: @base; border-bottom-color: @surface0; } .S8wJ3 { color: @text !important; } .ZI7elf { color: @text !important; } .tGS0Nc { color: @text; } .kzt0Nc a { color: @subtext0 !important; } .fgc1P, .N7KPxb { border-top-color: @surface0 !important; } .kQEH5b { color: @subtext0 !important; } .kNKdL { color: @text !important; } .q0yked:hover { background-color: @mantle !important; } .Oz5Rbb:hover { background: @mantle !important; } .lwwARb { background-color: @crust !important; } .LO47Ff { color: @text; } .j8PBfc { color: @subtext0; } .act-tim-txt-cnt { color: @text; } .act-switch-area { background-color: @base !important; } .EwDHG, .vNdLpe, .vNdLpe:visited { color: @subtext0 !important; } // "Looking for results in English?" popup [style*="background:#1f1000;border:1px solid #502900"], [style*="background:#feefc3;border:1px solid #fdd663"] { background: @mantle !important; border-color: @surface0 !important; box-shadow: 0 2px 4px @mantle !important; [style*="color:#bdc1c6"], [style*="color:#202124"] { color: @text !important; } } // translate this page label .eFM0qc.BCF2pd { background: @base !important; } // expand related question icon .aj35ze { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}"); } // tabs [selected].YmvwI { color: @text; border-bottom-color: @text; } .YmvwI { color: @subtext0; } // search bar buttons popups [style^="background: rgb(32, 33, 36); border: 1px solid rgb(60, 64, 67);"] { background: @mantle !important; border-color: @overlay0 !important; box-shadow: @mantle 1px 2px 4px !important; color: @text !important; [style^="border-style: solid;"] { border-color: @overlay0 transparent !important; } } // google apps button .gb_F .gb_E, .gb_F .gb_D { fill: @text; } // translate popup .t4wgMc { background: @mantle; } .ELfqBe:hover, .ELfqBe:focus { background: @surface0; } .JFeuTc { color: @text; } // skip to content .S6VXfe { background: @base; } // selected image .qyKxnc.FnEtTd .srrRv { background: fade(@blue, 10%); } // images page sticky suggestions header .JiJthb, .JiJthb .GKS7s:not([selected]) { background: @mantle; } .JiJthb .F9Idpe.vezEod { background: linear-gradient( to left, transparent 0%, @mantle 60%, @mantle ); } /// tv show information // episode title .huUgrf { color: @blue; } // episode divider .PZPZlf, .Ea7JLb { border-color: @surface2; } /// season selection // underline .A0zxBb { color: @text; } // background and border .qFF17c { background-color: @surface0 !important; border-color: @surface2 !important; } // middle divider .qFF17c > div { border-color: @surface2 !important; } // text .F3Istb > span { color: @subtext1 !important; } // text underline .F9SH7d { border-color: @text !important; } /// watch buttons // button .ZkkK1e { background-color: @surface0; border-color: @surface1; } // text .HJFlGc { color: @text; } // play button .GzErzd { color: @blue !important; } // footer logo [style^="background:url(/images/nav_logo321.webp)"] { @svg: escape( '' ); background-image: url("data:image/svg+xml,@{svg}") !important; } // tweets horizontal list g-right-button, g-left-button { > g-fab { background: @crust !important; border-color: @surface0; } } .vwfsqc { .QuU3Wb { color: @text; } } // image overlays .yUzGqc.wr8GYd { background: fade(@crust, 75%); color: @text; } // google lens icon hover .ig2Tkd:hover:not(.RDPZE) { background: fade(@mantle, 80%); } // image resolution .UWuvyf { background-color: fade(@crust, 80%); color: @text; } // image hover shadow .mkpRId.qyKxnc:hover .F0uyec { background: fade(@crust, 5%); box-shadow: 0 2px 12px 0 @crust; } // advanced search input.jfk-textinput, .gGbPid { background: @base; color: @text; border-color: @overlay0; } .goog-menu { background: @mantle; } .goog-menuitem-highlight, .goog-menuitem-hover { background: @surface0; border-color: @surface0; } .goog-menuitem, .goog-menuitem-highlight .goog-menuitem-content, .goog-menuitem-hover .goog-menuitem-content { color: @text; } .goog-flat-menu-button-hover { border-color: @overlay2; .goog-flat-menu-button-dropdown { border-color: @overlay2 transparent; } } .goog-flat-menu-button-dropdown { border-color: @overlay0 transparent; } div.otByu div.FAcADc, div.lFApYd, .jfk-radiobutton-label { color: @subtext1; } // knowledge panel .Qc895c, .Utq4Cb.PZPZlf, .SU02Qd g-inner-card { background-color: @surface0 !important; } .Qc895c div, .Utq4Cb.PZPZlf div, .CYJS5e { color: @text !important; } .CYJS5e.W0urI, .REySof.T9jMmf, .b0Xfjd.Hyaw8c, .dvfTSb.OdANFd { background-color: @surface0 !important; color: @text !important; } .CYJS5e.W0urI:hover { background-color: @surface1 !important; } .gEYEQc.x5W9xd.qYvl9c.klitem, .MJfuMd { background-color: @base !important; border-color: @surface1 !important; } .NQyKp.Hyaw8c.h4wEae.Maj6Tc { border-color: @text !important; } color: @subtext0; } @media (prefers-color-scheme: light) { body { #catppuccin(@lightFlavor); } } @media (prefers-color-scheme: dark) { body { #catppuccin(@darkFlavor); } } } @-moz-document regexp("^https?://(ogs\\.)?google\\..*") { body { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } } #catppuccin(@flavor) { @rosewater: @catppuccin[@@flavor][@rosewater]; @flamingo: @catppuccin[@@flavor][@flamingo]; @pink: @catppuccin[@@flavor][@pink]; @mauve: @catppuccin[@@flavor][@mauve]; @red: @catppuccin[@@flavor][@red]; @maroon: @catppuccin[@@flavor][@maroon]; @peach: @catppuccin[@@flavor][@peach]; @yellow: @catppuccin[@@flavor][@yellow]; @green: @catppuccin[@@flavor][@green]; @teal: @catppuccin[@@flavor][@teal]; @sky: @catppuccin[@@flavor][@sky]; @sapphire: @catppuccin[@@flavor][@sapphire]; @blue: @catppuccin[@@flavor][@blue]; @lavender: @catppuccin[@@flavor][@lavender]; @text: @catppuccin[@@flavor][@text]; @subtext1: @catppuccin[@@flavor][@subtext1]; @subtext0: @catppuccin[@@flavor][@subtext0]; @overlay2: @catppuccin[@@flavor][@overlay2]; @overlay1: @catppuccin[@@flavor][@overlay1]; @overlay0: @catppuccin[@@flavor][@overlay0]; @surface2: @catppuccin[@@flavor][@surface2]; @surface1: @catppuccin[@@flavor][@surface1]; @surface0: @catppuccin[@@flavor][@surface0]; @base: @catppuccin[@@flavor][@base]; @mantle: @catppuccin[@@flavor][@mantle]; @crust: @catppuccin[@@flavor][@crust]; @accent: @catppuccin[@@flavor][@@accentColor]; .aRDKUe { .rRF0wd { fill: @yellow !important; } .ub0gT { fill: @base !important; } .Pzuhxc { color: @text !important; &:hover { background-color: @surface2 !important; } } .hCDve { color: @text !important; } .WkuXae { color: @blue; } .coHE2 { border-color: @surface2 !important; &:hover { background-color: fade(@blue, 25%); } } .eYSAde { color: @text !important; } .Lvwayc { background-color: @surface0 !important; } .Z6NXed { color: @text !important; } .bMnvr { background: @surface1 !important; } .Wdz6e { color: @subtext0 !important; } .LzIwWe { color: @text !important; } .znj3je { color: @text !important; } .fVFoBd { color: @text !important; } .cllK4d { background: @surface0 !important; color: @subtext0 !important; } .aFCkf { background: @surface0 !important; color: @blue !important; } .DgDbFe .vZvJBb:not(:first-child) .BVnP4c::before { color: @text !important; } .qLP7kc .jFfZdd { background: @base !important; } .Z6NXed:hover { background-color: @surface1 !important; } } .nz9sqb.EHzcec { background: var(--gm3-sys-color-surface-container-high, @surface0); .LVal7b { background: var(--gm3-sys-color-surface-container-low, @mantle); } } .nz9sqb { .NQV3m { color: var(--gm3-sys-color-primary, @blue); border-color: var(--gm3-sys-color-outline, @surface2); &:hover { background-color: fade(@blue, 25%); } &:focus { background-color: fade(@blue, 25%); } } .Rq5Gcb { color: @text !important; } .tX9u1b:hover { background-color: @surface0; } } .nz9sqb.o07G5 .tX9u1b:active, .nz9sqb.o07G5 .tX9u1b:active:focus, .nz9sqb.o07G5 .tX9u1b:active .Rq5Gcb, .nz9sqb.o07G5 .tX9u1b:active:hover .Rq5Gcb { background-color: @surface0; } .aRDKUe .pRjiJb, .aRDKUe .DmSTqc { color: @text; } .aRDKUe .idKC9b, .aRDKUe .MbHqJ { color: @subtext0; } .aRDKUe .GXg3Le { color: @blue; } .aRDKUe .G5bXNb { background-color: @mantle; &:hover { background-color: @base; } } } } #rgbify(@color) { @rgb: red(@color), green(@color), blue(@color); } /* deno-fmt-ignore */ @catppuccin: { @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; }; @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; }; @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; }; @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #f4f4f4; @subtext1: #e0e0e0; @subtext0: #c6c6c6; @overlay2: #a8a8a8; @overlay1: #8d8d8d; @overlay0: #6f6f6f; @surface2: #525252; @surface1: #393939; @surface0: #262626; @base: #161616; @mantle: #0b0b0b; @crust: #000000; }; };