diff --git a/scripts/userstyles.yml b/scripts/userstyles.yml
index 58432a92a1..56f428fb49 100644
--- a/scripts/userstyles.yml
+++ b/scripts/userstyles.yml
@@ -705,6 +705,14 @@ userstyles:
     readme:
       app-link: "https://minesweeper.online"
     current-maintainers: []
+  myanimelist:
+    name: MyAnimeList
+    categories: [entertainment, social_networking]
+    icon: myanimelist
+    color: sapphire
+    readme:
+      app-link: "https://myanimelist.net"
+    current-maintainers: [*orangci]
   namemc:
     name: NameMC
     categories: [game_development, analytics, discussion_forum]
@@ -1091,4 +1099,4 @@ userstyles:
           answer: "It's available in case you have an OLED display. If you have one, you might want to enable this."
     current-maintainers: [*isabelroses, *uncenter]
     past-maintainers: [*elkrien]
-# yaml-language-server: $schema=userstyles.schema.json
+# yaml-language-server: $schema=userstyles.schema.json
\ No newline at end of file
diff --git a/styles/myanimelist/catppuccin.user.css b/styles/myanimelist/catppuccin.user.css
new file mode 100644
index 0000000000..6ec4f1d80c
--- /dev/null
+++ b/styles/myanimelist/catppuccin.user.css
@@ -0,0 +1,2345 @@
+/* ==UserStyle==
+@name MyAnimeList Catppuccin
+@namespace github.com/catppuccin/userstyles/styles/myanimelist
+@homepageURL https://github.com/catppuccin/userstyles/tree/main/styles/myanimelist
+@version 0.0.1
+@updateURL https://github.com/catppuccin/userstyles/raw/main/styles/myanimelist/catppuccin.user.css
+@supportURL https://github.com/catppuccin/userstyles/issues?q=is%3Aopen+is%3Aissue+label%3Amyanimelist
+@description Soothing pastel theme for MyAnimeList
+@author Catppuccin
+@license MIT
+
+@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== */
+
+/* Exclude animelist and mangalist pages */
+@-moz-document regexp("^(.*myanimelist\.net/(?!(animelist|mangalist)).*)") {
+  @media (prefers-color-scheme: light) {
+    :root {
+      #catppuccin(@lightFlavor, @accentColor);
+    }
+  }
+  @media (prefers-color-scheme: dark) {
+    :root {
+      #catppuccin(@darkFlavor, @accentColor);
+    }
+  }
+
+  #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];
+    @blue: @catppuccin[@@lookup][@blue];
+    @sapphire: @catppuccin[@@lookup][@sapphire];
+    @sky: @catppuccin[@@lookup][@sky];
+    @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];
+    @accent-color: @catppuccin[@@lookup][@@accent];
+
+    @rosewater-filter: @catppuccin-filters[@@lookup][@rosewater];
+    @flamingo-filter: @catppuccin-filters[@@lookup][@flamingo];
+    @pink-filter: @catppuccin-filters[@@lookup][@pink];
+    @mauve-filter: @catppuccin-filters[@@lookup][@mauve];
+    @red-filter: @catppuccin-filters[@@lookup][@red];
+    @maroon-filter: @catppuccin-filters[@@lookup][@maroon];
+    @peach-filter: @catppuccin-filters[@@lookup][@peach];
+    @yellow-filter: @catppuccin-filters[@@lookup][@yellow];
+    @green-filter: @catppuccin-filters[@@lookup][@green];
+    @teal-filter: @catppuccin-filters[@@lookup][@teal];
+    @sky-filter: @catppuccin-filters[@@lookup][@sky];
+    @sapphire-filter: @catppuccin-filters[@@lookup][@sapphire];
+    @blue-filter: @catppuccin-filters[@@lookup][@blue];
+    @lavender-filter: @catppuccin-filters[@@lookup][@lavender];
+    @text-filter: @catppuccin-filters[@@lookup][@text];
+    @subtext1-filter: @catppuccin-filters[@@lookup][@subtext1];
+    @subtext0-filter: @catppuccin-filters[@@lookup][@subtext0];
+    @overlay2-filter: @catppuccin-filters[@@lookup][@overlay2];
+    @overlay1-filter: @catppuccin-filters[@@lookup][@overlay1];
+    @overlay0-filter: @catppuccin-filters[@@lookup][@overlay0];
+    @surface2-filter: @catppuccin-filters[@@lookup][@surface2];
+    @surface1-filter: @catppuccin-filters[@@lookup][@surface1];
+    @surface0-filter: @catppuccin-filters[@@lookup][@surface0];
+    @base-filter: @catppuccin-filters[@@lookup][@base];
+    @mantle-filter: @catppuccin-filters[@@lookup][@mantle];
+    @crust-filter: @catppuccin-filters[@@lookup][@crust];
+    @accent-color-filter: @catppuccin-filters[@@lookup][@@accent];
+
+    --color-text-light: if((@lookup = latte), @mantle, @text);
+    --color-text-dark: if((@lookup = latte), @text, @mantle);
+
+    --color-accent-background: if(
+      (@lookup = latte),
+      desaturate(lighten(@accent-color, 5%), 0%),
+      desaturate(darken(@accent-color, 24%), 20%)
+    );
+    --color-accent-background-hover: if(
+      (@lookup = latte),
+      desaturate(lighten(@accent-color, 10%), 0%),
+      desaturate(darken(@accent-color, 15%), 10%)
+    );
+
+    --color-red-background: if(
+      (@lookup = latte),
+      desaturate(lighten(@red, 5%), 0%),
+      desaturate(darken(@red, 24%), 20%)
+    );
+
+    --color-recommended: desaturate(@blue, 30%);
+    --color-mixed-feelings: @subtext0;
+    --color-not-recommended: @maroon;
+
+    --color-watching: if(
+      (@lookup = latte),
+      desaturate(darken(@green, 3%), 5%),
+      desaturate(darken(@green, 35%), 20%)
+    );
+    --color-completed: if(
+      (@lookup = latte),
+      desaturate(darken(@blue, 12%), 40%),
+      desaturate(darken(@blue, 38%), 40%)
+    );
+    --color-on-hold: if(
+      (@lookup = latte),
+      desaturate(lighten(@yellow, 9%), 8%),
+      desaturate(darken(@yellow, 30%), 30%)
+    );
+    --color-dropped: if(
+      (@lookup = latte),
+      desaturate(darken(@red, 2%), 30%),
+      desaturate(darken(@red, 35%), 20%)
+    );
+    --color-plan-to-watch: if(
+      (@lookup = latte),
+      desaturate(lighten(@subtext0, 2%), 20%),
+      desaturate(darken(@subtext0, 21%), 20%)
+    );
+
+    /* General */
+
+    color-scheme: if(@lookup = latte, light, dark);
+
+    ::selection {
+      background-color: fade(@accent-color, 30%);
+    }
+
+    body {
+      // STYLE: @crust looks cool, but it may be too much
+      background-color: @mantle !important;
+
+      & > div {
+        color: @text;
+      }
+    }
+
+    a:link,
+    a:visited {
+      color: @accent-color !important;
+    }
+
+    input,
+    textarea {
+      &::placeholder {
+        color: @subtext0 !important;
+      }
+    }
+
+    .page-common {
+      .fn-grey1 {
+        color: @subtext0 !important;
+      }
+      .fn-grey2 {
+        color: @subtext1 !important;
+      }
+      .fn-grey4 {
+        color: @subtext0 !important;
+      }
+      .dark_text {
+        color: @subtext0;
+      }
+
+      .normal_header {
+        color: @text;
+        border-color: @surface1;
+      }
+      .textarea,
+      .inputtext {
+        color: @text;
+        background-color: @surface0;
+        border-color: @surface0;
+      }
+
+      // your list is public warning
+      .notice_open_public {
+        color: @red;
+      }
+
+      .border_bottom {
+        border-bottom-color: @surface0;
+      }
+
+      .goodresult {
+        background-color: @surface0 !important;
+        border-color: @surface1 !important;
+      }
+
+      .h3_anime_subtitle {
+        color: @subtext0;
+      }
+
+      // image borders
+      div.picSurround img {
+        background-color: @crust;
+        border-color: @crust;
+      }
+
+      #gdpr-modal-bottom {
+        background: @surface0;
+        .modal-wrapper {
+          border-color: transparent;
+          .modal-container {
+            color: @text;
+            background-color: @surface1;
+            button[data-v-53da086b] {
+              background-color: var(--color-accent-background);
+            }
+          }
+        }
+      }
+
+      a.button_add.button_add {
+        background-color: @surface0;
+        border-color: transparent;
+      }
+    }
+
+    .wrok-graph-inner.reading,
+    .wrok-graph-inner.watching {
+      background-color: @green !important;
+    }
+    .wrok-graph-inner.on_hold {
+      background-color: @yellow !important;
+    }
+    .wrok-graph-inner.completed {
+      background-color: @blue !important;
+    }
+    .work-graph {
+      background-color: @overlay0 !important;
+    }
+    .wrok-graph-inner.dropped {
+      background-color: @red !important;
+    }
+
+    .work-status-num.watching,
+    .work-status-num.reading {
+      color: @green !important;
+    }
+    .work-status-num.on_hold {
+      color: @yellow !important;
+    }
+    .work-status-num.completed {
+      color: @blue !important;
+    }
+    .work-status-num.dropped {
+      color: @red !important;
+    }
+
+    .icon-watch2 .malicon.malicon-movie-episode {
+      color: @accent-color;
+    }
+
+    .mal-alert.secondary {
+      color: @text;
+      background-color: @surface0;
+    }
+
+    .news-list .news-unit {
+      border-bottom-color: @surface0;
+      .information {
+        .info {
+          color: @subtext0 !important;
+        }
+        .pv {
+          color: @subtext0;
+          border-left-color: @surface1;
+        }
+        .tags .tag {
+          border-left-color: @surface1;
+        }
+      }
+    }
+
+    // Episode Discussion popup
+    .mal-modal .mal-modal-dialog .mal-modal-content {
+      color: @text;
+      background-color: @base;
+      border-color: @surface1;
+
+      button.btn-close {
+        color: @text;
+      }
+
+      .mal-modal-header {
+        border-bottom-color: @surface0;
+      }
+
+      .mal-modal-body {
+        background-color: @surface0 !important;
+        .modal-vote-score-label .caution {
+          color: @red;
+        }
+        .modal-vote-score li a {
+          color: @text !important;
+          background-color: @surface1;
+          border-color: transparent !important;
+          &:hover {
+            color: var(--color-text-light) !important;
+            background-color: var(--color-accent-background-hover);
+          }
+        }
+        .modal-vote-reply {
+          background-color: @surface0;
+          border-color: transparent;
+          .textarea {
+            background-color: @surface1;
+            border-color: @surface1;
+          }
+        }
+        button.mal-btn.primary {
+          color: var(--color-text-light);
+          background-color: var(--color-accent-background);
+          border-color: var(--color-accent-background);
+          &:hover {
+            background-color: var(--color-accent-background-hover);
+            border-color: var(--color-accent-background-hover);
+          }
+        }
+        button.mal-btn.primary.outline {
+          color: @text;
+          background-color: @surface1;
+          border-color: @surface1;
+          &:hover {
+            background-color: @surface2;
+            border-color: @surface2;
+          }
+        }
+        button.mal-btn.primary.outline.noborder {
+          color: @accent-color;
+          background-color: transparent;
+          border-color: transparent;
+          &:hover {
+            background-color: @surface1;
+            border-color: @surface1;
+          }
+        }
+        .modal-vote-score-footer a:hover {
+          background-color: @surface1;
+        }
+        .modal-vote-replies {
+          color: @subtext0;
+        }
+      }
+    }
+
+    /* Headers */
+
+    // top header
+    #headerSmall {
+      background-color: transparent !important;
+      background-image: none !important;
+
+      // need to move logo here so the filter doesn't affect everything
+      .link-mal-logo {
+        filter: @text-filter;
+        background-image: url(/images/mal-logo-xsmall-white@2x.png?v=1634263200);
+        background-size: auto 32px;
+        background-repeat: no-repeat;
+      }
+      &.christmas .link-mal-logo {
+        // change white to black, keep colors
+        filter: if((@lookup = latte), invert(1) hue-rotate(170deg) brightness(80%), none);
+        background-image: url(/images/event/2023_christmas/logo_dark.png?v=1634263200);
+        background-size: auto 30px;
+        background-repeat: no-repeat;
+      }
+
+      // icons
+      .fa-solid {
+        color: @subtext1;
+      }
+      #header-menu {
+        .btn-mal-service {
+          color: @accent-color !important;
+        }
+        .btn-login {
+          color: @text !important;
+          background-color: @surface0 !important;
+        }
+        .btn-signup {
+          color: var(--color-text-light) !important;
+          background-color: var(--color-accent-background) !important;
+        }
+        .border::before {
+          border-left-color: @surface0;
+        }
+      }
+      .header-menu-unit.header-profile {
+        background-color: transparent;
+        .header-profile-link {
+          color: @text;
+        }
+        .header-profile-button {
+          background-color: transparent;
+          box-shadow: transparent 0 0 0 1px inset;
+        }
+      }
+
+      .header-list-dropdown {
+        ul li a {
+          color: @text !important;
+          background-color: @base;
+          &:hover {
+            color: @crust !important;
+            background-color: @text !important;
+          }
+        }
+      }
+
+      .header-notification-dropdown {
+        .arrow_box {
+          background-color: @mantle;
+          border-color: @surface0;
+        }
+
+        h3 {
+          border-bottom-color: @surface0;
+          .mark-all {
+            color: @accent-color;
+            .fa-solid {
+              color: @accent-color;
+            }
+          }
+          .mark-all.disabled {
+            color: @surface2;
+            .fa-solid {
+              color: @surface2;
+            }
+          }
+          .settings .fa-solid {
+            color: @accent-color;
+          }
+        }
+        .header-notification-item {
+          border-bottom-color: @surface0;
+          &:hover {
+            background-color: transparent;
+          }
+          &.new {
+            background-color: @surface0;
+            .is-read .fa-check {
+              color: @subtext0;
+            }
+            .is-read .fa-circle-check {
+              color: @accent-color;
+            }
+            .category {
+              color: @text;
+            }
+            .time {
+              color: @subtext0;
+            }
+          }
+          .inner.is-read {
+            color: @overlay1;
+            .category {
+              color: @overlay1;
+            }
+            .time {
+              color: @overlay1;
+            }
+            .message {
+              color: @overlay1;
+            }
+          }
+        }
+        .header-notification-view-all a {
+          color: @text !important;
+          background-color: @surface0;
+          border-top-color: @surface1;
+        }
+      }
+    }
+
+    // colorful header
+    #menu {
+      // STYLE: this is quite bright, can be kinda hard to read especially on Rosewater, but it looks pretty good
+      color: var(--color-text-light) !important;
+      background-color: var(--color-accent-background) !important;
+
+      // STYLE: Removes Christmas header
+      //background-image: none !important;
+      #menu_left {
+        //background-image: none !important;
+      }
+
+      a:link,
+      a:visited {
+        // STYLE: could be --color-text-dark if unreadable
+        color: var(--color-text-light) !important;
+      }
+
+      // sections when hovered
+      #nav li.hover a {
+        color: @text !important;
+        background-color: @base !important;
+      }
+      // hover popup options
+      #nav ul li a {
+        color: @text !important;
+        background-color: @base;
+        &:hover {
+          color: @mantle !important;
+          background-color: var(--color-accent-background-hover) !important;
+        }
+      }
+
+      // search bar
+      .inputtext {
+        color: @text !important;
+        background-color: @base !important;
+        border-color: @surface0 !important; // not exactly correct I don't think
+      }
+      // yes this is mispelled
+      #topSearchButon {
+        background-color: @surface0 !important;
+        border-color: @surface0 !important; // not exactly correct I don't think
+
+        color: @text !important;
+        &.notActive {
+          color: @subtext0 !important;
+        }
+      }
+    }
+
+    .h1 {
+      color: @text !important;
+      background-color: @base !important; // should be surface0 but I don't think it looks good
+      border-color: @surface0 !important;
+      border-bottom-color: @surface1 !important;
+      .title-english {
+        color: @overlay1 !important;
+      }
+    }
+
+    // changes space between content and footer
+    #contentWrapper {
+      background-color: transparent !important;
+    }
+
+    .header-menu-dropdown * {
+      background-color: @surface0 !important;
+    }
+    .header-menu-dropdown *:hover {
+      background-color: @surface1 !important;
+    }
+
+    /* Content */
+
+    #content {
+      background-color: @base !important;
+      border-color: @surface0 !important;
+
+      /* Basic Shared settings */
+
+      // report button
+      .fa-ellipsis-h {
+        color: @overlay1;
+        &:hover {
+          color: @accent-color;
+        }
+      }
+
+      // on home page and in interest stacks
+      .graph.watching {
+        background-color: var(--color-watching);
+      }
+      .graph.completed {
+        background-color: var(--color-completed);
+      }
+      .graph.on_hold {
+        background-color: var(--color-on-hold);
+      }
+      .graph.dropped {
+        background-color: var(--color-dropped);
+      }
+      .graph.plan_to_watch {
+        background-color: var(--color-plan-to-watch);
+      }
+
+      .graph-inner.watching {
+        background-color: var(--color-watching);
+      }
+      .graph-inner.completed {
+        background-color: var(--color-completed);
+      }
+      .graph-inner.on_hold {
+        background-color: var(--color-on-hold);
+      }
+      .graph-inner.dropped {
+        background-color: var(--color-dropped);
+      }
+      .graph-inner.plan_to_watch {
+        background-color: var(--color-plan-to-watch);
+      }
+
+      .content-left {
+        border-right-color: @surface0;
+      }
+
+      .container-left {
+        border-right-color: @surface0;
+      }
+
+      .left-column {
+        border-color: @surface0;
+      }
+
+      /* Home Page */
+
+      .widget-container {
+        .widget .widget-header {
+          color: @text;
+          border-color: @surface1;
+        }
+
+        .btn-anime {
+          background-color: transparent;
+          border-color: @crust !important;
+          .link {
+            border-color: @crust !important;
+          }
+          .external-link {
+            background-color: transparent !important;
+          }
+        }
+        // TODO: paid episode symbol not themed
+
+        .icon-about-recommendations {
+          color: @accent-color;
+          &::after { // hover tooltip
+            color: @text;
+            background-color: @mantle;
+            border-color: @surface1;
+          }
+        }
+
+        .widget.reviews .item {
+          border-color: @surface0;
+        }
+
+        .widget.my_list_updates .item {
+          border-color: @surface0;
+        }
+
+        // right side
+
+        .widget.my_statistics table td:nth-child(1) {
+          color: @subtext0;
+        }
+        .widget.friend_list_updates {
+          .updated-time {
+            color: @subtext0;
+          }
+          .navi-btn {
+            color: @subtext0;
+          }
+          &.right .item:not(:last-child) {
+            border-bottom-color: @surface0;
+          }
+          .footer {
+            background-color: @surface0;
+            border-top-color: @surface0;
+            .btn-settings {
+              color: @accent-color;
+            }
+          }
+        }
+
+        // STYLE: background is a little strong
+        .ranking-digest {
+          background-color: @surface0;
+          .ranking-header {
+            background-color: @surface1;
+            border-color: transparent;
+          }
+          .ranking-unit {
+            .rank,
+            .info,
+            .members {
+              color: @subtext0;
+            }
+            .data a.button_add.button_add {
+              background-color: @surface1;
+            }
+          }
+        }
+      }
+
+      // TODO: hover popups on home page are not themed
+
+      /* Profile */
+
+      .user-profile {
+        // Buttons below profile picture
+        // STYLE: the colors of these really could be whatever
+        .icon-user-function {
+          background-color: @crust;
+          border-color: @surface0 !important;
+          // icon color
+          i.fas {
+            color: @subtext0;
+          }
+
+          &:hover {
+            background-color: @base;
+          }
+          &.disabled {
+            background-color: @surface0;
+            i.fas {
+              color: @overlay0;
+            }
+          }
+        }
+
+        // STYLE: we could set both to mantle but originally it has alternating row colors
+        .user-status {
+          border-top-color: @surface0;
+          li {
+            background-color: @crust;
+          }
+          li:nth-of-type(2n) {
+            background-color: @mantle;
+          }
+          .online {
+            color: @text !important;
+          }
+        }
+
+        h4 {
+          border-bottom-color: @surface0;
+        }
+
+        .user-compatability-graph .bar-outer {
+          background-color: @surface0;
+          border-color: @surface1;
+        }
+      }
+
+      // Anime page Update button
+      // Anime / Manga List buttons
+      // Submit comment / all comments buttons
+      .inputButton,
+      .btn-profile-submit,
+      .btn-form-submit {
+        color: var(--color-text-light) !important;
+        background-color: var(--color-accent-background) !important;
+        transition-duration: 0.3s;
+        transition-property: all;
+        transition-timing-function: ease-in-out;
+
+        &:hover {
+          background-color: var(--color-accent-background-hover) !important;
+        }
+      }
+
+      // background of stats bars
+      .graph:not(.anime, .manga),
+      .stats-graph {
+        background-color: @surface0;
+        border-color: @surface0;
+      }
+      .stats-status {
+        .circle.watching::after {
+          background-color: var(--color-watching);
+        }
+        .circle.completed::after {
+          background-color: var(--color-completed);
+        }
+        .circle.on_hold::after {
+          background-color: var(--color-on-hold);
+        }
+        .circle.dropped::after {
+          background-color: var(--color-dropped);
+        }
+        .circle.plan_to_watch::after {
+          background-color: var(--color-plan-to-watch);
+        }
+      }
+      // watching / score numbers
+      .text {
+        color: @subtext1 !important;
+      }
+
+      // Favorites and Comments sections
+      h2,
+      h5 {
+        color: @text;
+        border-color: @surface1;
+      }
+      .fav-slide .btn-fav .link .image {
+        border-color: @surface0;
+      }
+
+      // STYLE: In Latte, hovering over favorites makes them lighter rather than darker.
+      // This reverts it but I'm not sure which looks better
+      /* .btn-fav {
+        .link {
+          transition-property: filter,opacity;
+        }
+        .link:hover {
+          // works better in Latte
+          opacity: 1;
+          filter: brightness(85%);
+        }
+      } */
+
+      // comment entry
+      .sceditor-outer {
+        // Edit and Preview buttons
+        a.item {
+          color: @text;
+          &.active {
+            background-color: @base;
+            border-color: @surface2;
+          }
+          &:hover {
+            color: @accent-color;
+            background-color: fade(@surface0, 25%);
+          }
+        }
+
+        // TODO: comment entry box too light while dragging to resize
+        // TODO: in Latte, box resize indicator is hard to see
+        .sceditor-container {
+          background-color: @surface0;
+          border-color: @surface2;
+          .sceditor-toolbar {
+            background-color: @surface1;
+            border-color: @surface2;
+
+            .sceditor-group {
+              border-right-color: @overlay0;
+              .sceditor-button {
+                color: @subtext1 !important; // TODO: not working, comment editing buttons look bad in Latte
+              }
+            }
+          }
+          textarea {
+            color: @text;
+            background-color: @surface0;
+            border-color: @surface2;
+          }
+        }
+        .mal-tab-item.preview {
+          background-color: @base;
+          border-color: @surface2;
+        }
+      }
+
+      .comment {
+        background-color: @surface0;
+      }
+
+      /* Profile Statistics section */
+
+      .head-config {
+        background-color: @surface0;
+      }
+
+      .navi {
+        border-bottom-color: @surface0;
+        .tabs .btn-tab {
+          background-color: @surface0;
+          a {
+            color: @subtext0 !important;
+          }
+          &.on {
+            background-color: @surface1;
+            a {
+              color: @text !important;
+            }
+          }
+        }
+      }
+
+      .chart-container-rf {
+        .right {
+          border-left-color: @surface0;
+          .filter {
+            color: @subtext1;
+            background-color: @surface0;
+            button.mal-btn.outline.primary.active {
+              color: @accent-color !important;
+              background-color: @surface1 !important;
+            }
+            button.mal-btn.outline.secondary {
+              color: @text;
+              border-color: @surface2;
+            }
+          }
+        }
+      }
+
+      .chart-root h3 {
+        border-bottom-color: @surface0;
+      }
+
+      .container {
+        .score .mal_score {
+          color: @text;
+        }
+        .view_all {
+          a.disabled {
+            color: @overlay0 !important;
+            background-color: @surface0 !important;
+          }
+          .score_link {
+            color: @subtext0;
+          }
+        }
+      }
+
+      .chart-wrapper .filter {
+        color: @subtext1;
+        background-color: @surface0;
+        button.mal-btn.outline.primary.active {
+          color: @accent-color !important;
+          background-color: @surface1 !important;
+        }
+        button.mal-btn.outline.secondary {
+          color: @text;
+          border-color: @surface2;
+        }
+      }
+
+      /* Shared Anime / Manga with other user */
+
+      .shared-table {
+        tr td.borderClass {
+          .shared-core-higher {
+            color: @red;
+          }
+          .shared-core-lower {
+            color: @sapphire;
+          }
+          &.shared-match {
+            background-color: @surface0;
+            .button_edit {
+              background-color: @surface1;
+            }
+          }
+        }
+      }
+
+      /* Anime / Manga Details page */
+
+      .borderClass {
+        border-color: @surface0;
+      }
+
+      .leftside {
+        // Watch Episodes button
+        .left-info-block-broadcast-button {
+          color: @text !important;
+          background-color: @surface0 !important;
+        }
+
+        // "You'll be notified when it begins airing" message
+        .msg-frame {
+          color: @text;
+          background-color: @surface0;
+          border-color: @surface1;
+        }
+
+        // edit status fields
+        .inputtext {
+          color: @text;
+          background-color: @surface0;
+          border-color: transparent;
+        }
+
+        // add / remove to list / favorites buttons
+        .profileRows a,
+        #profileRows a {
+          border-color: @surface2; // STYLE: original uses more accent color
+          &:hover {
+            background-color: @surface1;
+          }
+        }
+
+        // Read Preview button
+        .left-info-block-manga-store-button {
+          color: @text !important;
+          background-color: @surface0;
+        }
+
+        // streaming platforms asterisk
+        .broadcasts {
+          .caption::after {
+            color: @red;
+          }
+          .info {
+            color: @red;
+          }
+        }
+      }
+
+      // right side
+
+      #horiznav_nav {
+        border-color: @surface2;
+        a,
+        li {
+          color: @text !important;
+          background-color: transparent;
+        }
+        a:hover {
+          background-color: @surface1;
+        }
+        .horiznav_active {
+          background-color: @surface1;
+        }
+      }
+
+      .stats-block {
+        background-color: @mantle;
+        border-color: @surface0;
+
+        // TODO: star for rating selector is not themed (necessary?)
+        // TODO: dropdown popups not themed
+        .score {
+          // score title box
+          &::before {
+            color: var(--color-text-light) !important;
+            background-color: var(--color-accent-background);
+          }
+          color: @text !important;
+          // user count
+          &::after {
+            color: @subtext1 !important;
+          }
+        }
+
+        // divider between halves
+        &::before {
+          background-color: @surface0;
+          box-shadow: transparent 1px 0 1px 0;
+        }
+
+        .numbers {
+          color: @text !important;
+        }
+
+        .information {
+          color: @subtext0;
+          border-right-color: @surface0;
+        }
+      }
+
+      .user-status-block {
+        background-color: @mantle;
+        border-color: @surface0;
+        select,
+        .di-ib {
+          color: @text !important;
+          background-color: @surface0 !important;
+          border-color: @surface1 !important;
+          .inputtext {
+            color: @accent-color;
+            background-color: @surface0 !important;
+            border-color: transparent !important;
+          }
+        }
+      }
+
+      .manga-store-preview {
+        border-color: @surface0;
+        .manga-store-preview-info-header {
+          color: @subtext1;
+          border-bottom-color: @surface0;
+        }
+        .button[data-v-d5cbbdaa] {
+          color: var(--color-text-light) !important;
+          background-color: var(--color-accent-background);
+          border-color: transparent;
+          &:hover {
+            background-color: var(--color-accent-background-hover);
+          }
+        }
+      }
+
+      .related-entries {
+        .entry:nth-child(2n + 1)::after {
+          border-right-color: @surface0;
+        }
+        .entry:nth-child(4n),
+        .entry:nth-child(4n-1) {
+          background-color: @mantle;
+        }
+      }
+
+      .detail-characters-list {
+        table:nth-of-type(2n) {
+          background-color: @mantle;
+        }
+
+        .divider::after {
+          border-right-color: @surface0;
+        }
+      }
+
+      // Intro / Outro play button
+      .oped-preview-button-gray {
+        background-color: @surface1 !important;
+        mask-image: url("/images/oped-play-circle.svg");
+        background-image: none !important;
+        filter: none !important;
+      }
+      .oped-video-button-gray {
+        filter: none !important;
+        .malicon {
+          color: @surface1 !important;
+        }
+      }
+
+      // review header
+      .mal-navbar {
+        background-color: @surface0;
+        // reset since they were set to link color
+        .recommended a {
+          color: var(--color-recommended) !important;
+        }
+        .mixed-feelings a {
+          color: var(--color-mixed-feelings) !important;
+        }
+        .not-recommended a {
+          color: var(--color-not-recommended) !important;
+        }
+        // set bars to match
+        .recommended__bar {
+          background-color: var(--color-recommended);
+        }
+        .mixed_feeling__bar {
+          background-color: var(--color-mixed-feelings);
+        }
+        .not_recommended__bar {
+          background-color: var(--color-not-recommended);
+        }
+      }
+
+      .review-element {
+        background-color: transparent;
+        .thumbbody {
+          border-color: @surface0;
+        }
+        .update_at {
+          color: @subtext0;
+        }
+        .tags {
+          .btn-label {
+            color: @subtext0;
+            background-color: @surface0;
+            border-color: transparent;
+          }
+          // not easily readable by default,
+          // and overridden by above
+          .recommended {
+            color: var(--color-recommended);
+          }
+          .mixed-feelings {
+            color: var(--color-mixed-feelings);
+          }
+          .not-recommended {
+            color: var(--color-not-recommended);
+          }
+          .preliminary {
+            color: @subtext0;
+            background-color: transparent;
+            border-color: transparent;
+            span {
+              color: @subtext0;
+            }
+          }
+        }
+        .rating {
+          color: @text;
+        }
+        .notice {
+          color: @subtext0;
+        }
+        .reaction-box {
+          background-color: @surface0;
+          .btn-reaction {
+            color: @subtext1 !important;
+            border-color: @surface2 !important;
+          }
+          .btn-showall {
+            color: @subtext0;
+            &:hover {
+              color: @accent-color;
+            }
+          }
+        }
+        .bottom-navi {
+          .icon-reaction {
+            color: @subtext0;
+          }
+          .btn-popup {
+            color: @subtext0 !important;
+          }
+          .menu-block {
+            background-color: @surface0 !important;
+            border-color: transparent;
+          }
+        }
+      }
+
+      .btn-detail-recommendations-view-all {
+        background-color: @surface0;
+        .text {
+          color: @subtext0;
+        }
+        .icon-next {
+          background-color: @subtext0;
+        }
+      }
+
+      .detail-stack-block .tag {
+        background-color: transparent;
+      }
+
+      .lightLink {
+        color: @subtext0;
+      }
+
+      .forum_boardrow1 {
+        background-color: transparent;
+        border-color: @surface0;
+        .lightLink {
+          color: @subtext0;
+        }
+      }
+      .forum_boardrow2 {
+        background-color: @mantle;
+        border-color: @surface0;
+        .watch-state-icon {
+          color: @surface2;
+        }
+        .watch-state-icon.watched {
+          color: @accent-color;
+        }
+      }
+
+      /* Characters and Staff section */
+
+      .border_solid {
+        border-color: @surface1;
+      }
+
+      .anime-character,
+      .manga-character {
+        background-color: transparent;
+        border-color: @surface1;
+        .btn-show-sort {
+          color: @subtext0;
+        }
+      }
+
+      .anime-character-container {
+        // Favorites counter and VA language
+        .spaceit_pad[style*="color"] {
+          color: @subtext0 !important;
+        }
+
+        .bgColor2 {
+          background-color: transparent;
+        }
+        .borderClass.bgColor1 {
+          background-color: @mantle;
+          .bgColor1 {
+            background-color: @mantle;
+          }
+        }
+      }
+
+      /* Episodes section */
+
+      .episode_list {
+        .episode-list-header {
+          background-color: @surface0 !important;
+          td {
+            color: @text !important;
+            border-color: @surface2 !important;
+          }
+        }
+        .episode-list-data td {
+          color: @text;
+          background-color: @mantle !important;
+          border-color: @surface1 !important;
+          .malicon.malicon-movie-episode {
+            color: @accent-color;
+          }
+          .average {
+            color: @subtext0;
+            // TODO: average bar is not colored
+          }
+        }
+        .episode-list-data:nth-of-type(2n + 1) td {
+          background-color: @base !important;
+        }
+      }
+
+      // single episode view
+
+      .has-multi-episodes-info {
+        background-color: @surface0;
+      }
+      .episode-information {
+        background-color: @surface0;
+        .user-status-block {
+          background-color: transparent;
+          .btn-forum-episode {
+            color: var(--color-text-light) !important;
+            background-color: var(--color-accent-background);
+            border-color: transparent;
+            .di-ib {
+              color: var(--color-text-light) !important;
+              background-color: transparent !important;
+              transition-duration: 0.3s;
+            }
+          }
+          .btn-forum-episode:hover {
+            color: var(--color-accent-background-hover) !important;
+            background-color: transparent;
+            border-color: var(--color-accent-background-hover);
+            .di-ib {
+              color: var(--color-accent-background-hover) !important;
+            }
+          }
+        }
+        .video-providers {
+          color: @text;
+        }
+        .btn-rect {
+          border-color: var(--color-accent-background);
+          &.on,
+          &:hover {
+            color: var(--color-text-light) !important;
+            background-color: var(--color-accent-background);
+          }
+        }
+      }
+
+      .btn-video-anime-slide {
+        background-color: @crust;
+      }
+      .btn-video-anime-slide:hover {
+        color: @crust !important;
+        background-color: var(--color-accent-background-hover);
+      }
+      .video-anime-slide-block {
+        border-color: @surface0;
+        .btn-anime {
+          background-color: transparent;
+          .link {
+            background-color: @surface0;
+            .icon-play,
+            .episode-number {
+              color: @accent-color;
+            }
+          }
+        }
+      }
+
+      /* Videos section */
+
+      .episode-video .video-providers {
+        color: @subtext1;
+      }
+
+      /* Stats section */
+
+      .updatesBar {
+        background-color: var(--color-accent-background);
+      }
+
+      .table-recently-updated {
+        tr:nth-of-type(2n) td {
+          background-color: @mantle;
+        }
+        tr:nth-of-type(2n + 1) td {
+          background-color: transparent;
+        }
+      }
+
+      /* Reviews section */
+
+      .reviews-horiznav-nav-sort-block {
+        border-color: @surface0;
+        .filtered-results-box {
+          color: @subtext0;
+        }
+        .btn-show-sort,
+        .btn-show-filter,
+        .btn-crossedbox,
+        .btn-checkbox {
+          // TODO: boxes and dropdown arrows not themed
+          color: @subtext0;
+        }
+
+        // sort popup
+        // TODO: selected circle not themed
+        .review-sort-order-block {
+          background-color: @mantle;
+          border-color: @surface0;
+          .btn-close {
+            color: @subtext0;
+          }
+          .btn-sort-order {
+            color: @subtext0;
+          }
+        }
+        // filter popup
+        // TODO: check and X not themed
+        .review-filter-block {
+          background-color: @mantle;
+          border-color: @surface0;
+          .btn-filter {
+            color: @subtext0;
+            .fa-check {
+              color: @green;
+            }
+            .fa-xmark {
+              color: @red;
+            }
+          }
+        }
+      }
+
+      /* Opened Review Page */
+
+      .button_edit {
+        background-color: @surface0;
+        border-color: transparent;
+      }
+
+      // recommended / mixed / not recommend tag
+      .review-element .thumbbody .body .tag {
+        background-color: @surface0;
+        border-color: transparent;
+      }
+
+      /* Recommendations section */
+
+      td .borderClass.bgColor1 {
+        background-color: transparent; // should be slightly lighter than base but @surface0 looks bad in Latte
+      }
+
+      div[style*="overflow: hidden; padding: 10px 0; border-bottom: solid #cdcdcd 1px"] {
+        border-bottom-color: @surface2 !important;
+      }
+
+      /* Interest Stacks section */
+
+      // add stack button
+      .stack-balloon {
+        .fa-layer-plus {
+          color: @overlay1;
+          &:hover {
+            color: @accent-color;
+          }
+        }
+        .fa-layer-minus {
+          color: @accent-color;
+          &:hover {
+            color: @overlay1;
+          }
+        }
+
+        .balloon {
+          background-color: transparent;
+          border-color: @surface1 !important;
+          p {
+            color: @subtext0;
+          }
+        }
+        // border of arrow
+        .balloon::before {
+          border-right-color: @surface1 !important;
+        }
+        // background of arrow
+        .balloon::after {
+          border-right-color: @base !important;
+        }
+
+        &.on .balloon {
+          background-color: @surface0 !important;
+          border-color: @surface0 !important;
+          p {
+            color: @accent-color !important;
+          }
+        }
+        // border of arrow
+        .balloon::before {
+          border-right-color: @surface0 !important;
+        }
+        // background of arrow
+        .balloon::after {
+          border-right-color: @surface0 !important;
+        }
+      }
+
+      // anime/manga page section
+      .stacks {
+        .navi {
+          border-color: @surface0;
+          .btn-show-sort {
+            color: @text;
+            // TODO: dropdown arrow not themed
+          }
+          .btn-show-spoilers {
+            color: @text;
+            i.fas {
+              color: @surface2;
+            }
+            &.on i.fas {
+              color: @accent-color;
+            }
+          }
+        }
+        .recent-list .column-item {
+          border-bottom-color: @surface0;
+          .tag {
+            background-color: transparent;
+            .tag-anime {
+              background-color: var(--color-red-background);
+            }
+          }
+          .foot {
+            .stat {
+              color: @subtext0;
+            }
+          }
+        }
+
+        .pagination {
+          .link.current,
+          .link:hover {
+            color: var(--color-text-light) !important;
+            background-color: var(--color-accent-background) !important;
+          }
+          .link {
+            color: @accent-color !important;
+            background-color: @surface0 !important;
+          }
+          .skip {
+            color: @subtext0;
+          }
+        }
+      }
+
+      .search-side {
+        form input {
+          color: @text;
+          background-color: @surface0;
+          border-color: @surface0;
+        }
+        form button {
+          color: @accent-color;
+          background-color: @surface0;
+          border-color: @surface0;
+          &:hover {
+            background-color: @base;
+          }
+        }
+        .quick-search a {
+          background-color: @surface0;
+          border-color: @surface0;
+        }
+      }
+
+      .content-right {
+        h3.underline {
+          border-bottom-color: @surface1;
+        }
+        .side-list .column-item {
+          border-bottom-color: @surface0;
+          .detail .foot .stat {
+            color: @subtext0;
+          }
+        }
+      }
+
+      // individal interest stack page
+      .stacks-detail {
+        .breadcrumbs_area.underline {
+          border-bottom-color: @surface1;
+        }
+        h2.title {
+          background-color: @base;
+        }
+        .tag {
+          background-color: @base;
+          .tag-anime {
+            color: var(--color-text-light);
+            background-color: var(--color-red-background);
+          }
+        }
+        .info-block {
+          color: @subtext0;
+          background-color: @surface0;
+        }
+        .introduction {
+          color: @text;
+          border-bottom-color: @surface1;
+        }
+        .any_status {
+          color: @subtext0;
+          background-color: @base;
+          strong {
+            color: @text;
+          }
+          .score {
+            background-color: @surface0;
+          }
+          .btn-report .report-block {
+            background-color: @surface0;
+            border-color: @surface1;
+          }
+          .view-style2 {
+            a {
+              background-color: @surface0;
+              border-color: @surface1;
+            }
+            a:hover {
+              background-color: @surface1;
+            }
+            a.on {
+              color: @base !important;
+              background-color: @accent-color;
+            }
+          }
+        }
+
+        // tile view
+        .tile-anime-list .seasonal-anime {
+          .widget {
+            background-color: fade(@surface0, 95%);
+            .stars,
+            .users {
+              // STYLE: a little strange in Latte but is probably fine
+              color: @text;
+            }
+          }
+          .edit a {
+            &:hover {
+              color: @text !important;
+            }
+            &.completed {
+              color: var(--color-text-light) !important;
+              background-color: var(--color-accent-background);
+            }
+          }
+        }
+        // two-side view
+        .seasonal-anime-list .seasonal-anime {
+          border-color: @surface1 !important;
+          .prodsrc {
+            color: @subtext0;
+            background-color: transparent;
+            .malicon {
+              color: @overlay1;
+            }
+            .info .item:nth-child(n + 2) {
+              border-left-color: @surface1;
+            }
+          }
+          .genres {
+            background-color: @surface0;
+            border-bottom-color: @surface1 !important;
+            .genre {
+              background-color: @surface1 !important;
+              border-color: @surface1 !important;
+              a {
+                color: @subtext0 !important;
+              }
+            }
+          }
+          .image {
+            background-color: @surface0;
+          }
+          .fa-angle-down {
+            color: @subtext0;
+          }
+          .properties .property {
+            color: @text;
+            background-color: @mantle;
+            &:nth-child(2n) {
+              background-color: @base;
+            }
+          }
+          .information {
+            background-color: @surface0;
+            border-top-color: @surface1 !important;
+            .information-item {
+              color: @subtext0;
+              .button.addtolist {
+                color: var(--color-text-light) !important;
+                background-color: var(--color-accent-background);
+              }
+            }
+          }
+        }
+        // list view
+        .list-anime-list .seasonal-anime {
+          .intro {
+            color: @text;
+          }
+          .head {
+            background-color: @surface0;
+            .add-edit-button .button {
+              background-color: @surface0;
+              border-color: @surface1 !important;
+              &.button {
+                color: var(--color-text-light) !important;
+                background-color: var(--color-accent-background);
+              }
+              &.plantowatch:hover {
+                background-color: @surface1 !important;
+              }
+              &.plantowatch {
+                color: @text !important;
+                background-color: @surface0;
+              }
+              &.plantowatch:hover {
+                color: var(--color-text-light) !important;
+                background-color: var(--color-plan-to-watch) !important;
+              }
+              &.dropped {
+                color: @text !important;
+                background-color: @surface0;
+              }
+              &.dropped:hover {
+                color: var(--color-text-light) !important;
+                background-color: var(--color-dropped) !important;
+              }
+            }
+          }
+          .info {
+            color: @subtext0;
+            background-color: @surface0;
+          }
+        }
+      }
+
+      /* Forum section */
+
+      .page-forum #forumTopics {
+        .forum-table-header {
+          background-color: @surface1 !important;
+          .normal_header {
+            color: @text;
+            border-color: @surface2;
+          }
+        }
+      }
+
+      // actual forum view
+
+      .clearfix {
+        a.mal-btn.secondary.outline {
+          color: @subtext0 !important;
+          border-color: @surface1;
+        }
+        .forum_locheader {
+          color: @text;
+        }
+      }
+
+      .forum {
+        .mal-navbar {
+          background-color: @surface0;
+          button.mal-btn.secondary.outline {
+            color: @subtext1;
+            border-color: @surface2;
+          }
+          .mal-badge {
+            background-color: var(--color-red-background);
+          }
+          .mal-btn-group {
+            .mal-btn.primary {
+              color: var(--color-text-light);
+              background-color: var(--color-accent-background);
+              border-color: var(--color-accent-background);
+            }
+            .mal-btn.primary.outline {
+              color: @accent-color;
+              background-color: transparent;
+              border-color: @surface2;
+              &:hover {
+                background-color: @surface1;
+              }
+            }
+          }
+          &.topic-reply-bar .mal-btn.primary {
+            color: var(--color-text-light);
+            background-color: var(--color-accent-background);
+            border-color: transparent;
+            // STYLE: other buttons fade in but originally this one does not
+            /*             transition-duration: 0.3s;
+            transition-property: background-color;
+            transition-timing-function: ease-in-out; */
+            &:hover {
+              background-color: var(--color-accent-background-hover);
+            }
+          }
+        }
+
+        .message-header {
+          color: @text;
+          background-color: @surface1;
+          .postnum {
+            color: @text !important; // overwrite link setting
+          }
+        }
+
+        .message-container,
+        .message-wrapper {
+          .profile {
+            color: @subtext0;
+            background-color: @surface0;
+            border-color: @surface0;
+            .userstatus {
+              &.online {
+                color: @green;
+              }
+            }
+          }
+          .content {
+            border-color: @surface0;
+            .mal-post-toolbar {
+              button.mal-btn.secondary.outline {
+                color: @subtext0;
+              }
+            }
+            .item.update {
+              color: @subtext0;
+            }
+            .quotetext {
+              background-color: @surface0 !important;
+              border-color: transparent;
+            }
+            .sig-container {
+              border-color: @surface0;
+            }
+          }
+        }
+
+        .forum-topics {
+          tr {
+            td {
+              border-color: @surface0;
+            }
+            td:nth-child(2n + 1) {
+              background-color: @mantle;
+            }
+          }
+        }
+      }
+
+      /* Pictures section */
+
+      .picSurround .js-picture-gallery .lazyloaded {
+        background-color: @surface0;
+        border-color: @surface1;
+      }
+
+      /* Report page and Edit Anime page */
+
+      #dialog {
+        background-color: @surface0;
+        border-color: @surface0 !important;
+        #abuse_report.inputtext {
+          color: @text;
+          background-color: @surface1;
+          border-color: @surface1;
+        }
+        #main-form .inputtext {
+          color: @text;
+          background-color: @surface1;
+          border-color: @surface1;
+        }
+      }
+
+      /* My Messages page */
+
+      .private-message-content {
+        .total_messages {
+          color: @text;
+          border-bottom-color: @surface0 !important;
+        }
+      }
+
+      /* Notifications page */
+
+      &.container--small-left .left-column {
+        border-color: @surface0 !important;
+      }
+
+      // yes, this should be misspelled
+      .notificaiton-category-nav {
+        li {
+          border-bottom-color: @surface0;
+          a {
+            color: @text !important;
+            &.active {
+              background-color: @surface0;
+            }
+            &:hover {
+              background-color: @surface0;
+            }
+
+            .counter {
+              color: @subtext1;
+            }
+            .counter.zero {
+              color: @base;
+              background-color: @surface1;
+            }
+          }
+        }
+      }
+
+      .notification-header {
+        h3 {
+          color: @subtext1;
+          border-bottom-color: @surface1;
+        }
+        .right-menu .item {
+          color: @accent-color;
+          &.disabled {
+            color: @surface2;
+          }
+        }
+      }
+
+      .notification-item {
+        border-bottom-color: @surface0;
+        &:hover {
+          background-color: @surface0;
+        }
+        .time {
+          color: @subtext0;
+        }
+      }
+    } // end of #content
+
+    /* Search All page */
+
+    .page-common .incrementalSearchResultList {
+      background-color: @surface1;
+      border-color: @surface1;
+      .list.list-bottom.focus {
+        color: @text;
+        background-color: @surface0;
+        border-color: @surface1;
+      }
+    }
+
+    .search_all {
+      .result-header {
+        color: var(--color-text-light);
+        background-color: var(--color-accent-background);
+      }
+      .link-content-jump {
+        .link.on {
+          color: var(--color-text-light) !important;
+          background-color: var(--color-accent-background);
+        }
+      }
+      .content-result {
+        .list {
+          border-bottom-color: @surface0;
+        }
+      }
+      .btn-search-more {
+        color: var(--color-text-light) !important;
+        background-color: var(--color-accent-background);
+        &:hover {
+          background-color: var(--color-accent-background-hover);
+        }
+      }
+    }
+
+    .anime-search-form-block .anime-search-form-search {
+      .inputtext {
+        color: @text;
+        border-color: @surface1;
+      }
+      .inputButton {
+        border-color: @surface1;
+      }
+    }
+
+    // Edit Anime overlay from My List
+    #dialog {
+      background-color: @base;
+      border-color: @base !important;
+      .inputtext {
+        color: @text;
+        background-color: @surface0;
+        border-color: @surface0;
+      }
+      #advanced-button {
+        .separator {
+          border-bottom-color: @surface0;
+        }
+        .toggle-button {
+          color: @accent-color;
+          background-color: @surface0 !important;
+        }
+      }
+    }
+    // TODO: "Send note to recent friend" checkbox not themed
+
+    // Footer when not logged in
+    .footer-ranking {
+      background-color: @base !important;
+      .ranking-unit {
+        .title {
+          border-bottom-color: @surface0 !important;
+        }
+        .rank {
+          color: @subtext1;
+        }
+      }
+    }
+
+    #footer-block {
+      color: @text !important;
+      background-color: @base !important;
+      .footer-link-block {
+        // approximate the divider image
+        background-image: radial-gradient(@surface2, @base 75%), url(/images/footer/footer-sns-border.png?v=1634263200) !important;
+
+        .footer-link.home {
+          border-right-color: @subtext0;
+        }
+      }
+      .footer-social-media {
+        &::before {
+          color: @subtext0 !important;
+        }
+      }
+      .footer-link-icon-block {
+        .footer-recommended::before {
+          color: @subtext0;
+        }
+        .footer-app::before {
+          color: @subtext0;
+        }
+      }
+      #copyright {
+        color: @subtext0 !important;
+      }
+      #recaptcha-terms {
+        color: @subtext0 !important;
+      }
+    }
+
+    /* Top Anime/Manga page */
+    .top-ranking-table .table-header td {
+      background-color: @overlay0 !important;
+      color: @text !important;
+    }
+    tr.ranking-list:nth-child(even) td {
+      background-color: @surface0 !important;
+    }
+    tr.ranking-list:nth-child(odd) td {
+      background-color: @surface1 !important;
+    }
+    .information.di-ib {
+      color: @subtext1 !important;
+    }
+    td.status.ac .notinmylist,
+    a.link-blue-box.next {
+      background-color: @mauve !important;
+      color: @crust !important;
+    }
+    td.status.ac .notinmylist:hover,
+    a.link-blue-box.next:hover {
+      background-color: @surface0 !important;
+      color: @text !important;
+    }
+    td.status.ac .plantowatch,
+    td.status.ac .plantoread,
+    td.status.ac .watching,
+    td.status.ac .on-hold,
+    td.status.ac .completed,
+    td.status.ac .dropped {
+      background-color: @surface0 !important;
+      color: @crust !important;
+    }
+    // TODO: theme the status buttons when hovered
+    .top-anime-rank-text.rank2 {
+      color: @subtext0 !important;
+    }
+  }
+}
+
+/* prettier-ignore */
+@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; };
+    @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; };
+    @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; };
+    @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; };
+  }
+@catppuccin-filters: {
+  @latte: {
+    @rosewater: brightness(0) saturate(100%) invert(65%) sepia(18%)
+      saturate(1048%) hue-rotate(323deg) brightness(92%) contrast(86%);
+    @flamingo: brightness(0) saturate(100%) invert(84%) sepia(44%)
+      saturate(4533%) hue-rotate(310deg) brightness(98%) contrast(75%);
+    @pink: brightness(0) saturate(100%) invert(60%) sepia(32%) saturate(775%)
+      hue-rotate(266deg) brightness(93%) contrast(97%);
+    @mauve: brightness(0) saturate(100%) invert(26%) sepia(59%) saturate(3315%)
+      hue-rotate(255deg) brightness(94%) contrast(100%);
+    @red: brightness(0) saturate(100%) invert(16%) sepia(78%) saturate(7275%)
+      hue-rotate(342deg) brightness(84%) contrast(94%);
+    @maroon: brightness(0) saturate(100%) invert(31%) sepia(56%) saturate(2395%)
+      hue-rotate(331deg) brightness(99%) contrast(82%);
+    @peach: brightness(0) saturate(100%) invert(38%) sepia(81%) saturate(1292%)
+      hue-rotate(356deg) brightness(103%) contrast(99%);
+    @yellow: brightness(0) saturate(100%) invert(74%) sepia(47%) saturate(4570%)
+      hue-rotate(354deg) brightness(95%) contrast(83%);
+    @green: brightness(0) saturate(100%) invert(51%) sepia(25%) saturate(4134%)
+      hue-rotate(76deg) brightness(95%) contrast(66%);
+    @teal: brightness(0) saturate(100%) invert(41%) sepia(45%) saturate(1101%)
+      hue-rotate(139deg) brightness(100%) contrast(82%);
+    @sky: brightness(0) saturate(100%) invert(47%) sepia(76%) saturate(2427%)
+      hue-rotate(166deg) brightness(99%) contrast(97%);
+    @sapphire: brightness(0) saturate(100%) invert(52%) sepia(41%)
+      saturate(6982%) hue-rotate(160deg) brightness(102%) contrast(75%);
+    @blue: brightness(0) saturate(100%) invert(30%) sepia(80%) saturate(1850%)
+      hue-rotate(209deg) brightness(94%) contrast(105%);
+    @lavender: brightness(0) saturate(100%) invert(48%) sepia(61%)
+      saturate(538%) hue-rotate(194deg) brightness(102%) contrast(98%);
+    @text: brightness(0) saturate(100%) invert(30%) sepia(10%) saturate(1259%)
+      hue-rotate(196deg) brightness(97%) contrast(91%);
+    @subtext1: brightness(0) saturate(100%) invert(36%) sepia(10%)
+      saturate(890%) hue-rotate(196deg) brightness(98%) contrast(90%);
+    @subtext0: brightness(0) saturate(100%) invert(47%) sepia(6%)
+      saturate(1263%) hue-rotate(195deg) brightness(90%) contrast(81%);
+    @overlay2: brightness(0) saturate(100%) invert(59%) sepia(7%) saturate(825%)
+      hue-rotate(195deg) brightness(83%) contrast(91%);
+    @overlay1: brightness(0) saturate(100%) invert(59%) sepia(14%)
+      saturate(333%) hue-rotate(194deg) brightness(95%) contrast(89%);
+    @overlay0: brightness(0) saturate(100%) invert(85%) sepia(7%) saturate(595%)
+      hue-rotate(191deg) brightness(77%) contrast(81%);
+    @surface2: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(482%)
+      hue-rotate(189deg) brightness(82%) contrast(88%);
+    @surface1: brightness(0) saturate(100%) invert(85%) sepia(8%) saturate(281%)
+      hue-rotate(187deg) brightness(92%) contrast(88%);
+    @surface0: brightness(0) saturate(100%) invert(96%) sepia(1%)
+      saturate(5123%) hue-rotate(185deg) brightness(93%) contrast(83%);
+    @base: brightness(0) saturate(100%) invert(89%) sepia(5%) saturate(140%)
+      hue-rotate(182deg) brightness(109%) contrast(94%);
+    @mantle: brightness(0) saturate(100%) invert(93%) sepia(19%) saturate(55%)
+      hue-rotate(182deg) brightness(98%) contrast(92%);
+    @crust: brightness(0) saturate(100%) invert(91%) sepia(1%) saturate(4489%)
+      hue-rotate(196deg) brightness(106%) contrast(82%);
+  };
+  @frappe: {
+    @rosewater: brightness(0) saturate(100%) invert(90%) sepia(6%)
+      saturate(734%) hue-rotate(321deg) brightness(95%) contrast(99%);
+    @flamingo: brightness(0) saturate(100%) invert(88%) sepia(52%)
+      saturate(817%) hue-rotate(293deg) brightness(113%) contrast(84%);
+    @pink: brightness(0) saturate(100%) invert(76%) sepia(15%) saturate(844%)
+      hue-rotate(280deg) brightness(107%) contrast(91%);
+    @mauve: brightness(0) saturate(100%) invert(71%) sepia(25%) saturate(725%)
+      hue-rotate(225deg) brightness(94%) contrast(91%);
+    @red: brightness(0) saturate(100%) invert(67%) sepia(3%) saturate(7209%)
+      hue-rotate(305deg) brightness(91%) contrast(99%);
+    @maroon: brightness(0) saturate(100%) invert(61%) sepia(14%) saturate(957%)
+      hue-rotate(307deg) brightness(109%) contrast(90%);
+    @peach: brightness(0) saturate(100%) invert(68%) sepia(28%) saturate(662%)
+      hue-rotate(335deg) brightness(96%) contrast(94%);
+    @yellow: brightness(0) saturate(100%) invert(94%) sepia(88%) saturate(684%)
+      hue-rotate(309deg) brightness(105%) contrast(80%);
+    @green: brightness(0) saturate(100%) invert(89%) sepia(23%) saturate(582%)
+      hue-rotate(42deg) brightness(87%) contrast(89%);
+    @teal: brightness(0) saturate(100%) invert(91%) sepia(13%) saturate(986%)
+      hue-rotate(110deg) brightness(85%) contrast(81%);
+    @sky: brightness(0) saturate(100%) invert(75%) sepia(15%) saturate(623%)
+      hue-rotate(141deg) brightness(109%) contrast(81%);
+    @sapphire: brightness(0) saturate(100%) invert(77%) sepia(20%)
+      saturate(730%) hue-rotate(157deg) brightness(97%) contrast(76%);
+    @blue: brightness(0) saturate(100%) invert(68%) sepia(16%) saturate(1070%)
+      hue-rotate(185deg) brightness(96%) contrast(95%);
+    @lavender: brightness(0) saturate(100%) invert(75%) sepia(20%)
+      saturate(626%) hue-rotate(201deg) brightness(101%) contrast(89%);
+    @text: brightness(0) saturate(100%) invert(83%) sepia(12%) saturate(582%)
+      hue-rotate(191deg) brightness(98%) contrast(96%);
+    @subtext1: brightness(0) saturate(100%) invert(80%) sepia(18%)
+      saturate(411%) hue-rotate(190deg) brightness(96%) contrast(84%);
+    @subtext0: brightness(0) saturate(100%) invert(82%) sepia(6%)
+      saturate(1287%) hue-rotate(192deg) brightness(86%) contrast(85%);
+    @overlay2: brightness(0) saturate(100%) invert(65%) sepia(36%)
+      saturate(230%) hue-rotate(190deg) brightness(92%) contrast(82%);
+    @overlay1: brightness(0) saturate(100%) invert(55%) sepia(12%)
+      saturate(638%) hue-rotate(189deg) brightness(98%) contrast(87%);
+    @overlay0: brightness(0) saturate(100%) invert(49%) sepia(13%)
+      saturate(662%) hue-rotate(192deg) brightness(94%) contrast(84%);
+    @surface2: brightness(0) saturate(100%) invert(41%) sepia(20%)
+      saturate(469%) hue-rotate(191deg) brightness(93%) contrast(86%);
+    @surface1: brightness(0) saturate(100%) invert(34%) sepia(14%)
+      saturate(771%) hue-rotate(190deg) brightness(89%) contrast(85%);
+    @surface0: brightness(0) saturate(100%) invert(28%) sepia(7%)
+      saturate(1468%) hue-rotate(193deg) brightness(92%) contrast(95%);
+    @base: brightness(0) saturate(100%) invert(20%) sepia(17%) saturate(747%)
+      hue-rotate(192deg) brightness(96%) contrast(97%);
+    @mantle: brightness(0) saturate(100%) invert(8%) sepia(7%) saturate(7271%)
+      hue-rotate(198deg) brightness(88%) contrast(75%);
+    @crust: brightness(0) saturate(100%) invert(7%) sepia(7%) saturate(7415%)
+      hue-rotate(197deg) brightness(86%) contrast(79%);
+  };
+  @macchiato: {
+    @rosewater: brightness(0) saturate(100%) invert(88%) sepia(13%)
+      saturate(322%) hue-rotate(321deg) brightness(102%) contrast(91%);
+    @flamingo: brightness(0) saturate(100%) invert(82%) sepia(3%)
+      saturate(3070%) hue-rotate(314deg) brightness(107%) contrast(88%);
+    @pink: brightness(0) saturate(100%) invert(80%) sepia(23%) saturate(509%)
+      hue-rotate(280deg) brightness(102%) contrast(92%);
+    @mauve: brightness(0) saturate(100%) invert(65%) sepia(18%) saturate(903%)
+      hue-rotate(222deg) brightness(104%) contrast(93%);
+    @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(1541%)
+      hue-rotate(305deg) brightness(110%) contrast(86%);
+    @maroon: brightness(0) saturate(100%) invert(71%) sepia(10%) saturate(1331%)
+      hue-rotate(306deg) brightness(93%) contrast(101%);
+    @peach: brightness(0) saturate(100%) invert(73%) sepia(13%) saturate(1676%)
+      hue-rotate(330deg) brightness(103%) contrast(92%);
+    @yellow: brightness(0) saturate(100%) invert(87%) sepia(89%) saturate(321%)
+      hue-rotate(314deg) brightness(101%) contrast(87%);
+    @green: brightness(0) saturate(100%) invert(93%) sepia(12%) saturate(1128%)
+      hue-rotate(48deg) brightness(92%) contrast(85%);
+    @teal: brightness(0) saturate(100%) invert(92%) sepia(10%) saturate(1176%)
+      hue-rotate(110deg) brightness(87%) contrast(90%);
+    @sky: brightness(0) saturate(100%) invert(78%) sepia(57%) saturate(230%)
+      hue-rotate(142deg) brightness(96%) contrast(84%);
+    @sapphire: brightness(0) saturate(100%) invert(74%) sepia(35%)
+      saturate(438%) hue-rotate(156deg) brightness(92%) contrast(93%);
+    @blue: brightness(0) saturate(100%) invert(67%) sepia(17%) saturate(1007%)
+      hue-rotate(183deg) brightness(99%) contrast(94%);
+    @lavender: brightness(0) saturate(100%) invert(74%) sepia(6%)
+      saturate(2559%) hue-rotate(198deg) brightness(103%) contrast(94%);
+    @text: brightness(0) saturate(100%) invert(81%) sepia(9%) saturate(726%)
+      hue-rotate(192deg) brightness(104%) contrast(92%);
+    @subtext1: brightness(0) saturate(100%) invert(84%) sepia(5%)
+      saturate(1453%) hue-rotate(193deg) brightness(94%) contrast(86%);
+    @subtext0: brightness(0) saturate(100%) invert(75%) sepia(18%)
+      saturate(361%) hue-rotate(190deg) brightness(91%) contrast(86%);
+    @overlay2: brightness(0) saturate(100%) invert(67%) sepia(9%) saturate(814%)
+      hue-rotate(191deg) brightness(92%) contrast(88%);
+    @overlay1: brightness(0) saturate(100%) invert(49%) sepia(38%)
+      saturate(203%) hue-rotate(190deg) brightness(101%) contrast(93%);
+    @overlay0: brightness(0) saturate(100%) invert(46%) sepia(16%)
+      saturate(552%) hue-rotate(193deg) brightness(93%) contrast(84%);
+    @surface2: brightness(0) saturate(100%) invert(34%) sepia(16%)
+      saturate(611%) hue-rotate(192deg) brightness(101%) contrast(87%);
+    @surface1: brightness(0) saturate(100%) invert(30%) sepia(11%)
+      saturate(1085%) hue-rotate(194deg) brightness(92%) contrast(89%);
+    @surface0: brightness(0) saturate(100%) invert(18%) sepia(21%)
+      saturate(880%) hue-rotate(193deg) brightness(97%) contrast(84%);
+    @base: brightness(0) saturate(100%) invert(12%) sepia(42%) saturate(570%)
+      hue-rotate(194deg) brightness(90%) contrast(90%);
+    @mantle: brightness(0) saturate(100%) invert(6%) sepia(6%) saturate(7499%)
+      hue-rotate(200deg) brightness(93%) contrast(85%);
+    @crust: brightness(0) saturate(100%) invert(5%) sepia(8%) saturate(5346%)
+      hue-rotate(202deg) brightness(98%) contrast(88%);
+  };
+  @mocha: {
+    @rosewater: brightness(0) saturate(100%) invert(92%) sepia(5%)
+      saturate(704%) hue-rotate(320deg) brightness(99%) contrast(93%);
+    @flamingo: brightness(0) saturate(100%) invert(81%) sepia(5%) saturate(987%)
+      hue-rotate(315deg) brightness(107%) contrast(90%);
+    @pink: brightness(0) saturate(100%) invert(86%) sepia(11%) saturate(1177%)
+      hue-rotate(283deg) brightness(101%) contrast(92%);
+    @mauve: brightness(0) saturate(100%) invert(65%) sepia(58%) saturate(255%)
+      hue-rotate(224deg) brightness(96%) contrast(102%);
+    @red: brightness(0) saturate(100%) invert(61%) sepia(19%) saturate(997%)
+      hue-rotate(294deg) brightness(104%) contrast(91%);
+    @maroon: brightness(0) saturate(100%) invert(66%) sepia(16%) saturate(1301%)
+      hue-rotate(306deg) brightness(116%) contrast(84%);
+    @peach: brightness(0) saturate(100%) invert(68%) sepia(57%) saturate(278%)
+      hue-rotate(338deg) brightness(98%) contrast(101%);
+    @yellow: brightness(0) saturate(100%) invert(90%) sepia(70%) saturate(380%)
+      hue-rotate(313deg) brightness(102%) contrast(95%);
+    @green: brightness(0) saturate(100%) invert(88%) sepia(6%) saturate(2015%)
+      hue-rotate(63deg) brightness(104%) contrast(78%);
+    @teal: brightness(0) saturate(100%) invert(92%) sepia(12%) saturate(991%)
+      hue-rotate(108deg) brightness(93%) contrast(90%);
+    @sky: brightness(0) saturate(100%) invert(84%) sepia(21%) saturate(1302%)
+      hue-rotate(164deg) brightness(106%) contrast(84%);
+    @sapphire: brightness(0) saturate(100%) invert(74%) sepia(20%)
+      saturate(876%) hue-rotate(156deg) brightness(96%) contrast(93%);
+    @blue: brightness(0) saturate(100%) invert(68%) sepia(18%) saturate(951%)
+      hue-rotate(180deg) brightness(98%) contrast(100%);
+    @lavender: brightness(0) saturate(100%) invert(73%) sepia(7%)
+      saturate(1670%) hue-rotate(195deg) brightness(102%) contrast(99%);
+    @text: brightness(0) saturate(100%) invert(86%) sepia(6%) saturate(879%)
+      hue-rotate(190deg) brightness(100%) contrast(93%);
+    @subtext1: brightness(0) saturate(100%) invert(84%) sepia(19%)
+      saturate(381%) hue-rotate(193deg) brightness(91%) contrast(89%);
+    @subtext0: brightness(0) saturate(100%) invert(84%) sepia(9%) saturate(767%)
+      hue-rotate(192deg) brightness(84%) contrast(84%);
+    @overlay2: brightness(0) saturate(100%) invert(63%) sepia(15%)
+      saturate(428%) hue-rotate(191deg) brightness(96%) contrast(84%);
+    @overlay1: brightness(0) saturate(100%) invert(56%) sepia(15%)
+      saturate(455%) hue-rotate(192deg) brightness(90%) contrast(88%);
+    @overlay0: brightness(0) saturate(100%) invert(44%) sepia(6%)
+      saturate(1275%) hue-rotate(194deg) brightness(97%) contrast(88%);
+    @surface2: brightness(0) saturate(100%) invert(34%) sepia(8%)
+      saturate(1015%) hue-rotate(195deg) brightness(99%) contrast(89%);
+    @surface1: brightness(0) saturate(100%) invert(25%) sepia(6%)
+      saturate(1950%) hue-rotate(197deg) brightness(99%) contrast(86%);
+    @surface0: brightness(0) saturate(100%) invert(19%) sepia(5%)
+      saturate(2844%) hue-rotate(199deg) brightness(91%) contrast(93%);
+    @base: brightness(0) saturate(100%) invert(7%) sepia(4%) saturate(7496%)
+      hue-rotate(202deg) brightness(93%) contrast(87%);
+    @mantle: brightness(0) saturate(100%) invert(6%) sepia(4%) saturate(7465%)
+      hue-rotate(202deg) brightness(95%) contrast(90%);
+    @crust: brightness(0) saturate(100%) invert(3%) sepia(13%) saturate(6863%)
+      hue-rotate(220deg) brightness(95%) contrast(91%);
+  };
+};
+// vim:ft=less