/* ==UserStyle== @name Catppuccin Codeberg @namespace github.com/catppuccin/codeberg @version 1.0.1 @description Soothing pastel theme for Codeberg @author Catppuccin @updateURL https://github.com/catppuccin/codeberg/raw/main/catppuccin.user.css @preprocessor stylus @var select theme "Theme" ["Latte", "Frappe", "Macchiato", "Mocha*"] ==/UserStyle== */ @-moz-document domain("codeberg.org") { if (theme=="Latte") { $type = light $rosewater = hsl(10.8, 58.8%, 66.7%) $flamingo = hsl(0, 59.8%, 66.9%) $pink = hsl(316, 73.4%, 69%) $mauve = hsl(266, 85%, 58%) $red = hsl(347.1, 86.7%, 44.1%) $maroon = hsl(354.8, 76.3%, 58.6%) $peach = hsl(22, 99.2%, 52%) $yellow = hsl(34.9, 77%, 49.4%) $green = hsl(109.2, 57.6%, 39.8%) $teal = hsl(183.2, 73.9%, 34.5%) $sky = hsl(197.1, 96.6%, 45.7%) $sapphire = hsl(188.9, 70%, 41.8%) $blue = hsl(219.9, 91.5%, 53.9%) $lavender = hsl(230.9, 97.2%, 72%) $text = hsl(233.8, 16%, 35.5%) $subtext1 = hsl(233.3, 12.8%, 41.4%) $subtext0 = hsl(232.8, 10.4%, 47.3%) $overlay2 = hsl(232.2, 9.6%, 53.1%) $overlay1 = hsl(231.4, 10%, 59%) $overlay0 = hsl(228, 11.2%, 65.1%) $surface2 = hsl(226.7, 12.2%, 71%) $surface1 = hsl(225, 13.6%, 76.9%) $surface0 = hsl(222.9, 15.9%, 82.7%) $base = hsl(220, 23.1%, 94.9%) $mantle = hsl(220, 22%, 92%) $crust = hsl(220, 20.7%, 88.6%) } else if (theme=="Frappe") { $type = dark $rosewater = hsl(10.3, 57.4%, 88%) $flamingo = hsl(0, 58.5%, 83.9%) $pink = hsl(316, 73.2%, 83.9%) $mauve = hsl(276.7, 59%, 76.1%) $red = hsl(358.8, 67.8%, 70.8%) $maroon = hsl(357.8, 65.9%, 75.9%) $peach = hsl(20.3, 79.1%, 70%) $yellow = hsl(39.5, 62%, 73.1%) $green = hsl(95.8, 43.9%, 67.8%) $teal = hsl(171.5, 39.2%, 64.5%) $sky = hsl(189.1, 47.8%, 72.9%) $sapphire = hsl(198.6, 55.4%, 69.2%) $blue = hsl(221.6, 74.2%, 74.1%) $lavender = hsl(238.9, 66.3%, 83.7%) $text = hsl(227.2, 70.1%, 86.9%) $subtext1 = hsl(226.7, 43.7%, 79.8%) $subtext0 = hsl(228.3, 29.5%, 72.7%) $overlay2 = hsl(227.7, 22.3%, 65.7%) $overlay1 = hsl(226.7, 17%, 58.4%) $overlay0 = hsl(229.1, 13.4%, 51.6%) $surface2 = hsl(228, 13.3%, 44.3%) $surface1 = hsl(227.1, 14.7%, 37.3%) $surface0 = hsl(230, 15.6%, 30.2%) $base = hsl(229.1, 18.6%, 23.1%) $mantle = hsl(230.5, 18.8%, 19.8%) $crust = hsl(229.4, 19.5%, 17.1%) } else if (theme=="Macchiato") { $type = dark $rosewater = hsl(10, 57.7%, 89.8%) $flamingo = hsl(0, 58.3%, 85.9%) $pink = hsl(316.1, 73.7%, 85.1%) $mauve = hsl(266.5, 82.7%, 79.6%) $red = hsl(351.2, 73.9%, 72.9%) $maroon = hsl(355.1, 71.4%, 76.7%) $peach = hsl(21.4, 85.5%, 72.9%) $yellow = hsl(40.3, 69.9%, 77.8%) $green = hsl(105.2, 48.3%, 72%) $teal = hsl(171.1, 46.8%, 69%) $sky = hsl(188.8, 59.4%, 72.9%) $sapphire = hsl(198.6, 65.6%, 69.2%) $blue = hsl(220.2, 82.8%, 74.9%) $lavender = hsl(234.5, 82.3%, 84.5%) $text = hsl(227.4, 68.3%, 87.6%) $subtext1 = hsl(228, 39.2%, 80%) $subtext0 = hsl(227.4, 26.8%, 72.2%) $overlay2 = hsl(228.3, 20%, 64.7%) $overlay1 = hsl(227.6, 15.5%, 56.9%) $overlay0 = hsl(230.3, 12.4%, 49.2%) $surface2 = hsl(229.7, 13.7%, 41.4%) $surface1 = hsl(231.1, 15.6%, 33.9%) $surface0 = hsl(230.4, 18.8%, 26.1%) $base = hsl(231.8, 23.4%, 18.4%) $mantle = hsl(233.3, 23.1%, 15.3%) $crust = hsl(235.7, 22.6%, 12.2%) } else if (theme=="Mocha") { $type = dark $rosewater = hsl(9.6, 55.6%, 91.2%) $flamingo = hsl(0, 58.7%, 87.6%) $pink = hsl(316.5, 71.8%, 86.1%) $mauve = hsl(267.4, 83.5%, 81%) $red = hsl(343.3, 81.2%, 74.9%) $maroon = hsl(350.4, 65.2%, 77.5%) $peach = hsl(23, 92%, 75.5%) $yellow = hsl(41.4, 86%, 83.1%) $green = hsl(115.5, 54.1%, 76.1%) $teal = hsl(170, 57.4%, 73.3%) $sky = hsl(189.2, 71%, 72.9%) $sapphire = hsl(198.5, 75.9%, 69%) $lavender = hsl(231.9, 97.4%, 85.1%) $blue = hsl(217.2, 91.9%, 75.9%) $text = hsl(226.2, 63.9%, 88%) $subtext1 = hsl(226.7, 35.3%, 80%) $subtext0 = hsl(227.6, 23.6%, 71.8%) $overlay2 = hsl(228.4, 16.8%, 63.7%) $overlay1 = hsl(229.7, 12.8%, 55.5%) $overlay0 = hsl(230.8, 10.7%, 47.5%) $surface2 = hsl(232.5, 12%, 39.2%) $surface1 = hsl(234.3, 13.2%, 31.2%) $surface0 = hsl(236.8, 16.2%, 22.9%) $base = hsl(240, 21.1%, 14.9%) $mantle = hsl(240, 21.3%, 12%) $crust = hsl(240, 22.7%, 8.6%) } :root { --color-body: $base; --color-text: $text; --color-text-light: $subtext0; --color-text-light-2: $subtext1; --color-text-light-3: $subtext1; --color-text-dark: $subtext0; --color-text-dark-2: $subtext1; --color-text-dark-3: $subtext1; --color-secondary: $surface1; --color-caret: $text; --color-navbar: $surface0; --color-footer: $surface0; --color-red: $red; --color-orange: $peach; --color-yellow: $yellow; --color-olive: $green; --color-green: $green; --color-teal: $teal; --color-blue: $blue; --color-violet: $mauve; --color-purple: $mauve; --color-grey: $overlay0; --color-gold: $yellow; --color-red-light: $red; --color-orange-light: $peach; --color-yellow-light: $yellow; --color-olive-light: $green; --color-green-light: $green; --color-teal-light: $teal; --color-blue-light: $blue; --color-violet-light: $mauve; --color-purple-light: $mauve; --color-grey-light: $overlay2; --color-gold-light: $yellow; --color-black: $crust; --color-white: $text; --color-primary: $blue; --color-console-fg: $text; --color-console-bg: $base; --color-error-border: $maroon; --color-error-bg: $overlay0; --color-error-text: $subtext1; --color-success-border: $green; --color-success-bg: $overlay0; --color-success-text: $subtext1; --color-warning-border: $orange; --color-warning-bg: $overlay1; --color-warning-text: $subtext1; --color-info-border: $overlay0; --color-info-bg: $surface0; --color-info-text: $subtext1; --color-box-header: $surface1; --color-box-body: $surface0; --color-markup-code-block: $surface2; --color-input-background: $base; --color-input-border: $surface1; --color-input-text: $text; --color-card: $surface0; --color-active: $surface0; --color-menu: $surface1; --color-button: $overlay0; --color-light-border: $surface1; --color-dark-border: $overlay0; --color-diff-removed-row-bg: rgba($red, 0.2)!important; --color-diff-removed-row-border: rgba($red, 0.2)!important; --color-diff-removed-word-bg: rgba($red, 0.4)!important; --color-diff-added-row-bg: rgba($green, 0.2)!important; --color-diff-added-row-border: rgba($green, 0.2)!important; --color-diff-added-word-bg: rgba($green, 0.4)!important; --color-diff-inactive: $surface1; --color-code-bg: $surface0; --color-expand-button: $surface1; } body { background-color: $base; color: $text; } .ui.table { color: $text; } .repository-summary { background-color: $surface0; } .ui.green.button { background-color: $green; color: $base; } .ui.red.button { background-color: $red; color: $base; border-color: $overlay0; } .ui.basic.red.button { color: $red; } .ui.negative.button { background-color: $red; color: $base; } .ui.basic.green.button { color: $green; } .ui.breadcrumb { color: $text; } .following.bar #navbar { background-color: $blue!important; } #navbar .item { color: $surface0; } * { caret-color: $text; } @media (prefers-color-scheme: dark) { .ui.red.label, .ui.red.labels .label { background-color: $red!important; border-color: $red!important; color: $base!important; } .ui.green.label, .ui.green.labels, .ui.basic.green.label { background-color: $green!important; border-color: $green!important; color: $base!important; } .repository.file.list #repo-files-table tr { background-color: $base; } .repository.file.list #repo-files-table tr:hover { background-color: $surface1!important; } .ui.horizontal.segments>.segment { background-color: $surface0; } .tag-code td.lines-type-marker, td.blob-hunk { color: $text!important; } .tag-code, .tag-code td { background: $surface1!important; } .tag-code td.lines-num { background-color: $surface1!important; } .chroma .sb { color: $subtext1; } .chroma .nt { color: rgba($mauve, 0.7)!important; } .chroma .na { color: rgba($teal, 0.7)!important; } .chroma .nb { color: rgba($mauve, 0.7); } .chroma .s2 { color: rgba($teal, 0.7); } .chroma .si { color: rgba($peach, 0.6); } .chroma .nv { color: rgba($peach, 0.6); } .chroma .nx { color: $text; } .chroma .nf { color: $yellow; } .chroma .s { color: rgba($teal, 0.7); } } }