☰

AniList Darker

Dark theme with red accent for AniList.

  1. /* ==UserStyle==
  2. @name         AniList Darker
  3. @namespace    github.com/DishankJ/AniList-Darker
  4. @version      1.0.9
  5. @description  Dark theme with red accent for AniList.
  6. @author       Dishank Jaiswal
  7. @homepageURL  https://github.com/DishankJ/AniList-Darker
  8. @supportURL   https://github.com/DishankJ/AniList-Darker/issues
  9. ==/UserStyle== */
  10.  
  11. @-moz-document url-prefix("https://anilist.co") {
  12.  
  13. .site-theme-dark {
  14.     --color-background: 28,31,34;
  15.     --color-foreground: 25, 27, 30;
  16.     --color-blue: 255,105,97;
  17.     --color-foreground-blue: 25, 27, 30;
  18.     --color-background-100: 20,22,24;
  19.     --color-background-200: 17,19,20;
  20.     --color-gray-100: 20,22,24;
  21.     --color-foreground-grey: 20,22,24;
  22.     --color-foreground-grey-dark: 17,19,20;
  23. }
  24.  
  25. .banner[data-v-b5c85c0a] {
  26.     height: 260px;
  27. }
  28.  
  29. .behind-accent[data-v-16d5094e] {
  30.     background: #ff8e88;
  31.     height: .9px;
  32. }
  33.  
  34. @media (max-width: 760px) {
  35.     .banner[data-v-b5c85c0a] {
  36.         height: 135px;
  37.     }
  38. }
  39.  
  40. .small .cover .image-text[data-v-4b71d7c6] {
  41.     background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.1));
  42. }
  43.  
  44. .footer[data-v-6f9ee47f] {
  45.     background: rgb(20,22,24);
  46. }
  47.  
  48. .hamburger[data-v-8aeb5e9a], .menu[data-v-8aeb5e9a] {
  49.     box-shadow: 0 1px 20px rgba(0,0,8,.2);
  50. }
  51.  
  52. .site-theme-dark .nav-unscoped {
  53.     background: #16191b;
  54. }
  55.  
  56. .site-theme-dark .nav-unscoped.transparent {
  57.     background: rgba(22,25,27,.5);
  58. }
  59.  
  60. .site-theme-dark .nav-unscoped.transparent:hover {
  61.     background: #16191b;
  62. }
  63.  
  64. .site-theme-dark .quick-search {
  65.     background: rgba(17,19,20,.9);
  66. }
  67.  
  68. h2[data-v-6f9ee47f] {
  69.     color: #ff6961;
  70. }
  71.  
  72. .banner .shadow[data-v-b5c85c0a] {
  73.     background: rgba(20,22,24,.7);
  74. }
  75.  
  76. .user-page-unscoped.red .progress .bar {
  77.     background: linear-gradient(270deg,#ff8e88,#f78c9b);
  78. }
  79.  
  80. .feed-type-toggle>div.active[data-v-7b8d25f2] {
  81.     color: #ff8e88;
  82. }
  83.  
  84. .progress[data-v-5d42c114] {
  85.     background-color: #ff8e88;
  86. }
  87.  
  88. .el-message--success {
  89.     background-color: rgba(16,16,16,.85);
  90.     border: 0px solid black;
  91. }
  92.  
  93. .el-icon-success:before {
  94.     color: #ff8e88;
  95. }
  96.  
  97. .el-message--success .el-message__content {
  98.     color: #ff8e88;
  99. }
  100.  
  101. h1 {
  102.     font-weight: 500;
  103. }
  104.  
  105. }
  106.  
  107. @-moz-document regexp("^https://anilist.co/anime/.*/.*/watch") {
  108.  
  109. @media screen and (max-width: 760px) {
  110.     .external-links[data-v-da429fba] {
  111.         display: inline;
  112.     }
  113. }
  114.  
  115. @media (max-width: 1040px) {
  116.     .watch[data-v-7e52d138] {
  117.     margin-top: 20px;
  118.     }
  119. }
  120.  
  121. @media (max-width: 760px) {
  122.     .data[data-v-c657baee] {
  123.     display: none;
  124.     }
  125. }
  126.  
  127. .content[data-v-da429fba] {
  128.     margin-top: 18.5px;
  129. }
  130.  
  131. }
  132.  
  133. @-moz-document regexp("^https://anilist.co/manga/.*/.*/stats") {
  134.  
  135. @media screen and (max-width: 760px) {
  136.     .external-links[data-v-da429fba] {
  137.         display: inline;
  138.     }
  139. }
  140.  
  141. @media screen and (max-width: 760px) {
  142.     .data[data-v-c657baee] {
  143.         display: none;
  144.     }
  145. }
  146.  
  147. .content[data-v-da429fba] {
  148.     margin-top: 18.5px;
  149. }
  150.  
  151. }