/* ==UserStyle== @name Catppuccin Codeberg @namespace github.com/catppuccin/codeberg @version 1.0.0 @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 = #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 } else if (theme=="Frappe") { $type = dark $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 } else if (theme=="Macchiato") { $type = dark $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 } else if (theme=="Mocha") { $type = dark $rosewater = #f5e0dc $flamingo = #f2cdcd $pink = #f5c2e7 $mauve = #cba6f7 $red = #f38ba8 $maroon = #eba0ac $peach = #fab387 $yellow = #f9e2af $green = #a6e3a1 $teal = #94e2d5 $sky = #89dceb $sapphire = #74c7ec $lavender = #b4befe $blue = #89b4fa $text = #cdd6f4 $subtext1 = #bac2de $subtext0 = #a6adc8 $overlay2 = #9399b2 $overlay1 = #7f849c $overlay0 = #6c7086 $surface2 = #585b70 $surface1 = #45475a $surface0 = #313244 $base = #1e1e2e $mantle = #181825 $crust = #11111b } :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); } } }