catppuccin-themes/catppuccin.user.css

/* ==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);
        }
        
    }
}