/* ==UserStyle== @name Gmail Catppuccin @namespace github.com/catppuccin/userstyles/styles/gmail @homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail @version 2024.12.28 @updateURL https://github.com/catppuccin/userstyles/raw/main/styles/gmail/catppuccin.user.css @supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Agmail @description Soothing pastel theme for Gmail @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 domain("mail.google.com") { @media (prefers-color-scheme: light) { :root { #catppuccin(@lightFlavor, @accentColor); } } @media (prefers-color-scheme: dark) { :root { #catppuccin(@darkFlavor, @accentColor); } } #catppuccin(@lookup, @accent) { @rosewater: @catppuccin[@@lookup][@rosewater]; @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]; @crust-filter: @catppuccin[@@lookup][@crust_filter]; @text-filter: @catppuccin[@@lookup][@text_filter]; @yellow-filter: @catppuccin[@@lookup][@yellow_filter]; color-scheme: if(@lookup = latte, light, dark); ::selection { background-color: fade(@accent-color, 30%); } input, textarea { &::placeholder { color: @subtext0 !important; } caret-color: @text; } #input-styling { input, select, button { background-color: @mantle; color: @text; border-color: @surface0; border-style: solid; border-width: 1px; box-shadow: none; } } * { text-shadow: none !important; } /* Gmail logo */ [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"], [src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_dark_1x_r5.png"] { height: unset !important; width: unset !important; @svg: escape( '' ); content: url("data:image/svg+xml,@{svg}"); } /* Tooltips */ .T-ays-iP, .gb_Ac { background-color: @crust; color: @text; } /* Buttons */ /* Solid primary */ .T-I-atl { background-color: @accent-color; color: @crust; } /* Transparent primary */ .l0, div.b8 .a8k, .bAo > .ad { color: @accent-color; &::before { background-color: @accent-color; } } /* Transparent secondary */ .bs0 > .acM, .bti > .btg, .a8Y > .T-I-ax7 { color: @text; /* Disabled */ &.acN { color: @subtext0; } &:hover::before { background-color: @overlay2; } } /* Header and sidebars */ .w-asV, .bkL, .bhZ.bym, .bhZ.bjB, .bhZ.bym.baA { background-color: @mantle; } /* Header icons */ .gb_Lc svg, .gb_Pc.gb_Uc svg, .gb_Lc .gb_rd .gb_sd, .gb_Lc .gb_rd .gb_Kc, .gb_Lc .gb_rd .gb_ud, .gb_Pc.gb_Uc .gb_sd { color: @text; } /* Search mail input */ .gb_Lc .gb_hd { background-color: @crust; .gb_je, svg { color: @text; } } /* Active search / filter modal */ .gssb_c { /* Icons */ button svg, .asor { filter: @text-filter; } /* Recent searches */ .aRp, .gssb_e, .gssb_m { background-color: @base; color: @text; } /* Hovered recent searches */ .gssb_i { background-color: @surface0; > .gssb_a { border-left-color: @accent-color; } /* X icon */ .gsaq_b { filter: @text-filter; } } .aSP, .gssb_e { border-color: @surface2; } /* Separator */ .gssb_l { background-color: @surface0; } /* Search results */ /* Icons */ .gsoi_0, .asor_o, .gsoi_msra { filter: @text-filter; } /* People involved */ .asor_e { color: @subtext0; } } /* Pill filters */ .H2 { background-color: @base; border-color: @surface0; color: @subtext1; fill: @subtext1; &:hover { background-color: @mantle; } &.bws { background-color: @accent-color; color: @crust; fill: @crust; .HV { filter: @crust-filter; } &:hover .H1 { background-color: darken(@accent-color, 5%); } } } .aqc .H2 { border-color: @text; color: @text; &.bws { background-color: @surface2; color: @mantle; } } /* Advanced search/filters modal */ .ZF-z6, .ZF-zT, .ZF-Av .lJ, .ZF-Av .lN { background-color: @base; &, .boo > .ZG, .boo .aQl > .J-JN-M-I-Jm, .boo .aaa > .J-JN-M-I-Jm, .boo .ZE > .J-JN-M-I-Jm { color: @text; } .btl.acK, .btn::before { filter: @text-filter; } /* Text inputs */ .nr { background-color: @base; color: @text; &:focus { box-shadow: inset 0 -1px 0 0 @accent-color; } } /* Calendar input */ .bs5::after { filter: @text-filter; } .J-JB-KA, .J-JB-KA-JS, .J-JB-KA-Jk, .J-JB-KA-LG { background-color: @base; color: @text; border-color: @surface0; /* Past days */ .J-JB-KA-Ku-Kk { color: @subtext0; } /* Future days */ .J-JB-KA-a1R-JB.J-JB-KA-LH, .J-JB-KA-a1R-JB.J-JB-KA-Ku-Kk, .J-JB-KA-JB.J-JB-KA-a1R-JB { color: @subtext1; } /* Hovered day */ .J-JB-KA-JB:not(.J-JB-KA-K8, .J-JB-KA-KO):hover { color: @crust; &::before { background-color: fade(@accent-color, 70%); } } /* Selected day */ .J-JB-KA-KO { color: @crust; &::before { background-color: @accent-color; } } /* Unselected today */ .J-JB-KA-K8 { color: @crust; &::before { background-color: @overlay2; } } } /* Checkbox inputs */ .bs1 + .bs3, .btj + .aD { color: @text; &::before { filter: @text-filter; } } /* Dropdown/select inputs */ .J-JN-M-I { color: @text; } } /* Sidebar selected item */ .TK .TO.nZ:active, .TK .TO.ol:active, .TK .TO.nZ, .TK .TO.ol, .byl .TK .nZ.aBP, .byl .TK .nZ.aS3, .byl .TK .nZ.aS4, .byl .TK .nZ.aS5, .byl .TK .nZ.aS6, .VDSZAf.H5o3mc { background-color: @surface0; } .TO.NQ, .n6 .ah9:hover, .n6 .ah9.aiu:hover, .n6 .ah9:focus, .TK .TO:active, .n6 .ah9.aiu:active, .CL:hover, .H5o3mc:not(.VDSZAf):hover, .CL.NQ, .H5o3mc:not(.VDSZAf).NQ { background-color: @surface1; } .byl .TK .TO.nZ > .aHS-bnt .n0, .TK .nZ > .aHS-bnt .bsU, .byl .TK .nZ.aS3 .nU > .n0, .TK .nZ.aS3 .bsU, .byl .TK .nZ.aS4 .nU > .n0, .TK .nZ.aS4 .bsU, .byl .TK .nZ.aS5 .nU > .n0, .TK .nZ.aS5 .bsU, .byl .TK .nZ.aS6 .nU > .n0, .TK .nZ.aS6 .bsU, .TK .TO.nZ .nU > .n0, .TK .ol.NQ .nU > .n0, .TK .TO.ol .nU > .n0, .TK .nZ .bsU, .TK .ol .bsU, .VDSZAf.H5o3mc > .Q7, .TO .nU > .n0, .TO.NQ .nU > .n0, .TO.nZ .nU > .n0, .ah9 > .CJ, .n3 > .CL > .CK, .aAv, .bsU { color: @text; } /* Icons */ .nZ > .TN.aHS-bnt .qj, .TO:not(.nZ) > .TN > .qj:not([style*="background-color"]), .n6 .n4 .G-asx, .aAw .aAu, .pM, .TO.nZ > .TN > .qj, .n3 .CL::before { filter: @text-filter; } /* Compose email button */ .z0 > .L3 { background-color: @accent-color; color: @crust; &:focus { background-color: @text; } } .WR .z0 > .L3::before, .WR.anZ .z0 > .L3::before { filter: @crust-filter; } /* Top section of inbox */ .bkK > .nH { background-color: @surface0; /* Icons */ .bzn, .aqJ .amJ, .adg .adk { filter: @text-filter; } } /* Inbox categories */ .aKx > .aKz { color: @text; } /* Icons */ .aAy > div { filter: @text-filter; } /* Currently selected category */ .J-KU-KO::before { background-color: @text; } /* Inbox categories hover */ .aRz.J-KU:hover { background-color: @surface1; } /* Email count / pagination */ div[aria-label="Show more messages"] { .Dj { color: @subtext1; } &::before { background-color: @text; } } .h0 { color: @subtext1; } /* Inbox footer */ .md.mj, .aeU .ma, .ma .mb, .ae3 .l6, .l9, .l8, .aiD { color: @subtext1; } /* Storage progress bar */ .aiC { background-color: @overlay0; .aiA { background-color: @subtext0; } } /* External link icon */ .aiz { filter: @text-filter; } /* Read emails */ .yO { background-color: @base; color: @text; box-shadow: inset 0 -1px 0 0 @surface0; &:hover { box-shadow: inset 1px 0 0 @surface0, inset -1px 0 0 @surface0, 0 0 4px 0 @surface1, 0 0 6px 2px @surface1; } } /* Read email text */ .zE { color: @text; } // Select icon .xY > .T-Jo, td.apU > .T-KT.aXw::before, // Important icon .pG .a9q, // Delete/trash icon .aqN, // Hover action icons .bqY li { filter: @text-filter; } /* Important icon filled, star icon filled */ .ha .a9q.pH, .a9q.pH, .aoj, td.apU > .T-KT.T-KT-Jp::before { filter: @yellow-filter; } .pG:hover > .a9q::before { background-color: fade(@yellow, 30%); } /* Read email dates */ .yO > .xW { color: @subtext0; } /* Read email summary truncated */ .y2 { color: @subtext1; } /* Selected unread emails */ .x7 { background-color: @accent-color; color: @mantle; /* Dates */ .xW { color: @crust; } // Select icon .xY > .T-Jo, // Star icon td.apU > .T-KT.aXw::before, // Important icon .pG .a9q, // Delete/trash icon .aqN, // Hover action icons .bqY li { filter: @crust-filter; } } /* Unsubscribe button */ .aOd.T-I { color: @text; box-shadow: inset 0 0 0 1px @surface2; } /* Draft text */ .boq { color: @red; } /* No drafts message, trash 30 days message */ .TD, .Tm .ya { background-color: @surface1; color: @text; } /* Your social/promotions/updates tab is empty */ .aRs { background-color: @base; color: @subtext0; .aRv { color: @text; } .aRq { color: @accent-color; } } /* You could lose access banner */ .GR { background-color: @base; /* Primary text */ .GX { color: @text; } /* Subtext */ .GT { color: @subtext1; } /* Dismiss button */ .GW { color: @text; &::before { background-color: @text; } } /* Add recovery info button */ .GV { color: @accent-color; &::before { background-color: @accent-color; } } } /* Attachments chips */ .brc { box-shadow: inset 0 0 0 1px @surface0; color: @text; &:hover { background-color: @surface0; } } /* Floating menu */ .J-M, .OO.Pa { background-color: @surface1; /* Menu section header */ .J-awr, .asc { color: @subtext1; } /* Menu item */ .J-N, .J-Ks-KO .J-N-Jz, .J-N-JT .J-N-Jz, .J-N-JW .J-N-Jz, .J-LC, .J-JK, .bmz { color: @text; } /* Disabled */ .J-N-JE .J-N-atj, .J-N-JE .J-N-Jz { color: @subtext0 !important; } /* Checkmark, arrow, checkbox, star, calendar icon */ .J-Ks-KO .J-N-Jo, .asi .J-Ks-KO::before, .J-Ph-hFsbo, .J-LC-Jo, .bi4 > .T-KT:not(.T-KT-Jp, .byM)::before, .aaA.mYVwse, .J-N-JX { filter: @text-filter; } .bmz.bjF::before { border-color: @subtext0; } /* Hovered menu item */ .J-N-JT, .J-N-JW, .J-LC-JT, .J-LC-JW, .J-JK-JT, .J-JK-JW, .bmz.bk5 { background-color: @surface2; border-color: @overlay1; } /* Menu section divider */ .J-Kh { border-top-color: @surface2; } } /* Modal search input */ .agd .J-M-JJ input { background-color: @surface1; color: @text; } .bqf { box-shadow: inset 0 -2px 0 0 @surface2; &:focus { box-shadow: inset 0 -2px 0 0 @accent-color; } } /* Magnifying glass icon */ .A0 { filter: @text-filter; } /* Edit label modal */ div.Kj-JD { background-color: @base; /* Edit label text */ span.Kj-JD-K7-K0 { color: @text; } /* Close X icon */ span.Kj-JD-K7-Jq::after { filter: @text-filter; } #input-styling(); /* Input labels */ div.Kj-JD-Jz { color: @subtext1; } /* Cancel button */ div.Kj-JD-Jl > button, .bBh .Kj-JD-Jl > .J-at1-auR { color: @subtext1; } /* Save button */ div.Kj-JD-Jl > button.J-at1-atl, div.Kj-JD-Jl > button.J-at1-auR { background-color: @accent-color; color: @crust; } } /* Toast notifications */ .bAp.b8.UC .vh { background-color: @crust; color: @text; } /* Close icon */ .b8 .bBe .bBf { filter: @text-filter; } /* Compose mail window */ /* Top header bar */ .Hy.Hy .m, .IG { background-color: @mantle; .Hp, .zu, .H, .Iy .az9 { color: @text; } .Hm img, .SB, .b7 .mK, .bAm .aaq .mK, .Un .mK, .HX .mK, .HQ .Un::after { filter: @text-filter; } } .aaZ, .Ap, .Am, .aDg > .aDj, .aoP .Ar, .wO, .aoT, .agP, .aGb, .GQ { color: @text; caret-color: @text; &, &::before { background: @base; } } .gQ, .gO, .oL { color: @subtext0; } /* Bottom toolbar icons */ .aaA, .btC .dv, .btC .og.T-I-J3, .btC .J-N-JX.og.T-I-J3, .btC .Y1, .btC .Xv.T-I.J-JN-M-I > .J-JN-M-I-JG, .J-JN-M-I-JG, .J-Z-M-I-J6-H > .J-Z-M-I-JG { filter: @text-filter; } /* Floating toolbar (expanded window) */ .J-Z { background-color: @mantle; .J-Z-I, .J-Z-M-I { color: @subtext1; } } /* Send button */ .gU .v7.T-I:not(.btz), .gU .hG:not(.v6) { background-color: @accent-color; color: @crust; } .hG > .G-asx, .SI .hG > .G-asx { filter: @crust-filter; } /* Contact autofill */ .afC, .bvx { background: @mantle; /* Contact list item */ .agJ { .aL8, .aXS { color: @text; } &:hover { background: @base; } } } --pkw-background: @mantle; --pkw-outline: @surface0; --pkw-outline-variant: @surface0; --pkw-on-surface-variant: @text; /* Contact chip */ .agh, .bbV { background: @base; .afV { background: @base; color: @text; &:hover { background: @surface0; color: @text; } } } /* Settings */ .dt { color: @text; } /* Navigation header */ .v { /* Tabs */ .fY, .f1 { background-color: @surface0; .f0 { color: @text; } } /* Currently selected tab */ .fZ { box-shadow: inset 0 -2px 0 0 @accent-color; } } /* Main panel */ .r4 { background-color: @base; color: @text; /* Dividers */ .r7 td, .Jb .J0:not(:last-child) { border-bottom-color: @surface0; } /* Links */ .r7 .e, .sA, .r4 .e, .el { color: @accent-color; } #input-styling(); .qK, .qL { background-color: @mantle; } .nr, .Ar { background-color: @base; color: @text; border-color: @surface0 !important; } /* Some buttons */ .Uu { box-shadow: inset 0 0 0 1px @surface0; color: @accent-color; } } /* Labels page */ .alO { background-color: @base; color: @text; .rb { color: @subtext1; } /* Table items */ .To.Ze { background-color: @surface0; } /* Links */ .alP { color: @accent-color; } /* Dividers */ .rZ { background-color: @surface0; } } /* Confirm popup modal */ div[aria-modal="true"] { --gm3-dialog-refactored-container-color: @base; --gm3-dialog-refactored-supporting-text-color: @text; --gm3-dialog-refactored-headline-color: @text; /* Buttons */ [data-mdc-dialog-action="ok"] { background-color: @accent-color; --gm3-button-text-label-text-color: @crust; --gm3-button-text-hover-label-text-color: @crust; --gm3-button-text-pressed-label-text-color: @crust; } [data-mdc-dialog-action="cancel"] { --gm3-button-text-label-text-color: @subtext1; --gm3-button-text-hover-label-text-color: @text; --gm3-button-text-focus-label-text-color: @text; --gm3-button-text-pressed-label-text-color: @text; &:hover, &:focus, &:active { background-color: @surface0; } } } } } /* prettier-ignore */ @catppuccin: { @latte: { @rosewater: #dc8a78; @flamingo: #dd7878; @pink: #ea76cb; @mauve: #8839ef; @red: #d20f39; @maroon: #e64553; @peach: #fe640b; @yellow: #df8e1d; @yellow_filter: brightness(0) saturate(100%) invert(84%) sepia(47%) saturate(5389%) hue-rotate(348deg) brightness(92%) contrast(90%);; @green: #40a02b; @teal: #179299; @sky: #04a5e5; @sapphire: #209fb5; @blue: #1e66f5; @lavender: #7287fd; @text: #4c4f69; @text_filter: brightness(0) saturate(100%) invert(31%) sepia(12%) saturate(1015%) hue-rotate(196deg) brightness(94%) contrast(91%); @subtext1: #5c5f77; @subtext0: #6c6f85; @overlay2: #7c7f93; @overlay1: #8c8fa1; @overlay0: #9ca0b0; @surface2: #acb0be; @surface1: #bcc0cc; @surface0: #ccd0da; @base: #eff1f5; @mantle: #e6e9ef; @crust: #dce0e8; @crust_filter: brightness(0) saturate(100%) invert(96%) sepia(3%) saturate(583%) hue-rotate(187deg) brightness(92%) contrast(97%); }; @frappe: { @rosewater: #f2d5cf; @flamingo: #eebebe; @pink: #f4b8e4; @mauve: #ca9ee6; @red: #e78284; @maroon: #ea999c; @peach: #ef9f76; @yellow: #e5c890; @yellow_filter: brightness(0) saturate(100%) invert(79%) sepia(20%) saturate(586%) hue-rotate(1deg) brightness(103%) contrast(84%); @green: #a6d189; @teal: #81c8be; @sky: #99d1db; @sapphire: #85c1dc; @blue: #8caaee; @lavender: #babbf1; @text: #c6d0f5; @text_filter: brightness(0) saturate(100%) invert(80%) sepia(11%) saturate(726%) hue-rotate(192deg) brightness(104%) contrast(92%); @subtext1: #b5bfe2; @subtext0: #a5adce; @overlay2: #949cbb; @overlay1: #838ba7; @overlay0: #737994; @surface2: #626880; @surface1: #51576d; @surface0: #414559; @base: #303446; @mantle: #292c3c; @crust: #232634; @crust_filter: brightness(0) saturate(100%) invert(11%) sepia(6%) saturate(3257%) hue-rotate(192deg) brightness(93%) contrast(88%); }; @macchiato: { @rosewater: #f4dbd6; @flamingo: #f0c6c6; @pink: #f5bde6; @mauve: #c6a0f6; @red: #ed8796; @maroon: #ee99a0; @peach: #f5a97f; @yellow: #eed49f; @yellow_filter: brightness(0) saturate(100%) invert(87%) sepia(24%) saturate(488%) hue-rotate(350deg) brightness(97%) contrast(93%); @green: #a6da95; @teal: #8bd5ca; @sky: #91d7e3; @sapphire: #7dc4e4; @blue: #8aadf4; @lavender: #b7bdf8; @text: #cad3f5; @text_filter: brightness(0) saturate(100%) invert(84%) sepia(5%) saturate(1385%) hue-rotate(192deg) brightness(101%) contrast(92%); @subtext1: #b8c0e0; @subtext0: #a5adcb; @overlay2: #939ab7; @overlay1: #8087a2; @overlay0: #6e738d; @surface2: #5b6078; @surface1: #494d64; @surface0: #363a4f; @base: #24273a; @mantle: #1e2030; @crust: #181926; @crust_filter: brightness(0) saturate(100%) invert(9%) sepia(7%) saturate(2560%) hue-rotate(198deg) brightness(95%) contrast(97%); }; @mocha: { @rosewater: #f5e0dc; @flamingo: #f2cdcd; @pink: #f5c2e7; @mauve: #cba6f7; @red: #f38ba8; @maroon: #eba0ac; @peach: #fab387; @yellow: #f9e2af; @yellow_filter: brightness(0) saturate(100%) invert(83%) sepia(35%) saturate(324%) hue-rotate(347deg) brightness(105%) contrast(95%); @green: #a6e3a1; @teal: #94e2d5; @sky: #89dceb; @sapphire: #74c7ec; @blue: #89b4fa; @lavender: #b4befe; @text: #cdd6f4; @text_filter: brightness(0) saturate(100%) invert(87%) sepia(6%) saturate(985%) hue-rotate(191deg) brightness(96%) contrast(99%); @subtext1: #bac2de; @subtext0: #a6adc8; @overlay2: #9399b2; @overlay1: #7f849c; @overlay0: #6c7086; @surface2: #585b70; @surface1: #45475a; @surface0: #313244; @base: #1e1e2e; @mantle: #181825; @crust: #11111b; @crust_filter: brightness(0) saturate(100%) invert(3%) sepia(12%) saturate(3951%) hue-rotate(206deg) brightness(96%) contrast(92%); }; } // vim:ft=less