A collection of userstyles and userscripts I use for AniList

AniListTweaks_1Readme.md

AniList Tweaks

User Scripts

A collection of userscripts I made for AniList

Installation

1. Install a user script manager like GreaseMonkey or TamperMonkey.
2. Open the userscript raw you wish to install.

Links

MAL -> AL

Adds a link to MAL anime and manga entries that lets you navigate to the AniList equivalent.

Accentify

Changes AniList's accent color from blue to match your profile color. Does not affect the loading bar at the top (currently) nor does it override profile colors of other users.

User Styles

A collection of userstyles I made for AniList

Installation

1. Install a user style manager like Stylus.
2. Open the userstyle raw you wish to install.

Links

2019 Color Schemes

Switches to the color schemes from before the 4/30/2020 Browse update. Ignore the file name, that was from before this affected the light and contrast themes.

Extra Darcc

Performs some fixes to the dark theme.

Circle Avatars

Makes avatars circular and adds a drop shadow to them. The drop shadow can be configured from the user style manager.

Better Scrollers

Makes scroll bars fit with AniList's look and feel. This style has limited Firefox support.

Colored Smilies

Colors the faces displayed when a user is using the 3 point smiley system. The colors are configurable.

No Feed Switcher

Hides the feed switcher on the homepage to lower the likelyness that you enter the cesspool that is Global.

Browse Status Indicator Mover

Moves where the status indicator is on entries on the Browse page to a more easily viewable place.

AniListTweaks_2019DarkTheme.user.css

/* ==UserStyle==
@name           AniList 2019 Color Schemes
@namespace      TehNut
@homepageURL https://gist.github.com/TehNut/f1ee6e5ff26a5a419850458797770f38
@updateURL   https://gist.githubusercontent.com/TehNut/f1ee6e5ff26a5a419850458797770f38/raw/AniListTweaks_2019DarkTheme.user.css
@version        1.0.10
@description    Switches to the color schemes from before the 4/30/2020 Browse update
@author         Nicholas "TehNut" Ignoffo
==/UserStyle== */
@-moz-document domain("anilist.co") {

  #app {
    --color-background-200: var(--color-foreground) !important;
    --color-background-100: var(--color-background) !important;
  }

  /*  Primary theme overrides  */
  .site-theme-dark {
    --color-background: 39, 44, 56;
    --color-foreground: 31, 35, 45;
    --color-foreground-grey: 25, 29, 38;
    --color-foreground-grey-dark: 16, 20, 25;
    --color-foreground-blue: 25, 29, 38;
    --color-foreground-blue-dark: 19, 23, 29;
    --color-text: 159, 173, 189;
    --color-text-light: 129, 140, 153;
    --color-text-lighter: 133, 150, 165;
  }

  .site-theme-contrast {
    --color-background: 214, 224, 239;
    --color-foreground: 245, 246, 249;
    --color-foreground-grey: 229, 233, 245;
    --color-foreground-grey-dark: 221, 225, 239;
    --color-foreground-blue: 229, 233, 245;
    --color-foreground-blue-dark: 221, 225, 239;
    --color-text: 0, 0, 0;
    --color-text-light: 94, 101, 111;
    --color-text-lighter: 94, 101, 111;
    --color-shadow: 37, 41, 51;
    --color-blue: 18, 172, 253;
    --color-blue-dim: 85, 144, 208;
  }

  .site-theme-light {
    --color-background: 237, 241, 245;
    --color-foreground: 250, 250, 250;
    --color-foreground-grey: 245, 246, 246;
    --color-foreground-grey-dark: 234, 236, 237;
    --color-foreground-blue: 246, 248, 251;
    --color-foreground-blue-dark: 241, 243, 247;
    --color-text: 92, 114, 138;
    --color-text-light: 122, 133, 143;
    --color-text-lighter: 146, 153, 161;
  }

  /*  Navbar tweaks  */
  .nav-unscoped {
    transition: background 0.4s ease 0s, color 0.4s ease 0s;
    background: rgb(var(--color-overlay)) !important;
    color: rgb(159, 173, 189) !important;
  }

  .nav-unscoped:hover {
    color: rgba(var(--color-text-bright), 0.8) !important;
  }

  #nav .search svg {
    transition: color 0.4s ease 0s;
    color: rgb(159, 173, 189)
  }

  #nav {
    height: 54px;
  }

  #app {
    margin-top: 54px;
  }

  @media (max-height: 920px) {
    #nav {
      height: 54px;
    }

    #app {
      margin-top: 54px;
    }
  }

  /*  Custom Slider fix  */
  .ps__rail-x:hover,
  .ps__rail-y:hover,
  .ps--clicking {
    transition: background-color 0.4s ease 0s;
    background-color: rgb(var(--color-foreground-blue)) !important;
    border-radius: 6px;
  }

  .ps__thumb-x,
  .ps__thumb-y {
    transition: background-color 0.4s ease 0s;
    background-color: rgb(var(--color-blue)) !important;
  }
}

