A custom theme for gmail
Catppuccin gmail by oca159
Imported from https://github.com/catppuccin/userstyles/blob/main/styles/gmail/catppuccin.user.css
Details
Authoroca159
LicenseNo License
Categoryunset
Created
Updated
Size19 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
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 Gmail Catppuccin
@namespace github.com/catppuccin/userstyles/styles/gmail
@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/gmail
@version 0.1.4
@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];
color-scheme: if(@lookup = latte, light, dark);
::selection {
background-color: fade(@accent-color, 30%);
}
input,
textarea {
&::placeholder {
color: @subtext0 !important;
}
}
.ZG,
.boo .aQl > .J-JN-M-I-Jm,
.boo .aaa > .J-JN-M-I-Jm,
.boo .ZE > .J-JN-M-I-Jm,
.bs1 + .bs3,
.btj + .aD,
body {
color: @text !important;
}
/* input box */
.bs0 > .acM,
.bti > .btg {
color: @text !important;
}
/* quick settings */
.IU {
background: @base !important;
box-shadow: inset 1px 0 0 @mantle !important;
}
.Q0,
.VM .Q5,
.VM .OG,
.Q2,
.bCh,
.aIY,
.a21,
.ST,
.OB {
color: @text !important;
}
.Tj,
.OD {
color: @accent-color !important;
}
/* background */
#loading {
background: @base !important;
}
[style="background:#4285f4"] {
background: @blue !important;
}
[style="background:#34a853"] {
background: @green !important;
}
[style="background:#ea4335"] {
background: @red !important;
}
.la-c.la-l {
background: darken(@red, 10%);
}
.la-c.la-r {
background: @yellow;
}
header,
.nH.w-asV,
.bkL,
.bhZ.bym,
.bhZ.bjB,
.bhZ.bym.baA {
background: @crust !important;
}
/* links */
.aRq {
color: @sapphire !important;
&:hover {
color: @teal !important;
}
}
/* header */
.aeH,
.aqK {
background: @mantle !important;
}
/* search */
.gb_Lc .gb_Ee {
background: @surface0 !important;
}
.gb_Lc .gb_3e,
.gb_Ee.gb_Fe .gb_Ze,
.gb_Pc .gb_we {
color: @text !important;
}
.gb_Ee.gb_Fe button svg {
color: @text !important;
opacity: 1;
}
.aRp {
background: @surface0 !important;
}
.gssb_i {
background: @surface1 !important;
color: @text !important;
}
.gssb_e,
.gssb_m {
background: @surface0 !important;
color: @text !important;
}
/* selected unread email */
.x7 {
color: @mantle !important;
background: @accent-color !important;
}
/* checkbox */
.bzn .G-tF .T-Jo {
filter: brightness(0) saturate(100%) invert(28%) sepia(17%) saturate(835%)
hue-rotate(196deg) brightness(150%) contrast(75%);
}
/* keyboard dropdown */
.d-Na-JG-M {
background-color: @surface1 !important;
}
.d-Na-N {
color: @text !important;
}
.d-Na-N-JW {
background-color: fade(@accent-color, 20%) !important;
}
.d-Na-JX-I,
.d-Na-J3,
.d-Na-N.d-Na-KO .d-Na-Jo {
filter: brightness(0) saturate(90%) invert(28%) sepia(17%) saturate(835%)
hue-rotate(196deg) brightness(250%) contrast(75%);
}
.d-Na-axR,
.RK-Jk.RK-Qq-axH {
border-color: @overlay0;
}
/* virtual keyboard */
.RK-H {
background-color: @surface0 !important;
}
.RK-QJ {
color: @text;
}
.RK-Jk {
color: @text !important;
background-image: linear-gradient(to bottom, @surface1, @surface2);
}
/* left bar */
.CL.Q7:hover,
.CL.Wj:hover,
.CL.Q7.NQ,
.CL.Wj.NQ,
.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 {
background: @surface0 !important;
}
.TO.NQ,
.n6 .ah9:hover,
.n6 .ah9.aiu:hover,
.n6 .ah9:focus,
.TK .TO:active,
.n6 .ah9.aiu:active {
background: @surface1 !important;
}
.aAv,
.TO .nU > .n0,
.TO.NQ .nU > .n0,
.TO.nZ .nU > .n0,
.ah9 > .CJ,
.n3 > .CL > .CK {
color: @text !important;
}
.h0,
.Dj {
color: @subtext0 !important;
}
/* right bar */
.bAw .brC-aT5-aOt-Jw {
background: @crust !important;
}
.WR.aeN {
background: @crust !important;
}
.brC-aMv-auO .bse-bvF-I.aT5-aOt-I-JW .aT5-aOt-I-JX-atM-J6,
.brC-aMv-auO .bse-bvF-I.aT5-aOt-I-JO .aT5-aOt-I-JX-atM-J6 {
background: lighten(@crust, 4%);
}
/* inbox area */
.H2.HD {
background: @surface0 !important;
border-color: @surface1 !important;
}
.bkK > .nH {
background: @mantle !important;
}
/* inbox item */
.yO {
background: @mantle !important;
&:hover {
box-shadow:
inset 1px 0 0 @surface0,
inset -1px 0 0 @surface0,
0 0 4px 0 @base,
0 0 6px 2px @base !important;
}
}
/* quick text */
.y2 {
color: @subtext0 !important;
}
.aeJ,
.aRs {
.J-KU:hover {
background: @surface0 !important;
}
background: @base !important;
.aRu {
.aRv {
color: @subtext0 !important;
}
color: @subtext1 !important;
}
}
.aAA.J-KU-Jg-K9 {
background: @base !important;
}
.J-KU-KO.aAy {
.aKz {
color: @accent-color !important;
}
&::before {
background: @accent-color !important;
}
}
.aKx > .aKz {
color: @subtext0 !important;
}
.y6,
.bA4 {
color: @text !important;
}
/* buttons hovers */
.T-I-JW.amD::before,
.T-I-JW.adg::before,
.T-I-JW > .asa::before {
background: @surface0 !important;
}
/* attachements in comfortable mode */
.brg {
color: @text !important;
}
/* date when the message was sent */
.yO > .xW {
color: fade(@text, 50%) !important;
}
.bq3 {
color: @text !important;
}
/* unsub button */
.aJ6 {
color: @text;
}
.aOd.T-I {
box-shadow: inset 0 0 0 1px fade(@text, 50%) !important;
}
/* svgs */
.gb_Pc svg,
.gb_Uc.gb_Zc svg,
.gb_Pc .gb_gd .gb_od,
.gb_Pc .gb_gd .gb_Oc,
.gb_Pc .gb_gd .gb_id,
.gb_Uc.gb_Zc .gb_od {
color: @text !important;
}
/* send one now */
.x0 {
color: @text !important;
}
/* compose window */
.afW {
border-color: @surface1;
}
.afV {
background: @surface2 !important;
box-shadow: 0 0 0 1px @overlay0 inset;
color: @text !important;
}
.akl,
.aoT,
.aYF,
.agP,
.az9,
.gQ {
color: @text;
}
.IZ,
.agP,
.agh,
.gQ,
.afx {
background: @surface0 !important;
}
.oL,
.gO {
color: @subtext0;
}
/* message sent dialog */
.vh {
color: @text !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(
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="17.727 14.319 30 22.5" width="30" height="22.5"><path fill="@{blue}" d="M19.773 36.819h4.773V25.227l-6.819-5.114v14.659a2.044 2.044 0 0 0 2.045 2.045"/><path fill="@{green}" d="M40.909 3...