From 604c87eab748cd4db045c26d697f9ebb833ffd73 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Mon, 27 Jul 2026 16:47:15 +0100
Subject: [PATCH 01/11] fix(crates.io): fix for the new crates.io site

---
 styles/crates.io/catppuccin.user.less | 412 +++++++++++++++-----------
 1 file changed, 237 insertions(+), 175 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 8b983f5871..2df85ab875 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -14,28 +14,13 @@
 @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== */
-
 @import "https://userstyles.catppuccin.com/lib/lib.less";
 
 @-moz-document domain("crates.io") {
-  @import url("https://unpkg.com/@catppuccin/highlightjs@1.0.0/css/catppuccin-variables.important.css");
-
-  code.hljs {
-    background: none !important;
-  }
-
-  :root[data-color-scheme="system"] {
-    @media (prefers-color-scheme: light) {
-      #catppuccin(@lightFlavor);
-    }
-    @media (prefers-color-scheme: dark) {
-      #catppuccin(@darkFlavor);
-    }
-  }
-
   :root[data-color-scheme="dark"] {
     #catppuccin(@darkFlavor);
   }
+
   :root[data-color-scheme="light"] {
     #catppuccin(@lightFlavor);
   }
@@ -45,216 +30,293 @@
     #lib.defaults();
     #lib.css-variables();
 
-    &,
-    * {
-      --shadow: none !important;
-      --csstools-color-scheme--dark: none;
-
-      --header-bg-color: @mantle;
-      --main-color: @text;
-      --main-color-light: @subtext1;
-      --main-shadow-color: @surface0;
+    @layer global {
       --main-bg: @mantle;
       --main-bg-dark: @base;
-      --gray-border: @surface0;
+      --main-color: @text;
+      --main-color-light: @subtext1;
+
       --link-color: @accent;
-      --link-hover-color: darken(@accent, 5%);
-      --footer-header-color: @text;
-
-      /* Main article/readme background */
-      --csstools-light-dark-toggle--63: @base;
-
-      /* Inline code background */
-      --csstools-light-dark-toggle--92: @mantle;
-      /* Code block background */
-      --csstools-light-dark-toggle--91: @mantle;
-      /* Copyable text hover */
-      --csstools-light-dark-toggle--78: @base;
-
-      /* Versions cards */
-      --csstools-light-dark-toggle--111: @text;
-      --csstools-light-dark-toggle--113: @base;
-      --csstools-light-dark-toggle--114: fade(@green, 15%);
-      --csstools-light-dark-toggle--117: fade(@yellow, 15%);
-      --csstools-light-dark-toggle--109: @surface0;
-      --csstools-light-dark-toggle--110: @surface0;
-      --csstools-light-dark-toggle--115: @surface0;
-      --csstools-light-dark-toggle--118: @surface0;
-      --csstools-light-dark-toggle--126: @text;
-      [class*="_new"] {
-        color: @green;
-      }
-      /* Dependencies cards */
-      --csstools-light-dark-toggle--83: @base;
-      --csstools-light-dark-toggle--79: @surface0;
-      --csstools-light-dark-toggle--80: @text;
-      --csstools-light-dark-toggle--81: @text;
-      --csstools-light-dark-toggle--84: @subtext0;
-      --grey600: @subtext0;
-      --grey700: @text;
-      /* Dependents cards */
-      --csstools-light-dark-toggle--89: @base;
-      --csstools-light-dark-toggle--86: @surface0;
-      /* Search results cards */
-      --csstools-light-dark-toggle--2: @base;
-      /* Homepage cards */
-      --csstools-light-dark-toggle--74: @base;
-      --csstools-light-dark-toggle--77: @surface0;
-      --csstools-light-dark-toggle--75: @subtext1;
-      --csstools-light-dark-toggle--76: @text;
-      --csstools-light-dark-toggle--19: @subtext0;
-      --csstools-light-dark-toggle--20: @subtext0;
-
-      /* Header search bar */
-      --csstools-light-dark-toggle--34: @crust;
+      --link-hover-color: lighten(@accent, 5%);
+
+      --gray-border: @surface2;
+
+      --header-bg-color: @base;
+
       --yellow500: @accent;
-      --yellow700: darken(@accent, 5%);
+      --yellow700: darken(@accent; 5%);
+
+      .button {
+        --text-color: @base;
+        --disabled-text-color: @surface1;
+
+        --bg-color-top: @accent;
+        --bg-color-bottom: @accent;
+        --bg-color-top-light: @accent;
+        --bg-color-bottom-light: @accent;
+        --bg-color-top-dark: darken(@accent, 5%);
+        --bg-color-bottom-dark: darken(@accent, 5%);
+      }
 
-      /* Dropdown */
-      --csstools-light-dark-toggle--23: @mantle;
-      --csstools-light-dark-toggle--35: @mantle;
-      /* Dropdown items */
-      [class*="_item_"] {
-        button:hover,
-        > a:hover,
-        [class*="_selected_"] {
-          background: @surface0;
-          color: @text !important;
-        }
+      .button--red {
+        --bg-color-top: @maroon;
+        --bg-color-bottom: @maroon;
+        --bg-color-top-light: @maroon;
+        --bg-color-bottom-light: @maroon;
+        --bg-color-top-dark: @red;
+        --bg-color-bottom-dark: @red;
+      }
+
+      input[type="checkbox"] {
+        accent-color: @accent;
       }
     }
 
-    /* Toasts */
-    .c-notification {
-      --ecn-green: @green;
-      --ecn-blue: @blue;
-      --ecn-orange: @peach;
-      --ecn-red: @red;
+    nav {
+      .login-button {
+        color: @text;
+      }
+
+      .color-scheme-menu .icon {
+        background-color: if((@flavor =latte), @base, @text);
+      }
+    }
 
-      &,
-      .c-notification__icon {
-        color: @crust;
+    footer {
+      ul li a {
+        color: @text;
       }
     }
 
-    /* Tooltips */
-    .ember-tooltip {
-      color: @text;
-      background-color: @crust;
-      text-shadow: none;
+    .dropdown ul {
+      background-color: @base;
+      border-color: @surface1;
+
+      li {
 
-      &[x-placement^="top"] .ember-tooltip-arrow {
-        border-top-color: @crust;
+        a:hover,
+        button:hover,
+        button.selected {
+          background-color: @surface0;
+          color: @text !important;
+        }
+
+        .icon {
+          background-color: @text;
+        }
       }
     }
 
-    /* Icons and icon badges */
-    [class*="downloads_"] [fill="#FFF"] {
-      fill: @surface0 !important;
-    }
-    [fill="#B13B89"],
-    [fill="#B84D94"],
-    svg[class*="_download-icon"] {
-      fill: @accent !important;
+    /* Crates List */
+    .results-meta .sort-dropdown {
+      .icon {
+        background-color: @accent;
+      }
     }
-    [stroke="#B84D94"] {
-      stroke: @accent !important;
+
+    .crate-row {
+      --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+      background-color: @base;
     }
 
-    /* Footer links */
-    ._content_hautyr {
-      h1 {
-        text-shadow: none;
+    /* Crates */
+    .main {
+
+      .header,
+      .docs {
+        --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+        background-color: @base;
+      }
+
+      .viewer {
+        .code {
+          diffs-container {
+            --diffs-light-bg: @surface0;
+            --diffs-dark-bg: @surface0;
+          }
+        }
+      }
+
+      .wrapper {
+
+        p code,
+        li code {
+          background-color: @surface0 !important;
+        }
+      }
+
+      .crate-downloads {
+        .stat-icon {
+          color: @mantle;
+          background-color: @text;
+        }
       }
 
-      a {
-        color: @accent;
+      .list .row {
+
+        .link,
+        .range-lg {
+          color: @subtext1;
+        }
+
+        background-color: @base;
 
         &:hover {
-          color: darken(@accent, 5%);
-          text-shadow: none;
+          background-color: @surface0;
+        }
+
+        .top {
+
+          a,
+          .range,
+          .downloads {
+            color: @subtext1;
+          }
+        }
+
+        .description {
+          color: @subtext0;
+        }
+
+        .release-track {
+          background-color: @text;
+          color: @base;
+        }
+
+        .num-link {
+          color: @subtext1;
+        }
+
+        &.latest {
+          .release-track {
+            background-color: @green;
+            border-color: @green;
+          }
+
+          .num-link {
+            color: @green;
+          }
+        }
+
+        &.prerelease {
+          .release-track {
+            background-color: @peach;
+            border-color: @peach;
+          }
+
+          .num-link {
+            color: @peach;
+          }
+        }
+
+        .metadata {
+          color: @subtext1;
         }
       }
     }
 
-    /* Misc header text */
-    [class*="_header-inner_"] {
-      &,
-      a {
-        color: @text;
+    .notification {
+      color: @base;
+
+      .notification__icon {
+        color: @base;
       }
-    }
 
-    /* Search bar magnifying glass icon */
-    form[action="/search"] button {
-      color: @crust;
+      .notification--success {
+        background-color: @green;
+      }
     }
 
-    /* Sort by search results */
-    ._icon_xsqxju {
-      color: @accent;
-    }
+    /* Homepage */
+    header {
+      button.submit-button .icon {
+        background-color: @base;
+      }
 
-    /* Primary buttons */
-    [class*="_tan-button_"],
-    [class*="_yellow-button_"] {
-      color: @crust !important;
-      background: @accent;
+      .input-lg {
+        background-color: @mantle;
+      }
 
-      &:hover {
-        background-color: darken(@accent, 5%);
+      & when (@flavor =latte) {
+        background-color: @text;
       }
     }
 
-    [class*="_red-button_"] {
-      --bg-color-top: @maroon;
-      --bg-color-bottom: @maroon;
-      --bg-color-top-dark: @red;
-      --bg-color-bottom-dark: @red;
+    .hero-button .icon {
+      color: @base;
     }
 
-    /* User email settings */
-    [class*="_me-email_"] {
-      [class*="_row_"] {
-        border-color: @surface0;
+    .blurb .stats {
+      .icon {
+        background-color: @subtext0;
       }
-      [class*="_verified_"] {
-        color: @green;
+
+      .label {
+        color: @subtext0;
       }
     }
 
-    /* Logged out home page hero */
-    [class*="_hero-title_"] {
+    .box {
+      --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+      background-color: @surface0;
       color: @text;
-      text-shadow: none;
-    }
-    [class*="_hero-button_"] [class*="_icon_"] {
-      color: @crust;
-    }
-    [class*="_blurb_"] [class*="_stats-value_"] {
-      [class*="_label_"],
-      svg {
+
+      .subtitle,
+      .icon {
+        color: @subtext1;
+      }
+
+      .version,
+      .downloads {
         color: @subtext0;
       }
-    }
 
-    /* User avatar backgrounds */
-    [class*="_avatar_"] {
-      background-color: @surface0;
-      box-shadow: none;
+      &:hover {
+        background-color: @surface1;
+      }
     }
 
-    [class*="_yanked-badge_"] {
-      background-color: @red;
-      color: @crust;
+    /* Dashboard */
+    .page-header-content .stats .downloads .icon {
+      background-color: @accent;
     }
 
-    /* Tables in READMEs */
-    table {
-      th,
-      td {
-        border-color: @surface1;
+    .my-info {
+      .my-crate-lists {
+
+        .section-header,
+        .list {
+          .link {
+            background-color: @base;
+            color: @subtext1;
+          }
+
+          .icon {
+            background-color: @accent;
+          }
+        }
       }
+
+      .my-feed {
+        .icon {
+          background-color: @accent;
+        }
+
+        .feed-row {
+          background-color: @base;
+          border-color: @mantle;
+        }
+      }
+    }
+
+    /* Account Settings */
+    .verified {
+      color: @green;
+    }
+
+    .empty-state {
+      background-color: @base;
+      border-color: @surface1;
     }
   }
 }

From 7426a302f4dcbb26603bc27d2224bb3d8bccc7a6 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Mon, 27 Jul 2026 16:56:21 +0100
Subject: [PATCH 02/11] style(crates.io): fmt

---
 styles/crates.io/catppuccin.user.less | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 2df85ab875..4a7fa80a84 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -78,7 +78,7 @@
       }
 
       .color-scheme-menu .icon {
-        background-color: if((@flavor =latte), @base, @text);
+        background-color: if((@flavor = latte), @base, @text);
       }
     }
 
@@ -93,7 +93,6 @@
       border-color: @surface1;
 
       li {
-
         a:hover,
         button:hover,
         button.selected {
@@ -115,16 +114,15 @@
     }
 
     .crate-row {
-      --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+      --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
       background-color: @base;
     }
 
     /* Crates */
     .main {
-
       .header,
       .docs {
-        --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+        --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
         background-color: @base;
       }
 
@@ -138,7 +136,6 @@
       }
 
       .wrapper {
-
         p code,
         li code {
           background-color: @surface0 !important;
@@ -153,7 +150,6 @@
       }
 
       .list .row {
-
         .link,
         .range-lg {
           color: @subtext1;
@@ -166,7 +162,6 @@
         }
 
         .top {
-
           a,
           .range,
           .downloads {
@@ -237,7 +232,7 @@
         background-color: @mantle;
       }
 
-      & when (@flavor =latte) {
+      & when (@flavor = latte) {
         background-color: @text;
       }
     }
@@ -257,7 +252,7 @@
     }
 
     .box {
-      --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+      --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
       background-color: @surface0;
       color: @text;
 
@@ -283,7 +278,6 @@
 
     .my-info {
       .my-crate-lists {
-
         .section-header,
         .list {
           .link {

From 0e4c5546b84dc559ce5985850ccda6355c176717 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Mon, 3 Aug 2026 19:50:52 +0100
Subject: [PATCH 03/11] fix(crates.io): various fixes

---
 styles/crates.io/catppuccin.user.less | 113 ++++++++++++++++++++------
 1 file changed, 89 insertions(+), 24 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 4a7fa80a84..f7c25e9c16 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -20,7 +20,6 @@
   :root[data-color-scheme="dark"] {
     #catppuccin(@darkFlavor);
   }
-
   :root[data-color-scheme="light"] {
     #catppuccin(@lightFlavor);
   }
@@ -44,7 +43,7 @@
       --header-bg-color: @base;
 
       --yellow500: @accent;
-      --yellow700: darken(@accent; 5%);
+      --yellow700: darken(@accent, 5%);
 
       .button {
         --text-color: @base;
@@ -57,7 +56,6 @@
         --bg-color-top-dark: darken(@accent, 5%);
         --bg-color-bottom-dark: darken(@accent, 5%);
       }
-
       .button--red {
         --bg-color-top: @maroon;
         --bg-color-bottom: @maroon;
@@ -66,17 +64,41 @@
         --bg-color-top-dark: @red;
         --bg-color-bottom-dark: @red;
       }
-
+      :focus-visible {
+        outline-color: @accent;
+        outline-style: solid;
+      }
       input[type="checkbox"] {
         accent-color: @accent;
       }
+      input[type="text"] {
+        background-color: @base;
+        color: @text;
+        &[aria-invalid="true"] {
+          border-color: @red;
+        }
+      }
+      select {
+        background-color: @base;
+        color: @text;
+      }
+    }
+
+    .tooltip {
+      background-color: @mantle;
+      color: @text;
+      .rt-latest {
+        color: @green;
+      }
+      .new {
+        color: @peach;
+      }
     }
 
     nav {
       .login-button {
         color: @text;
       }
-
       .color-scheme-menu .icon {
         background-color: if((@flavor = latte), @base, @text);
       }
@@ -91,7 +113,6 @@
     .dropdown ul {
       background-color: @base;
       border-color: @surface1;
-
       li {
         a:hover,
         button:hover,
@@ -99,7 +120,6 @@
           background-color: @surface0;
           color: @text !important;
         }
-
         .icon {
           background-color: @text;
         }
@@ -148,19 +168,16 @@
           background-color: @text;
         }
       }
-
-      .list .row {
-        .link,
-        .range-lg {
-          color: @subtext1;
-        }
-
+      [role="list"] .row, .list .row {
         background-color: @base;
-
         &:hover {
           background-color: @surface0;
         }
 
+        .link,
+        .range-lg {
+          color: @subtext1;
+        }
         .top {
           a,
           .range,
@@ -168,37 +185,43 @@
             color: @subtext1;
           }
         }
-
         .description {
           color: @subtext0;
         }
+        .name-and-metadata {
+          .optional-label, .features-label {
+            color: @subtext0;
+          }
+        }
 
         .release-track {
           background-color: @text;
           color: @base;
         }
-
         .num-link {
           color: @subtext1;
         }
 
         &.latest {
+          &:hover {
+            background-color: fade(@green, 10%);
+          }
           .release-track {
             background-color: @green;
             border-color: @green;
           }
-
           .num-link {
             color: @green;
           }
         }
-
         &.prerelease {
+          &:hover {
+            background-color: fade(@peach, 10%);
+          }
           .release-track {
             background-color: @peach;
             border-color: @peach;
           }
-
           .num-link {
             color: @peach;
           }
@@ -206,8 +229,29 @@
 
         .metadata {
           color: @subtext1;
+          time[role="listitem"].new {
+            color: @peach;
+          }
+          .publisher a:hover {
+            color: @text;
+          }
         }
       }
+
+      .viewer file-tree-container {
+        --trees-search-bg: @mantle;
+        --trees-search-fg: @text;
+        --trees-border-color: @mantle;
+        --trees-bg: @base;
+        --trees-fg: @subtext0;
+        --trees-selected-fg: @text;
+        --trees-fg-muted: @subtext0;
+        --trees-accent: @accent;
+      }
+
+      .no-results {
+        background-color: @base;
+      }
     }
 
     .notification {
@@ -227,7 +271,6 @@
       button.submit-button .icon {
         background-color: @base;
       }
-
       .input-lg {
         background-color: @mantle;
       }
@@ -245,7 +288,6 @@
       .icon {
         background-color: @subtext0;
       }
-
       .label {
         color: @subtext0;
       }
@@ -284,7 +326,6 @@
             background-color: @base;
             color: @subtext1;
           }
-
           .icon {
             background-color: @accent;
           }
@@ -295,7 +336,6 @@
         .icon {
           background-color: @accent;
         }
-
         .feed-row {
           background-color: @base;
           border-color: @mantle;
@@ -312,5 +352,30 @@
       background-color: @base;
       border-color: @surface1;
     }
+
+    .list .link.active:hover {
+      background-color: fade(@base, 60%);
+    }
+
+    .form-group {
+      .form-group-error {
+        color: @red;
+      }
+      .scopes-list {
+        &.invalid {
+          border-color: @red;
+        }
+        li {
+          background-color: @base;
+          color: @text;
+        }
+      }
+      .crates-unrestricted, .crates-pattern-button {
+        background-color: @base;
+      }
+      .icon {
+        color: @subtext0;
+      }
+    }
   }
 }

From 8a6208fd1bcc022eb58a265097760c825b4d1d82 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Fri, 7 Aug 2026 21:54:06 +0100
Subject: [PATCH 04/11] fix(crates.io): theme unstyled areas and add comments

---
 styles/crates.io/catppuccin.user.less | 187 +++++++++++++++++---------
 1 file changed, 126 insertions(+), 61 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index f7c25e9c16..0c7c99ba5e 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -20,6 +20,7 @@
   :root[data-color-scheme="dark"] {
     #catppuccin(@darkFlavor);
   }
+
   :root[data-color-scheme="light"] {
     #catppuccin(@lightFlavor);
   }
@@ -29,6 +30,11 @@
     #lib.defaults();
     #lib.css-variables();
 
+    :focus-visible {
+      outline-color: @accent;
+      outline-style: solid;
+    }
+
     @layer global {
       --main-bg: @mantle;
       --main-bg-dark: @base;
@@ -40,7 +46,9 @@
 
       --gray-border: @surface2;
 
-      --header-bg-color: @base;
+      --header-bg-color: if(@flavor =latte,
+          @text,
+          @base );
 
       --yellow500: @accent;
       --yellow700: darken(@accent, 5%);
@@ -56,6 +64,7 @@
         --bg-color-top-dark: darken(@accent, 5%);
         --bg-color-bottom-dark: darken(@accent, 5%);
       }
+
       .button--red {
         --bg-color-top: @maroon;
         --bg-color-bottom: @maroon;
@@ -64,20 +73,20 @@
         --bg-color-top-dark: @red;
         --bg-color-bottom-dark: @red;
       }
-      :focus-visible {
-        outline-color: @accent;
-        outline-style: solid;
-      }
+
       input[type="checkbox"] {
         accent-color: @accent;
       }
+
       input[type="text"] {
         background-color: @base;
         color: @text;
+
         &[aria-invalid="true"] {
           border-color: @red;
         }
       }
+
       select {
         background-color: @base;
         color: @text;
@@ -87,45 +96,51 @@
     .tooltip {
       background-color: @mantle;
       color: @text;
+
       .rt-latest {
         color: @green;
       }
+
       .new {
         color: @peach;
       }
     }
 
-    nav {
-      .login-button {
-        color: @text;
-      }
-      .color-scheme-menu .icon {
-        background-color: if((@flavor = latte), @base, @text);
-      }
-    }
-
-    footer {
-      ul li a {
-        color: @text;
-      }
-    }
-
     .dropdown ul {
       background-color: @base;
       border-color: @surface1;
+
       li {
+
         a:hover,
         button:hover,
         button.selected {
           background-color: @surface0;
           color: @text !important;
         }
+
         .icon {
           background-color: @text;
         }
       }
     }
 
+    nav {
+      .login-button {
+        color: @text;
+      }
+
+      .color-scheme-menu .icon {
+        background-color: if((@flavor =latte), @base, @text);
+      }
+    }
+
+    footer {
+      ul li a {
+        color: @text;
+      }
+    }
+
     /* Crates List */
     .results-meta .sort-dropdown {
       .icon {
@@ -134,28 +149,22 @@
     }
 
     .crate-row {
-      --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
+      --shadow: none;
       background-color: @base;
     }
 
     /* Crates */
     .main {
+
+      // Crates - README
       .header,
       .docs {
-        --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
+        --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
         background-color: @base;
       }
 
-      .viewer {
-        .code {
-          diffs-container {
-            --diffs-light-bg: @surface0;
-            --diffs-dark-bg: @surface0;
-          }
-        }
-      }
-
       .wrapper {
+
         p code,
         li code {
           background-color: @surface0 !important;
@@ -168,36 +177,47 @@
           background-color: @text;
         }
       }
-      [role="list"] .row, .list .row {
+
+      // Crates - Code
+      .viewer {
+        .code {
+          diffs-container {
+            --diffs-light-bg: @surface0;
+            --diffs-dark-bg: @surface0;
+          }
+        }
+      }
+
+      .viewer file-tree-container {
+        --trees-search-bg: @mantle;
+        --trees-search-fg: @text;
+        --trees-border-color: @mantle;
+        --trees-bg: @base;
+        --trees-fg: @subtext0;
+        --trees-selected-fg: @text;
+        --trees-fg-muted: @subtext0;
+        --trees-accent: @accent;
+      }
+
+      // Crates - Versions, Dependencies, Dependents
+      [role="list"] .row,
+      .list .row {
         background-color: @base;
+
         &:hover {
           background-color: @surface0;
         }
 
-        .link,
-        .range-lg {
-          color: @subtext1;
-        }
-        .top {
-          a,
-          .range,
-          .downloads {
-            color: @subtext1;
-          }
-        }
         .description {
           color: @subtext0;
         }
-        .name-and-metadata {
-          .optional-label, .features-label {
-            color: @subtext0;
-          }
-        }
 
+        // Versions
         .release-track {
           background-color: @text;
           color: @base;
         }
+
         .num-link {
           color: @subtext1;
         }
@@ -206,22 +226,27 @@
           &:hover {
             background-color: fade(@green, 10%);
           }
+
           .release-track {
             background-color: @green;
             border-color: @green;
           }
+
           .num-link {
             color: @green;
           }
         }
+
         &.prerelease {
           &:hover {
             background-color: fade(@peach, 10%);
           }
+
           .release-track {
             background-color: @peach;
             border-color: @peach;
           }
+
           .num-link {
             color: @peach;
           }
@@ -229,24 +254,49 @@
 
         .metadata {
           color: @subtext1;
+
           time[role="listitem"].new {
             color: @peach;
           }
+
           .publisher a:hover {
             color: @text;
           }
         }
+
+        // Dependencies
+        .link,
+        .range-lg {
+          color: @subtext1;
+        }
+
+        .name-and-metadata {
+
+          .optional-label,
+          .features-label {
+            color: @subtext0;
+          }
+        }
+
+        // Dependents
+        .top {
+
+          a,
+          .range,
+          .downloads {
+            color: @subtext1;
+          }
+        }
       }
 
-      .viewer file-tree-container {
-        --trees-search-bg: @mantle;
-        --trees-search-fg: @text;
-        --trees-border-color: @mantle;
-        --trees-bg: @base;
-        --trees-fg: @subtext0;
-        --trees-selected-fg: @text;
-        --trees-fg-muted: @subtext0;
-        --trees-accent: @accent;
+      // Crate - Security
+      .advisories .row {
+        background-color: @base;
+
+        .affected-versions {
+          border-color: @peach;
+          background-color: @mantle;
+        }
       }
 
       .no-results {
@@ -271,12 +321,13 @@
       button.submit-button .icon {
         background-color: @base;
       }
+
       .input-lg {
         background-color: @mantle;
       }
 
-      & when (@flavor = latte) {
-        background-color: @text;
+      .hero-title {
+        color: @text;
       }
     }
 
@@ -288,13 +339,14 @@
       .icon {
         background-color: @subtext0;
       }
+
       .label {
         color: @subtext0;
       }
     }
 
     .box {
-      --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
+      --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
       background-color: @surface0;
       color: @text;
 
@@ -320,12 +372,14 @@
 
     .my-info {
       .my-crate-lists {
+
         .section-header,
         .list {
           .link {
             background-color: @base;
             color: @subtext1;
           }
+
           .icon {
             background-color: @accent;
           }
@@ -336,6 +390,7 @@
         .icon {
           background-color: @accent;
         }
+
         .feed-row {
           background-color: @base;
           border-color: @mantle;
@@ -361,21 +416,31 @@
       .form-group-error {
         color: @red;
       }
+
       .scopes-list {
         &.invalid {
           border-color: @red;
         }
+
         li {
           background-color: @base;
           color: @text;
         }
       }
-      .crates-unrestricted, .crates-pattern-button {
+
+      .crates-unrestricted,
+      .crates-pattern-button {
         background-color: @base;
       }
+
       .icon {
         color: @subtext0;
       }
     }
+
+    /* Owner Invites */
+    .list:has(p) {
+      background-color: @base;
+    }
   }
 }

From 634f6c5a4267e7635f376e86292e11f8071ff241 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Sat, 8 Aug 2026 12:02:25 +0100
Subject: [PATCH 05/11] fix(crates.io): .no-result background to @mantle
 instead of @base

---
 styles/crates.io/catppuccin.user.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 0c7c99ba5e..e9e3c6f2e4 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -300,7 +300,7 @@
       }
 
       .no-results {
-        background-color: @base;
+        background-color: @mantle;
       }
     }
 

From 2da3d679a5a7285a197baf78fc72f2758d8e80a6 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Sat, 8 Aug 2026 12:06:04 +0100
Subject: [PATCH 06/11] fix(crates.io): change code preview bg, style
 .index-link

---
 styles/crates.io/catppuccin.user.less | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index e9e3c6f2e4..eb621aaa87 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -182,8 +182,8 @@
       .viewer {
         .code {
           diffs-container {
-            --diffs-light-bg: @surface0;
-            --diffs-dark-bg: @surface0;
+            --diffs-light-bg: @base;
+            --diffs-dark-bg: @base;
           }
         }
       }
@@ -326,7 +326,7 @@
         background-color: @mantle;
       }
 
-      .hero-title {
+      .hero-title, .index-link {
         color: @text;
       }
     }

From b87a1a24d3b4f0f14cf75f005d49a8ba4c2f7a97 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Sun, 9 Aug 2026 10:37:46 +0100
Subject: [PATCH 07/11] fix(crates.io): change .list:has(p) to div.list

---
 styles/crates.io/catppuccin.user.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index eb621aaa87..80a2c9e816 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -439,7 +439,7 @@
     }
 
     /* Owner Invites */
-    .list:has(p) {
+    div.list {
       background-color: @base;
     }
   }

From 9f9669c2771d89fc158bd1d8ab078857b064a4a6 Mon Sep 17 00:00:00 2001
From: leah <uncenter@uncenter.dev>
Date: Thu, 20 Aug 2026 14:13:27 -0500
Subject: [PATCH 08/11] fix(crates.io): header text, homepage-related

---
 styles/crates.io/catppuccin.user.less | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 1e076330a5..743155d7be 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -318,16 +318,16 @@
     }
 
     /* Homepage */
-    header {
+    .header-inner {
       button.submit-button .icon {
         background-color: @base;
       }
 
-      .input-lg {
+      .input-lg, .input-sm {
         background-color: @mantle;
       }
 
-      .hero-title, .index-link {
+      &, .hero-title, .index-link {
         color: @text;
       }
     }

From 2f6cd1a029b90629fc65d5cd3854318265e375d4 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Fri, 21 Aug 2026 11:37:26 +0100
Subject: [PATCH 09/11] fix(crates.io): light mode hero-title & index-link
 colors

---
 styles/crates.io/catppuccin.user.less | 25 ++++++++++---------------
 1 file changed, 10 insertions(+), 15 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 743155d7be..2cfb8f19c4 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -47,9 +47,7 @@
 
       --gray-border: @surface2;
 
-      --header-bg-color: if(@flavor =latte,
-          @text,
-          @base );
+      --header-bg-color: if(@flavor = latte, @text, @base);
 
       --yellow500: @accent;
       --yellow700: darken(@accent, 5%);
@@ -112,7 +110,6 @@
       border-color: @surface1;
 
       li {
-
         a:hover,
         button:hover,
         button.selected {
@@ -132,7 +129,7 @@
       }
 
       .color-scheme-menu .icon {
-        background-color: if((@flavor =latte), @base, @text);
+        background-color: if((@flavor = latte), @base, @text);
       }
     }
 
@@ -156,16 +153,14 @@
 
     /* Crates */
     .main {
-
       // Crates - README
       .header,
       .docs {
-        --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+        --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
         background-color: @base;
       }
 
       .wrapper {
-
         p code,
         li code {
           background-color: @surface0 !important;
@@ -272,7 +267,6 @@
         }
 
         .name-and-metadata {
-
           .optional-label,
           .features-label {
             color: @subtext0;
@@ -281,7 +275,6 @@
 
         // Dependents
         .top {
-
           a,
           .range,
           .downloads {
@@ -323,12 +316,15 @@
         background-color: @base;
       }
 
-      .input-lg, .input-sm {
+      .input-lg,
+      .input-sm {
         background-color: @mantle;
       }
 
-      &, .hero-title, .index-link {
-        color: @text;
+      &,
+      .hero-title,
+      .index-link {
+        color: if((@flavor = latte), @base, @text);
       }
     }
 
@@ -347,7 +343,7 @@
     }
 
     .box {
-      --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+      --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
       background-color: @surface0;
       color: @text;
 
@@ -373,7 +369,6 @@
 
     .my-info {
       .my-crate-lists {
-
         .section-header,
         .list {
           .link {

From 60c84d6e9fb0745dbffd95a6a315ba78352a4f54 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Fri, 21 Aug 2026 11:50:02 +0100
Subject: [PATCH 10/11] fix(crates.io): footer light mode links colors

---
 styles/crates.io/catppuccin.user.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 2cfb8f19c4..cc1fc10961 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -135,7 +135,7 @@
 
     footer {
       ul li a {
-        color: @text;
+        color: if((@flavor = latte), @base, @text);
       }
     }
 

From 882624275d8b5a979d360770d5483c7ff1fedd05 Mon Sep 17 00:00:00 2001
From: nuexq <nuexqq@gmail.com>
Date: Fri, 21 Aug 2026 12:10:43 +0100
Subject: [PATCH 11/11] fix(crates.io): adding --main-shadow-color

---
 styles/crates.io/catppuccin.user.less | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index cc1fc10961..525d04fe00 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -41,6 +41,10 @@
       --main-bg-dark: @base;
       --main-color: @text;
       --main-color-light: @subtext1;
+      --main-shadow-color: var(--lightningcss-light, @text) var(
+        --lightningcss-dark,
+        @base
+      );
 
       --link-color: @accent;
       --link-hover-color: lighten(@accent, 5%);
@@ -147,7 +151,7 @@
     }
 
     .crate-row {
-      --shadow: none;
+      --shadow: 0 1px 3px var(--main-shadow-color);
       background-color: @base;
     }
 
@@ -156,7 +160,7 @@
       // Crates - README
       .header,
       .docs {
-        --shadow: 0 2px 3px if((@flavor = latte), @surface2, @surface0);
+        --shadow: 0 2px 3px if((@flavor = latte), @surface2, @base);
         background-color: @base;
       }
 
@@ -316,14 +320,12 @@
         background-color: @base;
       }
 
-      .input-lg,
-      .input-sm {
+      .input-lg, .input-sm {
         background-color: @mantle;
+        box-shadow: 1px 2px 4px 0 var(--main-shadow-color);
       }
 
-      &,
-      .hero-title,
-      .index-link {
+      &, .hero-title, .index-link {
         color: if((@flavor = latte), @base, @text);
       }
     }