@-moz-document url-prefix("https://anilist.co/user"),
url-prefix("https://anilist.co/manga"),
url-prefix("https://anilist.co/anime") {

  /*  Navbar tweaks  */
  .nav-unscoped {
    transition: background 0.4s ease 0s, top 0.5s ease 0s !important;
  }

  .nav-unscoped.transparent {
    background: rgba(var(--color-overlay), 0.7) !important;
    color: rgb(159, 173, 189) !important;
  }

  .nav-unscoped:hover {
    background: rgb(var(--color-overlay)) !important;
  }
}

/* Browse now uses the foreground color as it's main body color, so the default page background doesn't match anymore */
@-moz-document url-prefix("https://anilist.co/search/"),
url-prefix("https://anilist.co/airing") {
  .page-content .search {
    background: rgb(var(--color-background))
  }

  /*  Swap a bunch of colors to match the rest of the site  */
  .filters .search-wrap,
  .filters .search-wrap .search,
  .filters .select,
  .extra-filters-wrap .open-btn,
  .media-card .hover-data {
    transition: background 0.4s ease 0s;
    background: rgb(var(--color-foreground));
  }

  .results.chart .media-card,
  .results.table .media-card,
  .airing .media-card {
    transition: background 0.4s ease 0s;
    background: rgb(var(--color-foreground));
  }

  .results.chart .media-card .footer,
  .airing .media-card .footer {
    transition: background 0.4s ease 0s;
    background: rgb(var(--color-foreground-blue));
  }
  
  .selects-wrap .dropdown {
    background: rgb(var(--color-background-200)) !important;
  }
}

@-moz-document url-prefix("https://anilist.co/apps") {
  .app-section {
    background: rgb(var(--color-background-100)) !important;
  }
}

@-moz-document url-prefix("https://anilist.co/studio/") {
  .studio {
    background: rgb(var(--color-background-100)) !important;
  }
  
  .media-card .hover-data {
    transition: background 0.4s ease 0s;
    background: rgb(var(--color-foreground));
  }
}

AniListTweaks_Accentify.user.js

// ==UserScript==
// @name         Accentify
// @namespace    https://animouto.moe/
// @version      1.0.0
// @description  Changes AniList's accent color from blue to match your profile color.
// @author       TehNut
// @match        https://anilist.co/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  const hexToRgb = (hex) => {
    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
    return result ? {
      r: parseInt(result[1], 16),
      g: parseInt(result[2], 16),
      b: parseInt(result[3], 16)
    } : null;
  };

  const color = JSON.parse(window.localStorage.auth).options.profileColor;
  if (color.startsWith("#")) {
    const rgb = hexToRgb(color);
    document.body.style.setProperty("--color-blue", `${rgb.r},${rgb.g},${rgb.b}`);
  } else {
    document.body.classList.add("user-page-unscoped", color)
  }
})();

AniListTweaks_BetterScrollers.user.css

/* ==UserStyle==
@name        AniList Better Scrollers
@namespace   TehNut
@version     1.0.3
@homepageURL https://gist.github.com/TehNut/f1ee6e5ff26a5a419850458797770f38
@updateURL   https://gist.githubusercontent.com/TehNut/f1ee6e5ff26a5a419850458797770f38/raw/AniListTweaks_BetterScrollers.user.css
@license     MIT
@author      TehNut
==/UserStyle== */

