diff --git a/styles/codeberg/README.md b/styles/codeberg/README.md
index 1356452794..ecdd3575ab 100644
--- a/styles/codeberg/README.md
+++ b/styles/codeberg/README.md
@@ -39,8 +39,11 @@
 
 
 ## 🙋 FAQ
-- Q: How do I change the accent color?  
-	A: Changing `--color-primary` to any other color should change the accent color in most places.
+- Q: How do I change the accent color?
+	A: You can change the Accent color via the option menu, where you also select your Flavor
+- Q: My top-bar looks ugly (tinted in the accent color), how do I change that?
+	A: Please head over to the `Settings` (on Codeberg) and change the theme to `forgejo-auto` or `gitea`
+
 
 ## 💝 Current Maintainer(s)
 - [justTOBBI](https://github.com/justTOBBI)
diff --git a/styles/codeberg/assets/catwalk.webp b/styles/codeberg/assets/catwalk.webp
index 614695c8dd..e5190d7ffe 100644
--- a/styles/codeberg/assets/catwalk.webp
+++ b/styles/codeberg/assets/catwalk.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6467062df3f60f4d23f160afd2b4833b24eaed85a18c90b4d98a9bd2113d35b7
-size 337012
+oid sha256:2b65028faf3cc3f033987944220f1b0a5d25322606ca4cf630b41ffa35c45859
+size 1059076
diff --git a/styles/codeberg/assets/frappe.webp b/styles/codeberg/assets/frappe.webp
index dbdb47ac96..0838233490 100644
--- a/styles/codeberg/assets/frappe.webp
+++ b/styles/codeberg/assets/frappe.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c7828deebd7221eb22bfdd1ee917197bd8599dc63b54226318d51b05987abb96
-size 54298
+oid sha256:52a257027e5463468302323776a128a348adb2ded6b478c3b430ab67ba73de28
+size 305790
diff --git a/styles/codeberg/assets/latte.webp b/styles/codeberg/assets/latte.webp
index e9aff054de..8f5a156304 100644
--- a/styles/codeberg/assets/latte.webp
+++ b/styles/codeberg/assets/latte.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b568011cce9cef6e8dbd76bce8b4df95dc551a06e9508416bcfc34f8be9aece8
-size 61172
+oid sha256:e61c1eac26c9d36fb041291d83284e8e67332c4137e925ff536ef16899e4f6ee
+size 282676
diff --git a/styles/codeberg/assets/macchiato.webp b/styles/codeberg/assets/macchiato.webp
index 1465b51f66..34c6e007d0 100644
--- a/styles/codeberg/assets/macchiato.webp
+++ b/styles/codeberg/assets/macchiato.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5c6d4b3926a1dda5dc447161c160798ef3ff0e8f5199f5753f090922893e1669
-size 56784
+oid sha256:3b6996d49a14c073702d68446ee2afdda998d80555cdef028a01341f924f3f93
+size 312722
diff --git a/styles/codeberg/assets/mocha.webp b/styles/codeberg/assets/mocha.webp
index c1c9a870e5..0f4ab5c4cd 100644
--- a/styles/codeberg/assets/mocha.webp
+++ b/styles/codeberg/assets/mocha.webp
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4bc1bba8c77f313fd27d554aa05877a8b6ca1f6bb275ddb5b6fc9469a4ed28f3
-size 59224
+oid sha256:c9fb6d64cd05fc4d89ec734aa6a9d428b16239d06cf505b724571ee1a56cbeca
+size 314520
diff --git a/styles/codeberg/catppuccin.user.css b/styles/codeberg/catppuccin.user.css
index a3f72c60da..4f3f919953 100644
--- a/styles/codeberg/catppuccin.user.css
+++ b/styles/codeberg/catppuccin.user.css
@@ -1,531 +1,209 @@
 /* ==UserStyle==
-@name           Catppuccin Codeberg
-@namespace      github.com/catppuccin/userstyles/styles/codeberg
-@homepageURL 	https://github.com/catppuccin/userstyles/tree/main/styles/codeberg
-@version        1.0.2
-@description    Soothing pastel theme for Codeberg
-@author         Catppuccin
-@updateURL      https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.css
-@license		MIT
+@name Codeberg Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/codeberg
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/codeberg
+@version 1.0.0
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/codeberg/catppuccin.user.css
+@description Soothing pastel theme for Codeberg
+@author Catppuccin
+@license MIT
 
-@preprocessor   stylus
-@var select flavor "Flavor" ["Latte", "Frappe", "Macchiato", "Mocha*"]
-@var checkbox navbar-color "Use dark navbar-color" 0
+@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("codeberg.org") {
-    if (flavor=="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 (flavor=="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 (flavor=="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 (flavor=="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;
-        
-    }
-  
-    div#navbar.ui.container {
-        background-color: $blue !important;
-        color: $base !important;
-    }
-    
-    if navbar-color {
-        div#navbar.ui.container {
-            background-color: $mantle !important;
-            color: $text !important;
+/* If you need any help with the information above, please see: https://github.com/openstyles/stylus/wiki/Writing-UserCSS#var */
+/* Apply Theme To Site
+ * For help with URL rules, please see https://github.com/openstyles/stylus/wiki/Writing-styles#valid--moz-document-rules */
+ @-moz-document domain('codeberg.org') {
+    @catppuccin: {
+        @latte: {
+            @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;
         }
-    }
 
-    th,
-    textarea,
-    h4.ui.top.attached.error.header,
-    div.ui.red.message,
-    div.ui.segment.sub-menu.repository-menu,
-    nav.navbar,
-    div.sidebar,
-    div.sidebar-menu,
-    div.card,
-    div.menu.left.transition.visible,
-    div.menu.user-menu.left.transition.visible,
-    a.item.active
-    input,
-    div.ui.dropdown.icon.button,
-    div.ui.borderless.pagination.menu.narrow,
-    span.name,
-    blockquote.alert {
-        background-color: $mantle !important;
-        color: $text !important;
-        transition: 0.5s;
-    }
-    
-    div.extra.content.word-break,
-    td.name,
-    td.message,
-    td.text {
-        border-color: $surface1 !important;
-    }
-    
-    div.ui.top.attached.header.clearing.segment.pr.commit-header,
-    footer,
-    h1,
-    h3,
-    h4 {
-        background-color: $mantle !important;
-    }
-    
-    div.ui.compact.tiny.menu,
-    div.ui.secondary.pointing.tabular.top.attached.borderless.menu.stackable.new-menu.navbar,
-    div.ui.attached.segment,
-    div.ui.borderless.pagination.menu,
-    div.ui.two.item.tabable.menu,
-    div.ui.secondary.tiny.pointing.borderless.menu.center.grid.repos-filter,
-    div.header-wrapper,
-    div.ui.attached.segment.df.ac.sb.py-2.commit-header-row.fw,
-    div.file-view.markup.markdown,
-    div.ui.attached.segment.repos-search,
-    div.ui.attached.table.segment.rounded-bottom {
-        background-color: $base !important;
-    }
-    
-    span.ui.grey.label.ml-3,
-    div.ui.circular.mini.grey.label,
-    div.divider,
-    button.btn.btn-primary,
-    div.ui.language.bottom.floating.slide.up.dropdown.link.item.button {
-        background-color: $surface0 !important;
-    }
-    
-    tr {
-        background-color: $base !important;
-    }
-    
-    .blob-excerpt.lines-code {
-        background-color: $mantle !important;
-    }
-    .chroma.lines-code {
-        background-color: transparent !important;
-    }
-    .add-code {
-        background-color: alpha($green, 0.1) !important;
-    }
-    .added-code {
-        background-color: alpha($green, 0.15) !important;
-        color: $text !important;
-    }
-    .del-code {
-        background-color: alpha($red, 0.1) !important;
-    }
-    .removed-code {
-        background-color: alpha($red, 0.15) !important;
-        color: $text !important;
-    }
-    code.code-inner {
-        color: $overlay1 !important;
-    }
-    tr.tag-code.nl-0.ol-0, td.lines-num, td.lines-type-marker {
-        background-color: alpha($blue, 0.1) !important;
-    }
-    
-    kbd,
-    code {
-        background-color: transparent !important;
-        color: $text !important;
-    }
-    
-    span.c1 {
-        color: $overlay1 !important;
-    }
-    span.s1 {
-        color: $peach !important;
-    }
-    span.token.string,
-    span.s2 {
-        color: $green !important;
-    }
-    span.n {
-        color: $text !important;
-    }
-    span.o,
-    span.kc,
-    span.kd,
-    span.kr {
-        color: $red !important;
-    }
-    span.nf {
-        color: $blue !important;
-    }
-    span.token.function,
-    span.mi {
-        color: $teal !important;
-    }
-        
-    nav.navbar {
-        border: none !important;
-    }
-    
-    pre {
-        background-color: $mantle !important;
-        border-color: $blue !important;
-    }
-    
-    a.ui.primary.sha.label,
-    span.ui.primary.sha.label {
-        background-color: $mantle !important;
-    }
-    
-    h1,
-    a,
-    a.header-anchor,
-    a.item {
-        background-color: transparent !important;
-        color: $blue !important;
-        transition: 0.5s;
-    }
-    
-    a:hover,
-    a.item:hover,
-    span.name:hover {
-        background-color: transparent !important;
-        color: $green !important;
-        transition: 0.5s;
-    }
-        
-    .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;
+        @frappe: {
+            @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;
         }
-        
-        .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);
+
+        @macchiato: {
+            @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;
         }
-        
-        .chroma .si {
-            color: rgba($peach, 0.6);
+
+        @mocha: {
+            @rosewater: #f5e0dc;
+            @flamingo: #f2cdcd;
+            @pink: #f5c2e7;
+            @mauve: #cba6f7;
+            @red: #f38ba8;
+            @maroon: #eba0ac;
+            @peach: #fab387;
+            @yellow: #f9e2af;
+            @green: #a6e3a1;
+            @teal: #94e2d5;
+            @sky: #89dceb;
+            @sapphire: #74c7ec;
+            @blue: #89b4fa;
+            @lavender: #b4befe;
+            @text: #cdd6f4;
+            @subtext1: #bac2de;
+            @subtext0: #a6adc8;
+            @overlay2: #9399b2;
+            @overlay1: #7f849c;
+            @overlay0: #6c7086;
+            @surface2: #585b70;
+            @surface1: #45475a;
+            @surface0: #313244;
+            @base: #1e1e2e;
+            @mantle: #181825;
+            @crust: #11111b;
         }
-        
-        .chroma .nv {
-            color: rgba($peach, 0.6);
+    }
+
+    #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];
+        @accentColor: @catppuccin[@@lookup][@@accent];
+        @linkColor: @accentColor;
+        @linkHover: if(@lookup =latte, darken(@accentColor, 5%), lighten(@accentColor, 5%));
+        /*  Regular Colors are called with a single `@` as they
+    *  are just referencing the Variable directly. */
+        background-color: @catppuccin[@@lookup][@base];
+        /*  The Accent Color is called with a double `@@` because
+    *  it's referencing the @accent Variable passed to the Mixin. */
+        color: @catppuccin[@@lookup][@@accent];
+
+        /*  If you need to specify an overwrite specific to a Flavor
+    *  like Latte, you can use a `when` guard clause. */
+        & when (@lookup =latte) {
+            /* your code for latte */
         }
-        
-        .chroma .nx {
-            color: $text;
+
+        /*  You can also negate the statement above by using
+    *  a `when not` guard clause. */
+        & when not (@lookup =latte) {
+            /* your code for frappe, macchiato and mocha */
         }
-        
-        .chroma .nf {
-            color: $yellow;
+
+        body {
+            background: @catppuccin[@@lookup][@base] !important;
         }
-        
-        .chroma .s {
-            color: rgba($teal, 0.7);
+
+        :root {
+            --color-footer: @surface1;
+            --color-footer-text: @subtext1;
         }
-        
     }
-}
+
+    @import (css) url("https://git.winston.sh/assets/css/theme-catppuccin-@{lightFlavor}-@{accentColor}.css") (prefers-color-scheme: light);
+    @import (css) url("https://git.winston.sh/assets/css/theme-catppuccin-@{darkFlavor}-@{accentColor}.css") (prefers-color-scheme: dark);
+
+    @media(prefers-color-scheme: light) {
+        #catppuccin(@lightFlavor,
+        @accentColor);
+    }
+
+    @media(prefers-color-scheme: dark) {
+        #catppuccin(@darkFlavor,
+        @accentColor);
+    }
+}
\ No newline at end of file
diff --git a/styles/hoppscotch/catppuccin.user.css b/styles/hoppscotch/catppuccin.user.css
index 8b5f1e0cdf..80d05f6daf 100644
--- a/styles/hoppscotch/catppuccin.user.css
+++ b/styles/hoppscotch/catppuccin.user.css
@@ -14,6 +14,7 @@
 @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("hoppscotch.io") {
+
   @catppuccin: {
     @latte: {
       @rosewater: #dc8a78;
@@ -42,7 +43,8 @@
       @base: #eff1f5;
       @mantle: #e6e9ef;
       @crust: #dce0e8;
-    };
+    }
+
     @frappe: {
       @rosewater: #f2d5cf;
       @flamingo: #eebebe;
@@ -70,7 +72,8 @@
       @base: #303446;
       @mantle: #292c3c;
       @crust: #232634;
-    };
+    }
+
     @macchiato: {
       @rosewater: #f4dbd6;
       @flamingo: #f0c6c6;
@@ -98,7 +101,7 @@
       @base: #24273a;
       @mantle: #1e2030;
       @crust: #181926;
-    };
+    }
     @mocha: {
       @rosewater: #f5e0dc;
       @flamingo: #f2cdcd;
@@ -126,8 +129,9 @@
       @base: #1e1e2e;
       @mantle: #181825;
       @crust: #11111b;
-    };
-  };
+    }
+  }
+
 
   :root.dark {
     #catppuccin(@darkFlavor, @accentColor);
@@ -165,13 +169,12 @@
     @mantle: @catppuccin[@@lookup][@mantle];
     @crust: @catppuccin[@@lookup][@crust];
     @accent: @catppuccin[@@lookup][@@accent-color];
-
     @accent-light-alpha: 1.1;
     @accent-dark-alpha: 0.9;
     @accent-gradient-from-color: 1.05;
     @accent-gradient-via-color: 1.2;
     @accent-gradient-to-color: 0.85;
-
+    
     & {
       --primary-color: @base;
       --primary-light-color: @surface1;
@@ -198,7 +201,6 @@
       --editor-process-color: fade(@pink, 1.4);
       --editor-constant-color: fade(@lavender, 1.2);
       --editor-keyword-color: @red;
-
       --accent-color: @accent;
       --accent-light-color: fade(@accent, @accent-light-alpha);
       --accent-dark-color: fade(@accent, @accent-dark-alpha);