diff --git a/styles/crates.io/catppuccin.user.less b/styles/crates.io/catppuccin.user.less
index 3a441a2815..1e076330a5 100644
--- a/styles/crates.io/catppuccin.user.less
+++ b/styles/crates.io/catppuccin.user.less
@@ -18,24 +18,10 @@
 @import "https://userstyles.catppuccin.com/lib/std/v1.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 +31,417 @@
     #lib.defaults();
     #lib.css-variables();
 
-    &,
-    * {
-      --shadow: none !important;
-      --csstools-color-scheme--dark: none;
+    :focus-visible {
+      outline-color: @accent;
+      outline-style: solid;
+    }
 
-      --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: if(@flavor =latte,
+          @text,
+          @base );
+
       --yellow500: @accent;
       --yellow700: 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 {
+        --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%);
+      }
+
+      .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;
+      }
+
+      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;
+      }
     }
 
-    /* Toasts */
-    .c-notification {
-      --ecn-green: @green;
-      --ecn-blue: @blue;
-      --ecn-orange: @peach;
-      --ecn-red: @red;
+    .dropdown ul {
+      background-color: @base;
+      border-color: @surface1;
+
+      li {
 
-      &,
-      .c-notification__icon {
-        color: @crust;
+        a:hover,
+        button:hover,
+        button.selected {
+          background-color: @surface0;
+          color: @text !important;
+        }
+
+        .icon {
+          background-color: @text;
+        }
       }
     }
 
-    /* Tooltips */
-    .ember-tooltip {
-      color: @text;
-      background-color: @crust;
-      text-shadow: none;
+    nav {
+      .login-button {
+        color: @text;
+      }
 
-      &[x-placement^="top"] .ember-tooltip-arrow {
-        border-top-color: @crust;
+      .color-scheme-menu .icon {
+        background-color: if((@flavor =latte), @base, @text);
       }
     }
 
-    /* Icons and icon badges */
-    [class*="downloads_"] [fill="#FFF"] {
-      fill: @surface0 !important;
+    footer {
+      ul li a {
+        color: @text;
+      }
     }
-    [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: none;
+      background-color: @base;
     }
 
-    /* Footer links */
-    ._content_hautyr {
-      h1 {
-        text-shadow: none;
+    /* Crates */
+    .main {
+
+      // Crates - README
+      .header,
+      .docs {
+        --shadow: 0 2px 3px if((@flavor =latte), @surface2, @surface0);
+        background-color: @base;
       }
 
-      a {
-        color: @accent;
+      .wrapper {
+
+        p code,
+        li code {
+          background-color: @surface0 !important;
+        }
+      }
+
+      .crate-downloads {
+        .stat-icon {
+          color: @mantle;
+          background-color: @text;
+        }
+      }
+
+      // Crates - Code
+      .viewer {
+        .code {
+          diffs-container {
+            --diffs-light-bg: @base;
+            --diffs-dark-bg: @base;
+          }
+        }
+      }
+
+      .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 {
-          color: darken(@accent, 5%);
-          text-shadow: none;
+          background-color: @surface0;
+        }
+
+        .description {
+          color: @subtext0;
+        }
+
+        // Versions
+        .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;
+          }
+        }
+
+        .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;
+          }
         }
       }
-    }
 
-    /* Misc header text */
-    [class*="_header-inner_"] {
-      &,
-      a {
-        color: @text;
+      // Crate - Security
+      .advisories .row {
+        background-color: @base;
+
+        .affected-versions {
+          border-color: @peach;
+          background-color: @mantle;
+        }
       }
-    }
 
-    /* Search bar magnifying glass icon */
-    form[action="/search"] button {
-      color: @crust;
+      .no-results {
+        background-color: @mantle;
+      }
     }
 
-    /* Sort by search results */
-    ._icon_xsqxju {
-      color: @accent;
+    .notification {
+      color: @base;
+
+      .notification__icon {
+        color: @base;
+      }
+
+      .notification--success {
+        background-color: @green;
+      }
     }
 
-    /* Primary buttons */
-    [class*="_tan-button_"],
-    [class*="_yellow-button_"] {
-      color: @crust !important;
-      background: @accent;
+    /* Homepage */
+    header {
+      button.submit-button .icon {
+        background-color: @base;
+      }
 
-      &:hover {
-        background-color: darken(@accent, 5%);
+      .input-lg {
+        background-color: @mantle;
+      }
+
+      .hero-title, .index-link {
+        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;
+
+      .subtitle,
+      .icon {
+        color: @subtext1;
+      }
+
+      .version,
+      .downloads {
+        color: @subtext0;
+      }
+
+      &:hover {
+        background-color: @surface1;
+      }
     }
-    [class*="_hero-button_"] [class*="_icon_"] {
-      color: @crust;
+
+    /* Dashboard */
+    .page-header-content .stats .downloads .icon {
+      background-color: @accent;
     }
-    [class*="_blurb_"] [class*="_stats-value_"] {
-      [class*="_label_"],
-      svg {
-        color: @subtext0;
+
+    .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;
+        }
       }
     }
 
-    /* User avatar backgrounds */
-    [class*="_avatar_"] {
-      background-color: @surface0;
-      box-shadow: none;
+    /* Account Settings */
+    .verified {
+      color: @green;
     }
 
-    [class*="_yanked-badge_"] {
-      background-color: @red;
-      color: @crust;
+    .empty-state {
+      background-color: @base;
+      border-color: @surface1;
     }
 
-    /* Tables in READMEs */
-    table {
-      th,
-      td {
-        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;
+      }
+    }
+
+    /* Owner Invites */
+    div.list {
+      background-color: @base;
     }
   }
 }