@-moz-document domain(anilist.co) {
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: rgb(var(--color-foreground-grey));
  }

  ::-webkit-scrollbar-thumb {
    background: rgb(var(--color-blue));
  }
  
  /* Limited Firefox support. Currently does not apply to the full page, only scrollable elements within the page. */
  body {
    scrollbar-color: rgb(var(--color-blue)) rgb(var(--color-background));
  }
  
  /* Adding "[class^="text"] .markdown" will also match text posts in the activity feed. Currently this only matches a user's about section. */
  .about [class^="content-wrap"] {
    overflow: auto !important;
  }
}

AniListTweaks_CircleAvatars.user.css

/* ==UserStyle==
@name        AniList Circle Avatars
@namespace   TehNut
@version     1.0.1
@homepageURL https://gist.github.com/TehNut/f1ee6e5ff26a5a419850458797770f38
@updateURL   https://gist.githubusercontent.com/TehNut/f1ee6e5ff26a5a419850458797770f38/raw/AniListTweaks_CircleAvatars.user.css
@license     MIT
@author      TehNut
@var         text drop-shadow "Drop shadow size" drop-shadow(0 0 0.25rem black)
==/UserStyle== */

@-moz-document domain(anilist.co) {
  a[class^="avatar"],
  a[class="follow"] div[class="avatar"],
  img[class="avatar"],
  div[class="follow-card"] div[class="avatar"],
  div[class^="forum-thread"] div[class="avatar"],
  div[class="user"] div[class="avatar"],
  div[class="comment"] div[class="avatar"] {
    border-radius: 50% !important;
    filter: var(--drop-shadow);
  }

  div[class^="wrap"] div[class^="users"] {
    border-radius: 20px !important;
    filter: var(--drop-shadow);
  }
}

AniListTweaks_ColoredSmilies.user.css

/* ==UserStyle==
@name        AniList Colored Smilies
@namespace   TehNut
@version     1.0.0
@homepageURL https://gist.github.com/TehNut/f1ee6e5ff26a5a419850458797770f38
@updateURL   https://gist.githubusercontent.com/TehNut/f1ee6e5ff26a5a419850458797770f38/raw/AniListTweaks_ColoredSmilies.user.css
@license     MIT
@author      TehNut
@var         text smile-color "Color of smiling smiley" rgb(var(--color-green))
@var         text meh-color "Color of indifferent smiley" rgb(var(--color-yellow))
@var         text frown-color "Color of frowning smiley" rgb(var(--color-red))
==/UserStyle== */

@-moz-document domain(anilist.co) {
    svg[data-icon="smile"] {
        color: var(--smile-color);
    }

    svg[data-icon="meh"] {
        color: var(--meh-color);
    }

    svg[data-icon="frown"] {
        color: var(--frown-color);
    }
}

AniListTweaks_ExtraDarcc.user.css

/* ==UserStyle==
@name        AniList Extra Darcc
@namespace   TehNut
@version     1.0.0
@homepageURL https://gist.github.com/TehNut/f1ee6e5ff26a5a419850458797770f38
@updateURL   https://gist.githubusercontent.com/TehNut/f1ee6e5ff26a5a419850458797770f38/raw/AniListTweaks_ExtraDarcc.user.css
@license     MIT
@author      TehNut
==/UserStyle== */

