// ==UserScript== // @name AniList Black Theme Plus+ // @namespace anilist.co // @version 0.9.5 // @description Makes the dark theme black and grey instead of midnight blue. Increases information density in a few places. // @author Korakys // @license CC0 // @grant GM_addStyle // @run-at document-start // @match *://*.anilist.co/* // @downloadURL none // ==/UserScript== (function() { let css = ` .site-theme-dark { --color-background: 0, 0, 0; --color-foreground: 31,35,45; --color-foreground-grey: 25, 29, 38; --color-foreground-grey-dark: 6,12,19; --color-foreground-blue: 15,22,31; --color-foreground-blue-dark: 6,12,19; --color-text: 230, 230, 230; --color-text-light: 179, 190, 203; --color-text-lighter: 183, 200, 215; --color-shadow-blue: 0,5,15; --color-background-1200: 251,251,251; --color-background-1100: 240,243,246; --color-background-1000: 221,230,238; --color-background-900: 201,215,227; --color-background-800: 173,192,210; --color-background-700: 139,160,178; --color-background-600: 116,136,153; --color-background-500: 100,115,128; --color-background-400: 81,97,112; --color-background-300: 30,42,56; --color-background-100: 21,31,46; --color-background-200: 0, 0, 0; --color-gray-1200: 251,251,251; --color-gray-1100: 240,243,246; --color-gray-1000: 221,230,238; --color-gray-900: 201,215,227; --color-gray-800: 173,192,210; --color-gray-700: 139,160,178; --color-gray-600: 116,136,153; --color-gray-500: 100,115,128; --color-gray-400: 81,97,112; --color-gray-300: 30,42,56; --color-gray-100: 21,31,46; --color-gray-200: 9,17,27; } /* .site-theme-dark { --color-background: 0, 0, 0; --color-text: 230, 230, 230; --color-text-light: 179, 190, 203; --color-text-lighter: 183, 200, 215; --color-foreground: 31, 35, 45; --color-footer: 17, 22, 29; --color-foreground-grey: 25, 29, 38; } */ div.stats-wrap, div.section { --color-green: 32, 143, 255; } .el-dropdown-menu { background-color: rgba(var(--color-foreground)); } .el-dropdown-menu, .el-dropdown-menu__item { color: rgba(var(--color-text)); } .el-dropdown-menu__item--divided::before { background-color: rgba(var(--color-foreground)); } .el-select-dropdown { background-color: rgba(var(--color-background)); } .el-select-dropdown__list { background: rgba(var(--color-background)); } .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background-color: rgba(var(--color-foreground)); color: rgba(var(--color-text)); } .el-input, .el-textarea { background: rgba(var(--color-foreground)); border-radius: 4px; color: rgba(var(--color-text)); } .quick-search .el-select .el-input .el-input__inner, .quick-search .el-select .el-input.is-focus .el-input__inner { background: rgba(var(--color-foreground)); } .user-social .user-follow .user:last-child::after { position: relative; left: 2px; top: -20px; opacity: 1; background: black; } .feed-type-toggle > div.active[data-v-0375ca51] { background: rgba(var(--color-foreground-grey)); } div.header-wrap > div.header { background: rgba(var(--color-foreground)); } div.header-wrap > div > div > div.content > div { padding-top: 0px; background: rgba(var(--color-foreground)); } .view-all[data-v-bc8df890] { font-size: 1.2rem; cursor: pointer; font-weight: 500; transition: .2s; color: rgba(var(--color-text-lighter)); margin-bottom: 18px; border-radius: 3px; display: block; padding: 10px; background-color: rgba(var(--color-foreground)); } div#nav.transparent { background: rgba(var(--color-foreground)) !important; } .markdown-editor { margin-top: 10px !important; background: rgba(var(--color-text), 0.1) !important; } .like[data-v-3403fd1b], .favourite[data-v-6fc01770] { border: solid 1px rgba(var(--color-red)); background-color: rgba(var(--color-foreground)); } .section-header > .el-dropdown > .el-dropdown-menu { display: inline!important; background-color: transparent!important; margin-left: -500px; margin-top: -20px; } .section-header > .el-dropdown > .el-dropdown-menu > .el-dropdown-menu__item { display: inline; list-style-type: none; background-color: transparent!important; } .section-header > .el-dropdown > .el-dropdown-menu > .el-dropdown-menu__item:hover { background-color: transparent!important; } .section-header > .el-dropdown > .el-dropdown-selfdefine { display: none; } .banner-content .name { font-weight: bold; text-shadow: 2px 2px 2px rgba(0, 0, 0, 1); } /*****hoh fixes*****/ .favourite.studio::after { margin-left: 2.5px !important; } #app > .nav { border-top: none !important; background: rgba(var(--color-foreground)) !important; } div.following > div { margin-top: 5px; } .social > div:nth-child(2) > div:nth-child(2) { margin-top: 10px; } .nav[data-v-bc28d33a] { background: rgba(var(--color-foreground)); color: rgba(var(--color-text)); } .hohSubMenu { background: rgba(var(--color-foreground)); color: rgba(var(--color-text)); } .hohTime { font-size: 16px; } #dropdown-menu-6846 { font-size: 14px; font-weight: 500; } .section-header > .el-dropdown > .el-dropdown-menu { margin-left: -24em; position: absolute !important; } /*---Simple Feed---*/ .hohFeed .hohButton { margin: 0px; filter: initial; } .hohFeed > div > button { top: 15px !important; } .hohFeed > div > button:nth-child(4) { left: 255px !important; } .hohFeed > div > button:nth-child(5) { left: 350px !important; } .hohFeed > div > .link.newTab { top: 17px !important; right: initial !important; left: 465px !important; font-size: 2rem !important; } .container.termsFeed { margin-left: 15px !important; } .sidebar { right: 20px !important; left: initial !important; } /*---Name spacing fixes---*/ .header > .name { margin-left: 10px !important; } .hohSocialTabActivityCompressedName, .name[data-v-1b55336e] { margin-left: 0px !important; } .list .name[data-v-69758bac] { padding-bottom: 7px; } .hohSocialTabActivityCompressedName { padding-top: 5px; } .hohSocialTabActivityCompressedStatus { padding-top: 5px; } /*data*/ .text .donator-badge[data-v-f6f14f80] { top: 19px; } /*ends*/ .list-stats.content-wrap { margin-bottom: 1em !important; } /*———SITEWIDE———*/ h2.link, .sidebar > .data > .data-set a { color: rgba(var(--color-blue)); } /*---Activities---*/ .actions .count[data-v-6994d971] { font-size: inherit; } .wrap[data-v-6994d971] { font-size: 1.4rem; } .actions[data-v-6994d971], .donator-badge[data-v-6994d971], .time[data-v-6994d971], .actions[data-v-0664fa9f] { font-weight: 600; } .media-embed { display: inline-block; } /*---Nav bar---*/ .wrap .link.router-link-exact-active.router-link-active, .nav .link.router-link-exact-active.router-link-active { background: rgba(var(--color-foreground-grey)); color: rgba(var(--color-blue)); } .links[data-v-4fbac4e1] { font-size: 1.4rem; font-weight: 500; color: rgba(var(--color-text)); } .dropdown[data-v-38edf8f8] { left: 65px; } /*---Footer---*/ .links a[data-v-5a740dfa] { padding: 0px; } .links[data-v-5a740dfa] { font-size: 1.2rem; margin-left: initial; } .page-content { min-height: initial; } .wrap > .footer { background: rgba(var(--color-nav)); padding: 7px; margin-top: 90px; } /*———HOME———*/ /*---Main feed container---*/ /*data*/ .activity-feed-wrap[data-v-7b8d25f2] { margin-top: 0px; max-width: 50em; } .home { max-width: 81em; } /*data*/ .reply[data-v-5a191921] { margin-bottom: 5px; } .el-checkbox__input.is-focus .el-checkbox__inner { border-color: rgba(var(--color-blue)); } .el-checkbox .el-checkbox__inner { background: rgba(var(--color-background)); } .markdown hr { border: solid 2px rgba(var(--color-text), 0.2); } .list-editor-wrap .header:after { background: rgba(31, 40, 53, .15); } .markdown-editor { border-radius: 3px; padding: 6px 20px; background: rgba(var(--color-text), 0.06); } .markdown-editor .svg-inline--fa { height: 0.8em; } .button.cancel { border-radius: 3px; padding: 5px 10px; height: 24px; } .button.save { border-radius: 3px; padding: 5px 10px; height: 24px; } .el-input, .el-textarea { border-radius: 3px; } .btn.btn-danger { border-radius: 3px; padding: 7px 10px; font-size: 1.2rem; } .el-scrollbar { border: 1px solid rgba(var(--color-text), 0.1); } .el-popper[x-placement^=top] { background: rgba(var(--color-foreground-grey)); } .el-popper[x-placement^=top] .popper__arrow { border-top-color: rgba(var(--color-text), 0.1); } .el-popper[x-placement^=top] .popper__arrow:after { border-top-color: rgba(var(--color-foreground)); } .markdown .markdown-spoiler:before { color: rgba(var(--color-blue)); } /*———PROFILE———*/ .activity-text .text { padding: 8px; padding-bottom: 20px; } .activity-message .text { padding: 8px; } /*data*/ .activity-feed-wrap[data-v-09492909] { margin-top: 11px; } /*data*/ .overview[data-v-2cf72664] { margin-top: 20px; } /*data*/ .history-day[data-v-514856af] { background: rgba(var(--color-background)); } .shadow { display: none; } .actions .count[data-v-568e7548] { font-size: inherit; } .activity-markdown p:first-of-type { -webkit-margin-before: 0; } .activity-replies .reply { border-radius: 3px; } .page-content > .container > .activity-entry .activity-replies { margin-top: 5px !important; } .reply-markdown p:first-of-type { -webkit-margin-before: 0; } .reply-wrap .activity-replies { margin: 5px 0px 20px 56px; } .activity-entry .list { grid-template-columns: 60px auto; min-height: 83px; } .image-overlay .behind-dot { border-radius: 0px 0px 2px 2px; height: 5px; right: 0; top: unset; width: 85px; bottom: 0; } .list-preview .small.info-left .cover { border-radius: 3px; } .list-preview .small .cover { border-radius: 3px; } .media-preview-card.small .content { border-radius: 0 2px 2px 0; } .details .entry-dropdown { left: 3px; top: 3px; } .list-preview span > span:nth-of-type(3) { display: none; } .media-preview .small .cover { border-radius: 3px; } .list-preview .small .cover .image-text { border-radius: 0 0 2px 2px; } .genre-overview .percentage { height: 3px; } .genre-overview.content-wrap .genres { padding: 16px; } .stats-wrap .milestones { font-size: 1rem; padding: 9px 0; } .stats-wrap .progress { height: 3px; } .stats-wrap .milestones .milestone:after { padding-top: 2px; } .list.small { font-size: 1.3rem!important; } .medialist.cards .entry-card .release-status { height: 15px; left: 0; top: 0; width: 15px; border-radius: 4px 0 4px 0; box-shadow: none; border: 1px solid #616161; border-left: none; border-top: none; } .medialist.cards .entry-card .edit { right: 3px; top: 3px; } .activity-entry .wrap { border-radius: 3px; } .favourites .media-preview-card .title { color: rgba(var(--color-blue)); } .stat:not(:first-of-type) { border-left: 1px solid rgba(var(--color-foreground-grey)); } .actions .nav-btn { border-radius: 3px; font-size: 1.2rem; padding: 7px 10px; } .user .overview .content-wrap { border-radius: 3px; } .content-wrap > .stats-wrap { padding: 13px 10px; } .genres .amount { margin-top: 16px; } .markdown > div:last-of-type { -webkit-margin-after: 15px; } .markdown > hr:last-child { margin-bottom: 15px; } /*———ANIME/MANGA———*/ /*data*/ .follow[data-v-69b91520] { padding: 5px 10px; } .thread-card.small { margin-bottom: 10px !important; /*hoh override*/ padding: 0.5em 1em !important; /*hoh override*/ ; } .media .header-wrap .banner { background-position: 50% 16%; } .character .image { border-radius: 3px; } .sidebar > .data { border-radius: 3px; padding: 12px; } .sidebar .tags .tag { height: 30px; border-radius: 3px; } .media-tag-editor .btn { border-radius: 3px; padding: 4px 10px; } .list-editor-wrap .list-editor .body .input-wrap { place-content: start space-evenly; } /*---Score and status distribution boxes---*/ .status-distribution { max-width: 40em; } .media-score-distribution { max-width: 20em; } .media-score-distribution .ct-bar { stroke-width: 7px; } .media-score-distribution .ct-label, .media-score-distribution .label-text { opacity: 1; } .percentage-bar .percentage { height: 4px; } .status:nth-of-type(1) .name, .genre:nth-of-type(1) .name { color: rgba(104, 214, 57); } .status:nth-of-type(2) .name, .genre:nth-of-type(2) .name { color: rgba(2, 169, 255); } .status:nth-of-type(3) .name, .genre:nth-of-type(3) .name { color: rgba(146, 86, 243); } .status:nth-of-type(4) .name, .genre:nth-of-type(4) .name { color: rgba(247, 121, 164); } .status:nth-of-type(5) .name, .genre:nth-of-type(5) .name { color: rgba(232, 93, 117); } .status .name, .genre .name { background: rgba(var(--color-foreground-grey)) !important; border-radius: 3px; font-size: 1.3rem; } /*———BROWSE———*/ .search[data-v-0a4e74f9] { background: inherit; } .filters-wrap[data-v-a679b1ba] { margin-right: inherit !important; } /* cards */ [data-v-0a8281ec] .results { grid-gap: 1em 1em; grid-template-columns: repeat(auto-fill,8em); } .media-card[data-v-3b24ed8f] { width: 8em; } .cover[data-v-3b24ed8f] { height: 12em; } /* top bar */ .extra-filters-wrap[data-v-458a983a] { margin: inherit; margin-bottom: inherit; } .filters[data-v-458a983a] { margin: 0.5em 0 1em; } .secondary-filters[data-v-036a9134] { margin-bottom: 1em; } /* dropdown */ .dropdown[data-v-a679b1ba] { padding: 1em; top: -10px; } .slider[data-v-2d804408] { margin-bottom: 1em; } .tag-filtesr-wrap[data-v-a679b1ba] { padding-top: 1em; } .tag-filtesr-wrap h3[data-v-a679b1ba] { margin-bottom: 1.5em; } .filters-wrap[data-v-a679b1ba] { margin-bottom: 1em; } .header-filters[data-v-128d71ac] { margin-bottom: 1em; } .group[data-v-128d71ac] { margin-bottom: 0.5em; } .tag[data-v-5760f120] { font-size: 1.3rem; font-weight: 500; margin-bottom: 0.5em; margin-right: 0.5em; padding: 0.25em 0.5em 0.15em; } .title[data-v-128d71ac] { font-size: 1.4rem; font-weight: 600; margin-bottom: 0.5em; } /* dropdown tags viewport size */ .scroll-wrap[data-v-128d71ac] { max-height: calc(100vh - 160px); min-height: 350px; overflow: auto; min-width: calc(100vh); } /*---STUDIO---*/ .studio[data-v-6c44e68e] { background: inherit; } /*———FORUM———*/ /*---OP---*/ /*data x3 */ .title[data-v-1f3305c5] { margin-top: 22px; } .header[data-v-1f3305c5] { margin-bottom: 15px; } .forum-thread .header .time { font-size: 1.2rem; } .body[data-v-1f3305c5] { padding: 20px; margin-bottom: 0px; font-size: 1.5rem; } .forum-thread > .body > .footer { padding-top: 10px; } /*---Buttons---*/ .forum-thread .actions[data-v-695bbfa9] { margin-bottom: 0px !important; } .forum-thread .button[data-v-695bbfa9] { height: inherit; padding: 7px 10px; font-size: 1.4rem; border-radius: 3px; border-width: 2px; } .forum-thread .button.subscribe.subscribed { border-color: rgba(var(--color-blue)); font-weight: bold; } .forum-thread .button.comment { padding-left: 10px; padding-right: 15px; } .forum-thread .button.comment .icon { margin-right: 5px; } .footer > .actions > .button.like > .like-wrap > .button.liked { color: #ffaebc !important; } .category { border-radius: 3px !important; } .forum-thread .categories { align-items: center; display: flex; margin-top: 0px !important; } .forum-thread .categories > span { margin-top: 0px !important; } /*---Comments---*/ /*data*/ .forum-thread .comments-header[data-v-d8e54cfe] { margin-top: 5px; } /*data x5 */ .forum-thread .comment[data-v-695bbfa9] { padding: 1em; } .forum-thread .child[data-v-695bbfa9] { margin-left: 1em; } .forum-thread .comment-wrap[data-v-695bbfa9] { margin-bottom: 1em; } .forum-thread .comment-wrap.depth-0[data-v-695bbfa9] { padding-bottom: 1px; margin-bottom: 1em; } .forum-thread .actions[data-v-695bbfa9] { margin-bottom: 0px !important; bottom: inherit !important; align-self: initial; } /*---Editor---*/ .forum-thread .wrap .editor, .forum-thread .preview { padding-top: 10px; border: black 2px solid; } .forum-thread .wrap .preview h2 { font-size: 1.8rem; } /*---Index---*/ .feed .thread-card { padding: 12px; margin-bottom: 10px !important; } .forum-feed .group-header { color: rgba(var(--color-text)) !important; font-weight: bold; background: rgba(var(--color-foreground), .6); padding: 6px; border-radius: 3px; } /*data*/ .filter-group .router-link-active[data-v-35805f65]:not(.inactive) { background: rgba(var(--color-blue)) !important; } .filter-group a:hover { background: rgba(var(--color-blue), .3) !important; color: rgba(255, 255, 255); transition: .2s; } .filter-group > a { background: rgba(var(--color-foreground)); } .overview-header { font-size: 1.8rem !important; } /*———XXX———*/ `; if (typeof GM_addStyle !== "undefined") { GM_addStyle(css); } else { const styleNode = document.createElement("style"); styleNode.appendChild(document.createTextNode(css)); (document.querySelector("head") || document.documentElement).appendChild(styleNode); } })();