From b36749a52e07d260719e2d345b15aa3bddc989f7 Mon Sep 17 00:00:00 2001
From: Lea <me@janderedev.xyz>
Date: Fri, 25 Nov 2022 14:29:20 +0100
Subject: [PATCH] convert themes to proper CSS and fix styling

---
 catppuccin.user.css            | 365 ---------------------------------
 theme-catppuccin-frappe.css    | 234 +++++++++++++++++++++
 theme-catppuccin-light.css     | 232 +++++++++++++++++++++
 theme-catppuccin-macchiato.css | 234 +++++++++++++++++++++
 theme-catppuccin-mocha.css     | 234 +++++++++++++++++++++
 5 files changed, 934 insertions(+), 365 deletions(-)
 delete mode 100644 catppuccin.user.css
 create mode 100644 theme-catppuccin-frappe.css
 create mode 100644 theme-catppuccin-light.css
 create mode 100644 theme-catppuccin-macchiato.css
 create mode 100644 theme-catppuccin-mocha.css

diff --git a/catppuccin.user.css b/catppuccin.user.css
deleted file mode 100644
index c1fd915..0000000
--- a/catppuccin.user.css
+++ /dev/null
@@ -1,365 +0,0 @@
-/* ==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);
-        }
-        
-    }
-}
-
diff --git a/theme-catppuccin-frappe.css b/theme-catppuccin-frappe.css
new file mode 100644
index 0000000..c45b3e3
--- /dev/null
+++ b/theme-catppuccin-frappe.css
@@ -0,0 +1,234 @@
+:root {
+    --is-dark-theme: true;
+
+   --color-body: hsl(229.1, 18.6%, 23.1%);
+   --color-text: hsl(227.2, 70.1%, 86.9%);
+   --color-text-light: hsl(228.3, 29.5%, 72.7%);
+   --color-text-light-2: hsl(226.7, 43.7%, 79.8%);
+   --color-text-light-3: hsl(226.7, 43.7%, 79.8%);
+   --color-text-dark: hsl(228.3, 29.5%, 72.7%);
+   --color-text-dark-2: hsl(226.7, 43.7%, 79.8%);
+   --color-text-dark-3: hsl(226.7, 43.7%, 79.8%);
+   --color-secondary: hsl(227.1, 14.7%, 37.3%);
+   --color-caret: hsl(227.2, 70.1%, 86.9%);
+   --color-navbar: hsl(230, 15.6%, 30.2%);
+   --color-footer: hsl(230, 15.6%, 30.2%);
+   
+   --color-red: hsl(358.8, 67.8%, 70.8%);
+   --color-orange: hsl(20.3, 79.1%, 70%);
+   --color-yellow: hsl(39.5, 62%, 73.1%);
+   --color-olive: hsl(95.8, 43.9%, 67.8%);
+   --color-green: hsl(95.8, 43.9%, 67.8%);
+   --color-teal: hsl(171.5, 39.2%, 64.5%);
+   --color-blue: hsl(221.6, 74.2%, 74.1%);
+   --color-violet: hsl(276.7, 59%, 76.1%);
+   --color-purple: hsl(276.7, 59%, 76.1%);
+   --color-grey: hsl(229.1, 13.4%, 51.6%);
+   --color-gold: hsl(39.5, 62%, 73.1%);
+   --color-red-light: hsl(358.8, 67.8%, 70.8%);
+   --color-orange-light: hsl(20.3, 79.1%, 70%);
+   --color-yellow-light: hsl(39.5, 62%, 73.1%);
+   --color-olive-light: hsl(95.8, 43.9%, 67.8%);
+   --color-green-light: hsl(95.8, 43.9%, 67.8%);
+   --color-teal-light: hsl(171.5, 39.2%, 64.5%);
+   --color-blue-light: hsl(221.6, 74.2%, 74.1%);
+   --color-violet-light: hsl(276.7, 59%, 76.1%);
+   --color-purple-light: hsl(276.7, 59%, 76.1%);
+   --color-grey-light: hsl(227.7, 22.3%, 65.7%);
+   --color-gold-light: hsl(39.5, 62%, 73.1%);
+   --color-black: hsl(229.4, 19.5%, 17.1%);
+   --color-white: hsl(227.2, 70.1%, 86.9%);
+   
+   --color-primary: hsl(221.6, 74.2%, 74.1%);
+   
+   --color-console-fg: hsl(227.2, 70.1%, 86.9%);
+   --color-console-bg: hsl(229.1, 18.6%, 23.1%);
+   
+   --color-error-border: hsl(357.8, 65.9%, 75.9%);
+   --color-error-bg: hsl(229.1, 13.4%, 51.6%);
+   --color-error-text: hsl(226.7, 43.7%, 79.8%);
+   
+   --color-success-border: hsl(95.8, 43.9%, 67.8%);
+   --color-success-bg: hsl(229.1, 13.4%, 51.6%);
+   --color-success-text: hsl(226.7, 43.7%, 79.8%);
+   
+   --color-warning-border: $orange;
+   --color-warning-bg: hsl(226.7, 17%, 58.4%);
+   --color-warning-text: hsl(226.7, 43.7%, 79.8%);
+   
+   --color-info-border: hsl(229.1, 13.4%, 51.6%);
+   --color-info-bg: hsl(230, 15.6%, 30.2%);
+   --color-info-text: hsl(226.7, 43.7%, 79.8%);
+   
+   --color-box-header: hsl(227.1, 14.7%, 37.3%);
+   --color-box-body: hsl(230, 15.6%, 30.2%);
+   --color-box-body-highlight: hsl(227, 15%, 37%);
+   
+   --color-markup-code-block: hsl(228, 13.3%, 44.3%);
+   
+   --color-input-background: hsl(229.1, 18.6%, 23.1%);
+   --color-input-border: hsl(227.1, 14.7%, 37.3%);
+   --color-input-text: hsl(227.2, 70.1%, 86.9%);
+   
+   --color-card: hsl(230, 15.6%, 30.2%);
+   
+   --color-active: hsl(230, 15.6%, 30.2%);
+   --color-menu: hsl(227.1, 14.7%, 37.3%);
+   
+   --color-button: hsl(229.1, 13.4%, 51.6%);
+   --color-light-border: hsl(227.1, 14.7%, 37.3%);
+   --color-dark-border: hsl(229.1, 13.4%, 51.6%);
+   
+   --color-diff-removed-row-bg: rgba(hsl(358.8, 67.8%, 70.8%), 0.2)!important;
+   --color-diff-removed-row-border: rgba(hsl(358.8, 67.8%, 70.8%), 0.2)!important;
+   --color-diff-removed-word-bg: rgba(hsl(358.8, 67.8%, 70.8%), 0.4)!important;
+   
+   --color-diff-added-row-bg: rgba(hsl(95.8, 43.9%, 67.8%), 0.2)!important;
+   --color-diff-added-row-border: rgba(hsl(95.8, 43.9%, 67.8%), 0.2)!important;
+   --color-diff-added-word-bg: rgba(hsl(95.8, 43.9%, 67.8%), 0.4)!important;
+   
+   --color-diff-inactive: hsl(227.1, 14.7%, 37.3%);
+   
+   --color-code-bg: hsl(230, 15.6%, 30.2%);
+   --color-expand-button: hsl(227.1, 14.7%, 37.3%);
+}
+
+
+body {
+    background-color: hsl(229.1, 18.6%, 23.1%);
+    color: hsl(227.2, 70.1%, 86.9%);
+    
+}
+
+
+.ui.table {
+    color: hsl(227.2, 70.1%, 86.9%);
+}
+
+.repository-summary {
+    background-color: hsl(230, 15.6%, 30.2%);
+}
+
+.ui.green.button {
+    background-color: hsl(95.8, 43.9%, 67.8%);
+    color: hsl(229.1, 18.6%, 23.1%);
+}
+
+.ui.red.button {
+    background-color: hsl(358.8, 67.8%, 70.8%);
+    color: hsl(229.1, 18.6%, 23.1%);
+    border-color: hsl(229.1, 13.4%, 51.6%);
+}
+
+.ui.basic.red.button {
+    color: hsl(358.8, 67.8%, 70.8%);
+}
+
+
+.ui.negative.button {
+    background-color: hsl(358.8, 67.8%, 70.8%);
+    color: hsl(229.1, 18.6%, 23.1%);
+}
+
+.ui.basic.green.button {
+    color: hsl(95.8, 43.9%, 67.8%);
+}
+
+.ui.breadcrumb {
+    color: hsl(227.2, 70.1%, 86.9%);
+}
+
+.following.bar #navbar {
+    background-color: hsl(229, 19%, 23%)!important;
+    
+}
+
+#navbar .item {
+    color: hsl(221.6, 74.2%, 74.1%);
+}
+
+.default-link.muted, .time-since {
+	color: var(--color-text);
+}
+
+
+* {
+    caret-color: hsl(227.2, 70.1%, 86.9%);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ui.red.label, .ui.red.labels .label {
+        background-color: hsl(358.8, 67.8%, 70.8%)!important;
+        border-color: hsl(358.8, 67.8%, 70.8%)!important;
+        color: hsl(229.1, 18.6%, 23.1%)!important;
+    }
+    .ui.green.label, .ui.green.labels, .ui.basic.green.label {
+        background-color: hsl(95.8, 43.9%, 67.8%)!important;
+        border-color: hsl(95.8, 43.9%, 67.8%)!important;
+        color: hsl(229.1, 18.6%, 23.1%)!important;
+    }
+    
+    .repository.file.list #repo-files-table tr {
+        background-color: hsl(229.1, 18.6%, 23.1%);
+    }
+    .repository.file.list #repo-files-table tr:hover {
+        background-color: hsl(227.1, 14.7%, 37.3%)!important;
+    }
+    
+    .ui.horizontal.segments>.segment {
+        background-color: hsl(230, 15.6%, 30.2%);
+    }
+    
+    .tag-code td.lines-type-marker, td.blob-hunk {
+         color: hsl(227.2, 70.1%, 86.9%)!important;
+    }
+    
+    .tag-code, .tag-code td {
+        background: hsl(227.1, 14.7%, 37.3%)!important;
+    }
+    
+    .tag-code td.lines-num {
+        background-color: hsl(227.1, 14.7%, 37.3%)!important;
+    }
+    
+    .chroma .sb {
+        color: hsl(226.7, 43.7%, 79.8%);
+    }
+    
+    .chroma .nt {
+        color: rgba(hsl(276.7, 59%, 76.1%), 0.7)!important;
+    }
+    
+    .chroma .na {
+        color: rgba(hsl(171.5, 39.2%, 64.5%), 0.7)!important;
+    }
+    
+    .chroma .nb {
+        color: rgba(hsl(276.7, 59%, 76.1%), 0.7);
+    }
+    
+    .chroma .s2 {
+        color: rgba(hsl(171.5, 39.2%, 64.5%), 0.7);
+    }
+    
+    .chroma .si {
+        color: rgba(hsl(20.3, 79.1%, 70%), 0.6);
+    }
+    
+    .chroma .nv {
+        color: rgba(hsl(20.3, 79.1%, 70%), 0.6);
+    }
+    
+    .chroma .nx {
+        color: hsl(227.2, 70.1%, 86.9%);
+    }
+    
+    .chroma .nf {
+        color: hsl(39.5, 62%, 73.1%);
+    }
+    
+    .chroma .s {
+        color: rgba(hsl(171.5, 39.2%, 64.5%), 0.7);
+    }
+    
+}
diff --git a/theme-catppuccin-light.css b/theme-catppuccin-light.css
new file mode 100644
index 0000000..9887465
--- /dev/null
+++ b/theme-catppuccin-light.css
@@ -0,0 +1,232 @@
+:root {
+    --color-body: hsl(220, 23.1%, 94.9%);
+    --color-text: hsl(233.8, 16%, 35.5%);
+    --color-text-light: hsl(232.8, 10.4%, 47.3%);
+    --color-text-light-2: hsl(233.3, 12.8%, 41.4%);
+    --color-text-light-3: hsl(233.3, 12.8%, 41.4%);
+    --color-text-dark: hsl(232.8, 10.4%, 47.3%);
+    --color-text-dark-2: hsl(233.3, 12.8%, 41.4%);
+    --color-text-dark-3: hsl(233.3, 12.8%, 41.4%);
+    --color-secondary: hsl(225, 13.6%, 76.9%);
+    --color-caret: hsl(233.8, 16%, 35.5%);
+    --color-navbar: hsl(222.9, 15.9%, 82.7%);
+    --color-footer: hsl(222.9, 15.9%, 82.7%);
+    
+    --color-red: hsl(347.1, 86.7%, 44.1%);
+    --color-orange: hsl(22, 99.2%, 52%);
+    --color-yellow: hsl(34.9, 77%, 49.4%);
+    --color-olive: hsl(109.2, 57.6%, 39.8%);
+    --color-green: hsl(109.2, 57.6%, 39.8%);
+    --color-teal: hsl(183.2, 73.9%, 34.5%);
+    --color-blue: hsl(219.9, 91.5%, 53.9%);
+    --color-violet: hsl(266, 85%, 58%);
+    --color-purple: hsl(266, 85%, 58%);
+    --color-grey: hsl(228, 11.2%, 65.1%);
+    --color-gold: hsl(34.9, 77%, 49.4%);
+    --color-red-light: hsl(347.1, 86.7%, 44.1%);
+    --color-orange-light: hsl(22, 99.2%, 52%);
+    --color-yellow-light: hsl(34.9, 77%, 49.4%);
+    --color-olive-light: hsl(109.2, 57.6%, 39.8%);
+    --color-green-light: hsl(109.2, 57.6%, 39.8%);
+    --color-teal-light: hsl(183.2, 73.9%, 34.5%);
+    --color-blue-light: hsl(219.9, 91.5%, 53.9%);
+    --color-violet-light: hsl(266, 85%, 58%);
+    --color-purple-light: hsl(266, 85%, 58%);
+    --color-grey-light: hsl(232.2, 9.6%, 53.1%);
+    --color-gold-light: hsl(34.9, 77%, 49.4%);
+    --color-black: hsl(220, 20.7%, 88.6%);
+    --color-white: hsl(233.8, 16%, 35.5%);
+    
+    --color-primary: hsl(219.9, 91.5%, 53.9%);
+    
+    --color-console-fg: hsl(233.8, 16%, 35.5%);
+    --color-console-bg: hsl(220, 23.1%, 94.9%);
+    
+    --color-error-border: hsl(354.8, 76.3%, 58.6%);
+    --color-error-bg: hsl(228, 11.2%, 65.1%);
+    --color-error-text: hsl(233.3, 12.8%, 41.4%);
+    
+    --color-success-border: hsl(109.2, 57.6%, 39.8%);
+    --color-success-bg: hsl(228, 11.2%, 65.1%);
+    --color-success-text: hsl(233.3, 12.8%, 41.4%);
+    
+    --color-warning-border: $orange;
+    --color-warning-bg: hsl(231.4, 10%, 59%);
+    --color-warning-text: hsl(233.3, 12.8%, 41.4%);
+    
+    --color-info-border: hsl(228, 11.2%, 65.1%);
+    --color-info-bg: hsl(222.9, 15.9%, 82.7%);
+    --color-info-text: hsl(233.3, 12.8%, 41.4%);
+    
+    --color-box-header: hsl(225, 13.6%, 76.9%);
+    --color-box-body: hsl(222.9, 15.9%, 82.7%);
+    --color-box-body-highlight: hsl(225, 14%, 77%);
+    
+    --color-markup-code-block: hsl(226.7, 12.2%, 71%);
+    
+    --color-input-background: hsl(220, 23.1%, 94.9%);
+    --color-input-border: hsl(225, 13.6%, 76.9%);
+    --color-input-text: hsl(233.8, 16%, 35.5%);
+    
+    --color-card: hsl(222.9, 15.9%, 82.7%);
+    
+    --color-active: hsl(222.9, 15.9%, 82.7%);
+    --color-menu: hsl(225, 13.6%, 76.9%);
+    
+    --color-button: hsl(228, 11.2%, 65.1%);
+    --color-light-border: hsl(225, 13.6%, 76.9%);
+    --color-dark-border: hsl(228, 11.2%, 65.1%);
+    
+    --color-diff-removed-row-bg: rgba(hsl(347.1, 86.7%, 44.1%), 0.2)!important;
+    --color-diff-removed-row-border: rgba(hsl(347.1, 86.7%, 44.1%), 0.2)!important;
+    --color-diff-removed-word-bg: rgba(hsl(347.1, 86.7%, 44.1%), 0.4)!important;
+    
+    --color-diff-added-row-bg: rgba(hsl(109.2, 57.6%, 39.8%), 0.2)!important;
+    --color-diff-added-row-border: rgba(hsl(109.2, 57.6%, 39.8%), 0.2)!important;
+    --color-diff-added-word-bg: rgba(hsl(109.2, 57.6%, 39.8%), 0.4)!important;
+    
+    --color-diff-inactive: hsl(225, 13.6%, 76.9%);
+    
+    --color-code-bg: hsl(222.9, 15.9%, 82.7%);
+    --color-expand-button: hsl(225, 13.6%, 76.9%);
+}
+
+
+body {
+    background-color: hsl(220, 23.1%, 94.9%);
+    color: hsl(233.8, 16%, 35.5%);
+    
+}
+
+
+.ui.table {
+    color: hsl(233.8, 16%, 35.5%);
+}
+
+.repository-summary {
+    background-color: hsl(222.9, 15.9%, 82.7%);
+}
+
+.ui.green.button {
+    background-color: hsl(109.2, 57.6%, 39.8%);
+    color: hsl(220, 23.1%, 94.9%);
+}
+
+.ui.red.button {
+    background-color: hsl(347.1, 86.7%, 44.1%);
+    color: hsl(220, 23.1%, 94.9%);
+    border-color: hsl(228, 11.2%, 65.1%);
+}
+
+.ui.basic.red.button {
+    color: hsl(347.1, 86.7%, 44.1%);
+}
+
+
+.ui.negative.button {
+    background-color: hsl(347.1, 86.7%, 44.1%);
+    color: hsl(220, 23.1%, 94.9%);
+}
+
+.ui.basic.green.button {
+    color: hsl(109.2, 57.6%, 39.8%);
+}
+
+.ui.breadcrumb {
+    color: hsl(233.8, 16%, 35.5%);
+}
+
+.following.bar #navbar {
+    background-color: hsl(229, 19%, 23%)!important;
+    
+}
+
+#navbar .item {
+    color: hsl(222.9, 15.9%, 82.7%);
+}
+
+.default-link.muted, .time-since {
+	color: var(--color-text);
+}
+
+
+* {
+    caret-color: hsl(233.8, 16%, 35.5%);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ui.red.label, .ui.red.labels .label {
+        background-color: hsl(347.1, 86.7%, 44.1%)!important;
+        border-color: hsl(347.1, 86.7%, 44.1%)!important;
+        color: hsl(220, 23.1%, 94.9%)!important;
+    }
+    .ui.green.label, .ui.green.labels, .ui.basic.green.label {
+        background-color: hsl(109.2, 57.6%, 39.8%)!important;
+        border-color: hsl(109.2, 57.6%, 39.8%)!important;
+        color: hsl(220, 23.1%, 94.9%)!important;
+    }
+    
+    .repository.file.list #repo-files-table tr {
+        background-color: hsl(220, 23.1%, 94.9%);
+    }
+    .repository.file.list #repo-files-table tr:hover {
+        background-color: hsl(225, 13.6%, 76.9%)!important;
+    }
+    
+    .ui.horizontal.segments>.segment {
+        background-color: hsl(222.9, 15.9%, 82.7%);
+    }
+    
+    .tag-code td.lines-type-marker, td.blob-hunk {
+            color: hsl(233.8, 16%, 35.5%)!important;
+    }
+    
+    .tag-code, .tag-code td {
+        background: hsl(225, 13.6%, 76.9%)!important;
+    }
+    
+    .tag-code td.lines-num {
+        background-color: hsl(225, 13.6%, 76.9%)!important;
+    }
+    
+    .chroma .sb {
+        color: hsl(233.3, 12.8%, 41.4%);
+    }
+    
+    .chroma .nt {
+        color: rgba(hsl(266, 85%, 58%), 0.7)!important;
+    }
+    
+    .chroma .na {
+        color: rgba(hsl(183.2, 73.9%, 34.5%), 0.7)!important;
+    }
+    
+    .chroma .nb {
+        color: rgba(hsl(266, 85%, 58%), 0.7);
+    }
+    
+    .chroma .s2 {
+        color: rgba(hsl(183.2, 73.9%, 34.5%), 0.7);
+    }
+    
+    .chroma .si {
+        color: rgba(hsl(22, 99.2%, 52%), 0.6);
+    }
+    
+    .chroma .nv {
+        color: rgba(hsl(22, 99.2%, 52%), 0.6);
+    }
+    
+    .chroma .nx {
+        color: hsl(233.8, 16%, 35.5%);
+    }
+    
+    .chroma .nf {
+        color: hsl(34.9, 77%, 49.4%);
+    }
+    
+    .chroma .s {
+        color: rgba(hsl(183.2, 73.9%, 34.5%), 0.7);
+    }
+    
+}
diff --git a/theme-catppuccin-macchiato.css b/theme-catppuccin-macchiato.css
new file mode 100644
index 0000000..2d19afb
--- /dev/null
+++ b/theme-catppuccin-macchiato.css
@@ -0,0 +1,234 @@
+:root {
+    --is-dark-theme: true;
+
+   --color-body: hsl(231.8, 23.4%, 18.4%);
+   --color-text: hsl(227.4, 68.3%, 87.6%);
+   --color-text-light: hsl(227.4, 26.8%, 72.2%);
+   --color-text-light-2: hsl(228, 39.2%, 80%);
+   --color-text-light-3: hsl(228, 39.2%, 80%);
+   --color-text-dark: hsl(227.4, 26.8%, 72.2%);
+   --color-text-dark-2: hsl(228, 39.2%, 80%);
+   --color-text-dark-3: hsl(228, 39.2%, 80%);
+   --color-secondary: hsl(231.1, 15.6%, 33.9%);
+   --color-caret: hsl(227.4, 68.3%, 87.6%);
+   --color-navbar: hsl(230.4, 18.8%, 26.1%);
+   --color-footer: hsl(230.4, 18.8%, 26.1%);
+   
+   --color-red: hsl(351.2, 73.9%, 72.9%);
+   --color-orange: hsl(21.4, 85.5%, 72.9%);
+   --color-yellow: hsl(40.3, 69.9%, 77.8%);
+   --color-olive: hsl(105.2, 48.3%, 72%);
+   --color-green: hsl(105.2, 48.3%, 72%);
+   --color-teal: hsl(171.1, 46.8%, 69%);
+   --color-blue: hsl(220.2, 82.8%, 74.9%);
+   --color-violet: hsl(266.5, 82.7%, 79.6%);
+   --color-purple: hsl(266.5, 82.7%, 79.6%);
+   --color-grey: hsl(230.3, 12.4%, 49.2%);
+   --color-gold: hsl(40.3, 69.9%, 77.8%);
+   --color-red-light: hsl(351.2, 73.9%, 72.9%);
+   --color-orange-light: hsl(21.4, 85.5%, 72.9%);
+   --color-yellow-light: hsl(40.3, 69.9%, 77.8%);
+   --color-olive-light: hsl(105.2, 48.3%, 72%);
+   --color-green-light: hsl(105.2, 48.3%, 72%);
+   --color-teal-light: hsl(171.1, 46.8%, 69%);
+   --color-blue-light: hsl(220.2, 82.8%, 74.9%);
+   --color-violet-light: hsl(266.5, 82.7%, 79.6%);
+   --color-purple-light: hsl(266.5, 82.7%, 79.6%);
+   --color-grey-light: hsl(228.3, 20%, 64.7%);
+   --color-gold-light: hsl(40.3, 69.9%, 77.8%);
+   --color-black: hsl(235.7, 22.6%, 12.2%);
+   --color-white: hsl(227.4, 68.3%, 87.6%);
+   
+   --color-primary: hsl(220.2, 82.8%, 74.9%);
+   
+   --color-console-fg: hsl(227.4, 68.3%, 87.6%);
+   --color-console-bg: hsl(231.8, 23.4%, 18.4%);
+   
+   --color-error-border: hsl(355.1, 71.4%, 76.7%);
+   --color-error-bg: hsl(230.3, 12.4%, 49.2%);
+   --color-error-text: hsl(228, 39.2%, 80%);
+   
+   --color-success-border: hsl(105.2, 48.3%, 72%);
+   --color-success-bg: hsl(230.3, 12.4%, 49.2%);
+   --color-success-text: hsl(228, 39.2%, 80%);
+   
+   --color-warning-border: $orange;
+   --color-warning-bg: hsl(227.6, 15.5%, 56.9%);
+   --color-warning-text: hsl(228, 39.2%, 80%);
+   
+   --color-info-border: hsl(230.3, 12.4%, 49.2%);
+   --color-info-bg: hsl(230.4, 18.8%, 26.1%);
+   --color-info-text: hsl(228, 39.2%, 80%);
+   
+   --color-box-header: hsl(231.1, 15.6%, 33.9%);
+   --color-box-body: hsl(230.4, 18.8%, 26.1%);
+   --color-box-body-highlight: hsl(231, 16%, 34%);
+   
+   --color-markup-code-block: hsl(229.7, 13.7%, 41.4%);
+   
+   --color-input-background: hsl(231.8, 23.4%, 18.4%);
+   --color-input-border: hsl(231.1, 15.6%, 33.9%);
+   --color-input-text: hsl(227.4, 68.3%, 87.6%);
+   
+   --color-card: hsl(230.4, 18.8%, 26.1%);
+   
+   --color-active: hsl(230.4, 18.8%, 26.1%);
+   --color-menu: hsl(231.1, 15.6%, 33.9%);
+   
+   --color-button: hsl(230.3, 12.4%, 49.2%);
+   --color-light-border: hsl(231.1, 15.6%, 33.9%);
+   --color-dark-border: hsl(230.3, 12.4%, 49.2%);
+   
+   --color-diff-removed-row-bg: rgba(hsl(351.2, 73.9%, 72.9%), 0.2)!important;
+   --color-diff-removed-row-border: rgba(hsl(351.2, 73.9%, 72.9%), 0.2)!important;
+   --color-diff-removed-word-bg: rgba(hsl(351.2, 73.9%, 72.9%), 0.4)!important;
+   
+   --color-diff-added-row-bg: rgba(hsl(105.2, 48.3%, 72%), 0.2)!important;
+   --color-diff-added-row-border: rgba(hsl(105.2, 48.3%, 72%), 0.2)!important;
+   --color-diff-added-word-bg: rgba(hsl(105.2, 48.3%, 72%), 0.4)!important;
+   
+   --color-diff-inactive: hsl(231.1, 15.6%, 33.9%);
+   
+   --color-code-bg: hsl(230.4, 18.8%, 26.1%);
+   --color-expand-button: hsl(231.1, 15.6%, 33.9%);
+}
+
+
+body {
+    background-color: hsl(231.8, 23.4%, 18.4%);
+    color: hsl(227.4, 68.3%, 87.6%);
+    
+}
+
+
+.ui.table {
+    color: hsl(227.4, 68.3%, 87.6%);
+}
+
+.repository-summary {
+    background-color: hsl(230.4, 18.8%, 26.1%);
+}
+
+.ui.green.button {
+    background-color: hsl(105.2, 48.3%, 72%);
+    color: hsl(231.8, 23.4%, 18.4%);
+}
+
+.ui.red.button {
+    background-color: hsl(351.2, 73.9%, 72.9%);
+    color: hsl(231.8, 23.4%, 18.4%);
+    border-color: hsl(230.3, 12.4%, 49.2%);
+}
+
+.ui.basic.red.button {
+    color: hsl(351.2, 73.9%, 72.9%);
+}
+
+
+.ui.negative.button {
+    background-color: hsl(351.2, 73.9%, 72.9%);
+    color: hsl(231.8, 23.4%, 18.4%);
+}
+
+.ui.basic.green.button {
+    color: hsl(105.2, 48.3%, 72%);
+}
+
+.ui.breadcrumb {
+    color: hsl(227.4, 68.3%, 87.6%);
+}
+
+.following.bar #navbar {
+    background-color: hsl(232, 23%, 18%)!important;
+    
+}
+
+#navbar .item {
+    color: hsl(220.2, 82.8%, 74.9%);
+}
+
+.default-link.muted, .time-since {
+	color: var(--color-text);
+}
+
+
+* {
+    caret-color: hsl(227.4, 68.3%, 87.6%);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ui.red.label, .ui.red.labels .label {
+        background-color: hsl(351.2, 73.9%, 72.9%)!important;
+        border-color: hsl(351.2, 73.9%, 72.9%)!important;
+        color: hsl(231.8, 23.4%, 18.4%)!important;
+    }
+    .ui.green.label, .ui.green.labels, .ui.basic.green.label {
+        background-color: hsl(105.2, 48.3%, 72%)!important;
+        border-color: hsl(105.2, 48.3%, 72%)!important;
+        color: hsl(231.8, 23.4%, 18.4%)!important;
+    }
+    
+    .repository.file.list #repo-files-table tr {
+        background-color: hsl(231.8, 23.4%, 18.4%);
+    }
+    .repository.file.list #repo-files-table tr:hover {
+        background-color: hsl(231.1, 15.6%, 33.9%)!important;
+    }
+    
+    .ui.horizontal.segments>.segment {
+        background-color: hsl(230.4, 18.8%, 26.1%);
+    }
+    
+    .tag-code td.lines-type-marker, td.blob-hunk {
+         color: hsl(227.4, 68.3%, 87.6%)!important;
+    }
+    
+    .tag-code, .tag-code td {
+        background: hsl(231.1, 15.6%, 33.9%)!important;
+    }
+    
+    .tag-code td.lines-num {
+        background-color: hsl(231.1, 15.6%, 33.9%)!important;
+    }
+    
+    .chroma .sb {
+        color: hsl(228, 39.2%, 80%);
+    }
+    
+    .chroma .nt {
+        color: rgba(hsl(266.5, 82.7%, 79.6%), 0.7)!important;
+    }
+    
+    .chroma .na {
+        color: rgba(hsl(171.1, 46.8%, 69%), 0.7)!important;
+    }
+    
+    .chroma .nb {
+        color: rgba(hsl(266.5, 82.7%, 79.6%), 0.7);
+    }
+    
+    .chroma .s2 {
+        color: rgba(hsl(171.1, 46.8%, 69%), 0.7);
+    }
+    
+    .chroma .si {
+        color: rgba(hsl(21.4, 85.5%, 72.9%), 0.6);
+    }
+    
+    .chroma .nv {
+        color: rgba(hsl(21.4, 85.5%, 72.9%), 0.6);
+    }
+    
+    .chroma .nx {
+        color: hsl(227.4, 68.3%, 87.6%);
+    }
+    
+    .chroma .nf {
+        color: hsl(40.3, 69.9%, 77.8%);
+    }
+    
+    .chroma .s {
+        color: rgba(hsl(171.1, 46.8%, 69%), 0.7);
+    }
+    
+}
diff --git a/theme-catppuccin-mocha.css b/theme-catppuccin-mocha.css
new file mode 100644
index 0000000..06b8e65
--- /dev/null
+++ b/theme-catppuccin-mocha.css
@@ -0,0 +1,234 @@
+:root {
+    --is-dark-theme: true;
+
+   --color-body: hsl(240, 21.1%, 14.9%);
+   --color-text: hsl(226.2, 63.9%, 88%);
+   --color-text-light: hsl(227.6, 23.6%, 71.8%);
+   --color-text-light-2: hsl(226.7, 35.3%, 80%);
+   --color-text-light-3: hsl(226.7, 35.3%, 80%);
+   --color-text-dark: hsl(227.6, 23.6%, 71.8%);
+   --color-text-dark-2: hsl(226.7, 35.3%, 80%);
+   --color-text-dark-3: hsl(226.7, 35.3%, 80%);
+   --color-secondary: hsl(234.3, 13.2%, 31.2%);
+   --color-caret: hsl(226.2, 63.9%, 88%);
+   --color-navbar: hsl(236.8, 16.2%, 22.9%);
+   --color-footer: hsl(236.8, 16.2%, 22.9%);
+   
+   --color-red: hsl(343.3, 81.2%, 74.9%);
+   --color-orange: hsl(23, 92%, 75.5%);
+   --color-yellow: hsl(41.4, 86%, 83.1%);
+   --color-olive: hsl(115.5, 54.1%, 76.1%);
+   --color-green: hsl(115.5, 54.1%, 76.1%);
+   --color-teal: hsl(170, 57.4%, 73.3%);
+   --color-blue: hsl(217.2, 91.9%, 75.9%);
+   --color-violet: hsl(267.4, 83.5%, 81%);
+   --color-purple: hsl(267.4, 83.5%, 81%);
+   --color-grey: hsl(230.8, 10.7%, 47.5%);
+   --color-gold: hsl(41.4, 86%, 83.1%);
+   --color-red-light: hsl(343.3, 81.2%, 74.9%);
+   --color-orange-light: hsl(23, 92%, 75.5%);
+   --color-yellow-light: hsl(41.4, 86%, 83.1%);
+   --color-olive-light: hsl(115.5, 54.1%, 76.1%);
+   --color-green-light: hsl(115.5, 54.1%, 76.1%);
+   --color-teal-light: hsl(170, 57.4%, 73.3%);
+   --color-blue-light: hsl(217.2, 91.9%, 75.9%);
+   --color-violet-light: hsl(267.4, 83.5%, 81%);
+   --color-purple-light: hsl(267.4, 83.5%, 81%);
+   --color-grey-light: hsl(228.4, 16.8%, 63.7%);
+   --color-gold-light: hsl(41.4, 86%, 83.1%);
+   --color-black: hsl(240, 22.7%, 8.6%);
+   --color-white: hsl(226.2, 63.9%, 88%);
+   
+   --color-primary: hsl(217.2, 91.9%, 75.9%);
+   
+   --color-console-fg: hsl(226.2, 63.9%, 88%);
+   --color-console-bg: hsl(240, 21.1%, 14.9%);
+   
+   --color-error-border: hsl(350.4, 65.2%, 77.5%);
+   --color-error-bg: hsl(230.8, 10.7%, 47.5%);
+   --color-error-text: hsl(226.7, 35.3%, 80%);
+   
+   --color-success-border: hsl(115.5, 54.1%, 76.1%);
+   --color-success-bg: hsl(230.8, 10.7%, 47.5%);
+   --color-success-text: hsl(226.7, 35.3%, 80%);
+   
+   --color-warning-border: $orange;
+   --color-warning-bg: hsl(229.7, 12.8%, 55.5%);
+   --color-warning-text: hsl(226.7, 35.3%, 80%);
+   
+   --color-info-border: hsl(230.8, 10.7%, 47.5%);
+   --color-info-bg: hsl(236.8, 16.2%, 22.9%);
+   --color-info-text: hsl(226.7, 35.3%, 80%);
+   
+   --color-box-header: hsl(234.3, 13.2%, 31.2%);
+   --color-box-body: hsl(236.8, 16.2%, 22.9%);
+   --color-box-body-highlight: hsl(234, 13%, 31%);
+   
+   --color-markup-code-block: hsl(232.5, 12%, 39.2%);
+   
+   --color-input-background: hsl(240, 21.1%, 14.9%);
+   --color-input-border: hsl(234.3, 13.2%, 31.2%);
+   --color-input-text: hsl(226.2, 63.9%, 88%);
+   
+   --color-card: hsl(236.8, 16.2%, 22.9%);
+   
+   --color-active: hsl(236.8, 16.2%, 22.9%);
+   --color-menu: hsl(234.3, 13.2%, 31.2%);
+   
+   --color-button: hsl(230.8, 10.7%, 47.5%);
+   --color-light-border: hsl(234.3, 13.2%, 31.2%);
+   --color-dark-border: hsl(230.8, 10.7%, 47.5%);
+   
+   --color-diff-removed-row-bg: rgba(hsl(343.3, 81.2%, 74.9%), 0.2)!important;
+   --color-diff-removed-row-border: rgba(hsl(343.3, 81.2%, 74.9%), 0.2)!important;
+   --color-diff-removed-word-bg: rgba(hsl(343.3, 81.2%, 74.9%), 0.4)!important;
+   
+   --color-diff-added-row-bg: rgba(hsl(115.5, 54.1%, 76.1%), 0.2)!important;
+   --color-diff-added-row-border: rgba(hsl(115.5, 54.1%, 76.1%), 0.2)!important;
+   --color-diff-added-word-bg: rgba(hsl(115.5, 54.1%, 76.1%), 0.4)!important;
+   
+   --color-diff-inactive: hsl(234.3, 13.2%, 31.2%);
+   
+   --color-code-bg: hsl(236.8, 16.2%, 22.9%);
+   --color-expand-button: hsl(234.3, 13.2%, 31.2%);
+}
+
+
+body {
+    background-color: hsl(240, 21.1%, 14.9%);
+    color: hsl(226.2, 63.9%, 88%);
+    
+}
+
+
+.ui.table {
+    color: hsl(226.2, 63.9%, 88%);
+}
+
+.repository-summary {
+    background-color: hsl(236.8, 16.2%, 22.9%);
+}
+
+.ui.green.button {
+    background-color: hsl(115.5, 54.1%, 76.1%);
+    color: hsl(240, 21.1%, 14.9%);
+}
+
+.ui.red.button {
+    background-color: hsl(343.3, 81.2%, 74.9%);
+    color: hsl(240, 21.1%, 14.9%);
+    border-color: hsl(230.8, 10.7%, 47.5%);
+}
+
+.ui.basic.red.button {
+    color: hsl(343.3, 81.2%, 74.9%);
+}
+
+
+.ui.negative.button {
+    background-color: hsl(343.3, 81.2%, 74.9%);
+    color: hsl(240, 21.1%, 14.9%);
+}
+
+.ui.basic.green.button {
+    color: hsl(115.5, 54.1%, 76.1%);
+}
+
+.ui.breadcrumb {
+    color: hsl(226.2, 63.9%, 88%);
+}
+
+.following.bar #navbar {
+    background-color: hsl(240, 21%, 15%)!important;
+    
+}
+
+#navbar .item {
+    color: hsl(217.2, 91.9%, 75.9%);
+}
+
+.default-link.muted, .time-since {
+	color: var(--color-text);
+}
+
+
+* {
+    caret-color: hsl(226.2, 63.9%, 88%);
+}
+
+@media (prefers-color-scheme: dark) {
+    .ui.red.label, .ui.red.labels .label {
+        background-color: hsl(343.3, 81.2%, 74.9%)!important;
+        border-color: hsl(343.3, 81.2%, 74.9%)!important;
+        color: hsl(240, 21.1%, 14.9%)!important;
+    }
+    .ui.green.label, .ui.green.labels, .ui.basic.green.label {
+        background-color: hsl(115.5, 54.1%, 76.1%)!important;
+        border-color: hsl(115.5, 54.1%, 76.1%)!important;
+        color: hsl(240, 21.1%, 14.9%)!important;
+    }
+    
+    .repository.file.list #repo-files-table tr {
+        background-color: hsl(240, 21.1%, 14.9%);
+    }
+    .repository.file.list #repo-files-table tr:hover {
+        background-color: hsl(234.3, 13.2%, 31.2%)!important;
+    }
+    
+    .ui.horizontal.segments>.segment {
+        background-color: hsl(236.8, 16.2%, 22.9%);
+    }
+    
+    .tag-code td.lines-type-marker, td.blob-hunk {
+         color: hsl(226.2, 63.9%, 88%)!important;
+    }
+    
+    .tag-code, .tag-code td {
+        background: hsl(234.3, 13.2%, 31.2%)!important;
+    }
+    
+    .tag-code td.lines-num {
+        background-color: hsl(234.3, 13.2%, 31.2%)!important;
+    }
+    
+    .chroma .sb {
+        color: hsl(226.7, 35.3%, 80%);
+    }
+    
+    .chroma .nt {
+        color: rgba(hsl(267.4, 83.5%, 81%), 0.7)!important;
+    }
+    
+    .chroma .na {
+        color: rgba(hsl(170, 57.4%, 73.3%), 0.7)!important;
+    }
+    
+    .chroma .nb {
+        color: rgba(hsl(267.4, 83.5%, 81%), 0.7);
+    }
+    
+    .chroma .s2 {
+        color: rgba(hsl(170, 57.4%, 73.3%), 0.7);
+    }
+    
+    .chroma .si {
+        color: rgba(hsl(23, 92%, 75.5%), 0.6);
+    }
+    
+    .chroma .nv {
+        color: rgba(hsl(23, 92%, 75.5%), 0.6);
+    }
+    
+    .chroma .nx {
+        color: hsl(226.2, 63.9%, 88%);
+    }
+    
+    .chroma .nf {
+        color: hsl(41.4, 86%, 83.1%);
+    }
+    
+    .chroma .s {
+        color: rgba(hsl(170, 57.4%, 73.3%), 0.7);
+    }
+    
+}