Something went wrong. Try again.
🧵 Soothing pastel theme for Tangled! (WIP)
Something went wrong. Try again.
tangled-catppuccin tangled.user.less
6.1 kB · 270 lines
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271/* ==UserStyle==@name tangled.org Catppuccin@description A Catppuccin theme for Tangled, the Atmosphere social coding platform.@namespace csw.im@version 1.0.0-dev@author csw.im <cswimr@csw.im> (https://tangled.org/csw.im)@homepageURL https://tangled.org/csw.im/tangled-catppuccin@supportURL https://tangled.org/csw.im/tangled-catppuccin/issues@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"]@var checkbox systemFont "Use System Font" 0==/UserStyle== */
@import "https://userstyles.catppuccin.com/lib/lib.less";
@-moz-document domain("tangled.org") { :root { @media (prefers-color-scheme: light) { #catppuccin(@lightFlavor); } @media (prefers-color-scheme: dark) { #catppuccin(@darkFlavor); } #overrideFont(); }
#overrideFont() when (@systemFont = 1) { font-family: system-ui; .font-mono { font-family: monospace, system-ui; } code { font-family: monospace, system-ui; } }
#catppuccin(@flavor) { #lib.palette(); #lib.defaults();
::selection { background-color: fade(@accent, 30%); }
.dark\:bg-gray-900 { background-color: @base; }
.dark\:bg-gray-800 { background-color: @mantle; }
.dark\:text-red-400 { color: @red; }
.dark\:bg-gray-700 { background-color: @crust; }
:is(a, h1, .prose, strong, .dark\:text-white) { color: @text; }
a:hover { color: @subtext0; }
:is(h2, h3, h4, h5, h6, .dark\:text-gray-400) { color: @subtext1; }
// signed commits .dark\:bg-green-900 { background-color: @base; border-width: 1px; border-color: @green; /* border-radius: 2px; */ }
.dark\:bg-green-700 { background-color: @green; color: @mantle; }
.dark\:bg-green-800 { background-color: @base; }
.dark\:text-green-400 { color: @green; }
.dark\:bg-purple-700 { background-color: @mauve; }
// start: ci status icons // success .dark\:text-green-500 { color: @green; } .dark\:stroke-green-500 { stroke: @green; } // in-progress .dark\:stroke-yellow-500 { stroke: @yellow; } // timeout .text-orange-500 { color: @peach; } // failed .dark\:text-red-500 { color: @red; } .dark\:stroke-red-500 { stroke: @red; } // end: ci status icons
// start: diff view // 50% was a little too hard to see imo .dark\:bg-red-800\/50 { background-color: fade(@red, 40%); } .dark\:bg-green-800\/50 { background-color: fade(@green, 40%); }
.dark\:bg-red-800\/30 { background-color: fade(@red, 15%); } .dark\:bg-green-800\/30 { background-color: fade(@green, 15%); } // end: diff view
:is(select, input, textarea, .btn, .btn-group-item.active) { color: @text; background-color: @base; border-color: @crust; }
input::placeholder { color: @accent; }
.btn-group-item { color: @text; background-color: @mantle; border-color: @crust; }
.btn-create { color: @mantle; background-color: @accent; border-color: @accent; }
// links, both bare and masked .prose :where(a):not(:where([class~="not-prose"], [class~="not-prose"] *)) { color: @accent; }
// checkboxes input[type="checkbox"] { background-color: @surface0 !important; } input[type="checkbox"]:checked { background-color: @overlay0 !important; }
// blockquotes .prose :where(blockquote):not( :where([class~="not-prose"], [class~="not-prose"] *) ) { color: @subtext1; border-inline-start-color: @surface0; }
// start: alerts details[data-callout="note" i] { border-color: @blue; > summary { color: @blue; } } details[data-callout="tip" i] { border-color: @green; > summary { color: @green; } } details[data-callout="important" i] { border-color: @mauve; > summary { color: @mauve; } } details[data-callout="warning" i] { border-color: @yellow; > summary { color: @yellow; } } details[data-callout="caution" i] { border-color: @red; > summary { color: @red; } } // end: alerts
// inline code / background color for text within codeblocks // make sure background-color here is the same as the below .prose selector's background-color, // or the code text will have a different background color than the fenced codeblocks code { color: @text; background-color: @crust; }
// fenced codeblocks with no syntax highlighting set .prose :where(pre):not(:where([class~="not-prose"], [class~="not-prose"] *)) { background-color: @crust; }
// start: syntax highlighting .chroma { color: @text; background-color: @crust; } :is(.c, .c1, .cm) { color: fade(@mauve, 55%); font-style: italic; } :is(.k, .kc, .kd, .kn, .kp, .kr, .nb) { color: @mauve; } :is(.s, .s1, .s2) { color: @green; } :is(.nv, .nf, .nx) { color: @blue; } :is(.o, .p) { color: @text; } :is(.cl, .n, .err) { color: @peach; } .no { color: @yellow; } .kt { color: @red; } // line selections .hl { background-color: fade(@surface0, 40%); } // end: syntax highlighting }}