@-moz-document domain(anilist.co) {
  .el-dropdown-menu {
      background-color: rgb(var(--color-foreground-blue-dark));
  }

  .el-dropdown-menu__item--divided {
      border-top: 1px solid rgb(var(--color-foreground-blue-dark));
  }

  .el-dropdown-menu__item--divided:before {
      background-color: rgb(var(--color-foreground-blue-dark));
  }

  .el-select-dropdown {
      background-color: rgb(var(--color-foreground-blue-dark));
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item:hover {
      background-color: rgb(var(--color-blue));
      color: rgb(var(--color-white));
  }

  .el-popper[x-placement^=top] .popper__arrow {
      border-top-color: rgb(var(--color-foreground-blue-dark));
  }

  .el-popper[x-placement^=top] .popper__arrow:after {
      border-top-color: rgb(var(--color-foreground-blue-dark));
  }

  .el-popper[x-placement^=bottom] .popper__arrow {
      border-bottom-color: rgb(var(--color-foreground-blue-dark));
  }

  .el-popper[x-placement^=bottom] .popper__arrow:after {
      border-bottom-color: rgb(var(--color-foreground-blue-dark));
  }

  .quick-search .el-select .el-input .el-input__inner,
  .quick-search .el-select .el-input.is-focus .el-input__inner {
      background: rgb(var(--color-foreground-blue-dark))
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item a:visited:hover {
      color: rgb(var(--color-white));
  }

  .el-select-dropdown__item.hover,
  .el-select-dropdown__item a:hover {
      color: rgb(var(--color-white));
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
      background-color: rgb(var(--color-foreground-grey))
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
      background-color: rgb(var(--color-foreground))
  }
}

AniListTweaks_MAL2AL.user.js

// ==UserScript==
// @name         MAL -> AniList
// @namespace    https://waifu.me
// @version      1.0.2
// @description  Adds a button to MAL entries that links to the AL entry.
// @author       TehNut
// @match        https://myanimelist.net/anime/*
// @match        https://myanimelist.net/manga/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

const embeddedHtml = '<div><a href="${anilistLink}" class="js-favorite-button" style="font-weight:normal;border:none;"><span>View on AniList</span></a></div>';
const anilistQuery = `
query($mal_id: Int, $type: MediaType) {
  Media(idMal: $mal_id, type: $type){
    siteUrl
  }
}
`;
const anilistCall = (query, variables) =>
  fetch('https://graphql.anilist.co', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      Accept: 'application/json',
    },
    body: JSON.stringify({
      query,
      variables,
    }),
  });

// Entrypoint
(() => {
    'use strict';
    const path = window.location.pathname;
    if (path.startsWith("/anime") || path.startsWith("/manga")) {
        const pathSplit = path.split("/");
        let link = GM_getValue(pathSplit[2], null);
        if (link) {
            document.getElementById("profileRows").insertAdjacentHTML('beforeend', embeddedHtml.replace("${anilistLink}", link));
        } else {
            console.log("Media of ID " + pathSplit[2] + " has not been queried before");
            anilistCall(anilistQuery, { mal_id: pathSplit[2], type: pathSplit[1].toUpperCase() })
                .then(res => res.json())
                .then(res => res.data)
                .then(res => {
                    GM_setValue(pathSplit[2], res.Media.siteUrl);
                    document.getElementById("profileRows").insertAdjacentHTML('beforeend', embeddedHtml.replace("${anilistLink}", res.Media.siteUrl))
                });
        }
    }
})();

AniListTweaks_MoveBrowseStatusIndicator.user.css

/* ==UserStyle==
@name        AniList Move Browse Status Indicator
@namespace   TehNut
@version     1.0.0
@homepageURL https://gist.github.com/TehNut/f1ee6e5ff26a5a419850458797770f38
@updateURL   https://gist.githubusercontent.com/TehNut/f1ee6e5ff26a5a419850458797770f38/raw/AniListTweaks_MoveBrowseStatusIndicator.user.css
@license     MIT
@author      TehNut
@var         text drop-shadow "Drop shadow size" drop-shadow(0 0 0.25rem black)
==/UserStyle== */

@-moz-document domain("anilist.co") {
  div[class^="list-status"] {
    z-index: 2;
    right: -21px;
    left: unset !important;
  }
}

AniListTweaks_NoFeedSwitcher.user.css

/* ==UserStyle==
@name           No Feed Switcher
@namespace      TehNut
@version        1.0.0
@homepageURL https://gist.github.com/TehNut/f1ee6e5ff26a5a419850458797770f38
@updateURL   https://gist.githubusercontent.com/TehNut/f1ee6e5ff26a5a419850458797770f38/raw/AniListTweaks_NoFeedSwitcher.user.css
@description    Removes the feed switcher from AniList's home page
@author         TehNut
==/UserStyle== */

@-moz-document domain("anilist.co") {
  .feed-select {
    display: none !important;
  }
}