A dark mode for MyAnimeList

_mal_dark_mode.md

mal_dark_mode.css

:root {
  --bg: hsl(0, 0%, 8%);
  --bgL1: hsl(0, 0%, 12%);
  --bgL2: hsl(0, 0%, 16%);
  --bgL3: hsl(0, 0%, 20%);
  --text: #EEEEEE;
  --textD1: #E0E0E0;
  --textD2: #BDBDBD;
  --blueL2: hsl(222, 30%, 59%);
  --blueL1: hsl(222, 68%, 66%);
  --blue: hsl(222, 68%, 59%);
  --blueD1: #2E51A2;
  --blueD2: #254183;
  --blueD3: hsl(223, 35%, 25%);
}

body {
  background-color: var(--bg) !important;
}
  
.page-common #headerSmall, .page-common #contentWrapper, .page-common #content, .ranking-digest, .page-common .header-profile.link-bg, .page-common .header-profile.link-bg:hover, .episode_list .episode-list-data td, .page-common .bgColor2, .page-common #horiznav_nav ul li, .user-profile .user-status li, .majorPad .friendHolder, .top-ranking-table tr.ranking-list td, .navi-seasonal, .navi-seasonal .horiznav_nav ul li a, .navi-seasonal .horiznav_nav ul li a.navtab, .season .anime-seasonal-byseason tr, #fancybox-outer, .ownlist_anime_update #advanced-button .toggle-button, .ownlist_manga_update #advanced-button .toggle-button, .page-common .incrementalSearchResultList, .page-common .incrementalSearchResultList .list, .anime-detail-header-stats .anime-detail-header-affiliate-dialog, .page-forum .forum_boardrow1, .profile .user-comments .comment:nth-of-type(odd), .page-forum .forum_boardrowspacer, .page-common .quotetext, .page-common .codetext, .page-common .social-login-block:after, .widget-slide-block .widget-slide .btn-anime .external-link, .page-common .fn-grey6, body.news .news-container .news-info-block, body.news .news-container .tags, body.news .news-container .tags .tag {
  background-color: var(--bg);
}

.di-t.w100.mb8 {
  background-color: var(--bg) !important;
}

.initialize-tutorial, .page-common a.button_add.button_add, .page-common a.button_add.button_edit, .page-common a.button_edit.button_add, .page-common a.button_edit.button_edit, .ranking-digest .ranking-header, .anime-detail-header-stats .stats-block, .detail-characters-list .left-column table:nth-of-type(even), .detail-characters-list .left-right table:nth-of-type(even), .user-profile .user-status li:nth-of-type(even), .profile .statistics-updates .data .graph, .user-profile .user-function .icon-user-function, .user-profile .user-function .icon-user-function.icon-message.disabled, .user-profile .user-function .icon-user-function.icon-request.disabled, .user-profile .user-function .icon-user-function.icon-message.disabled:hover, .user-profile .user-function .icon-user-function.icon-request.disabled:hover, .user-profile .user-compatability-graph .bar-outer, .episode_list .episode-list-data:nth-of-type(odd) td, .page-common .bgColor1, .top-ranking-table tr.ranking-list:nth-of-type(odd) td, .page-common .pagination .link, .navi-seasonal .horiznav-nav-seasonal .btn-seasonal .btn-type, .seasonal-anime-list .seasonal-anime .genres, .seasonal-anime-list .seasonal-anime .information .info, .seasonal-anime-list .seasonal-anime .information .scormem, .season .anime-seasonal-byseason tr:nth-of-type(odd), .page-common .goodresult, .page-common .successQuery, select, .page-common .inputtext, .page-common .textarea, .page-common #searchBar.searchBar #topSearchValue, .page-common .incrementalSearchResultList .list.separator, .page-forum .forum-table-header, .page-forum .forum_boardrow2, .profile .user-comments .comment, .btn-rect-grey1, .page-common .btn-forum, .anime-search-form-block .anime-search-form-search .inputButton, .page-common #horiznav_nav ul li a, .membership .about-membership .plan-header, .membership .about-membership .plan, .membership .about-membership .about-no-ads, .forum .forum-board:nth-of-type(even), .page-common .footer-ranking, .news-list .comment-list:nth-of-type(even) {
  background-color: var(--bgL1);
}

.page-common .btn-form-submit.small {
  background-color: var(--bgL2);
}

.page-common .header-profile.link-bg.on, .page-common .header-profile.link-bg.on:hover, .user-profile .user-status li.link:hover, .user-profile .user-status li.link:active, .episode_list .episode-list-header, .seasonal-anime-list .seasonal-anime .prodsrc, .user-status-block .form-user-status, .user-status-block .form-user-score, .user-status-block .form-user-episode, .user-status-block .form-user-episode input[type=text], .page-common #searchBar.searchBar #topSearchButon.notActive, .page-common #searchBar.searchBar #topSearchButon, .page-common .incrementalSearchResultList .list.focus, .btn-rect-grey1:hover, .page-common #header-menu .header-menu-login .btn-login:hover {
  background-color: var(--bgL3) !important;
}

.page-common .incrementalSearchResultList .list.list-bottom.focus {
  background-color: var(--blue);
}

.page-common #menu, .page-common #nav ul a:hover {
  background-color: var(--blueD1) !important;
}

.page-common .incrementalSearchResultList .list.list-bottom, .page-forum .forum_category, .search_all .result-header, .search_all .btn-search-more, .page-common .btn-form-submit, .forum .forum-header {
  background-color: var(--blueD2);
}

.page-common .h1, .page-common #footer-block, .page-common #nav li a:hover, .page-common #nav li.hover a {
  background-color: var(--blueD3);
}

body, .page-common .header-profile-link, .page-common .header-profile-link:hover, .initialize-tutorial, body.index .widget .widget-header, .page-common.announcement .announce-header h2, .page-common.announcement .announce-contents p, .page-common .h1, .ranking-digest .ranking-header, .anime-detail-header-stats .stats-block .score, .anime-detail-header-stats .stats-block .numbers, .page-common h2, .page-common .content-container .container-right h2, .page-common .normal_header, .episode_list .episode-list-header td, .episode_list .episode-list-data td, .episode_list .icon-episode-type-bg, .detail-page-featured-article .news-list .news-unit .news-unit-right .text, .top-ranking-table .score .text.on, .top-ranking-table .your-score .text.on, .news-list .comment-list .text, .news-list .news-unit .text, body.news .news-side-block .header, body.news .featured-side-block .header, body.news .columnist-side-block .header, body.news .tag-side-block .header, .page-common .fn-black, body.news .menu-category .btn-category.selected, select, .page-common .inputtext, .page-common .textarea, .user-status-block .form-user-episode, .page-common .incrementalSearchResultList .list.separator, .page-common .incrementalSearchResultList .list.list-bottom.focus a, .amazon-ads.anime-manga-detail.bottom div#amzn-native-ad-0 .amzn-native-header .amzn-native-header-text, .page-forum .forum_locheader, body.news .news-container .title a, body.news .news-container .content, body.news .news-container .tags .tag {
  color: var(--text) !important;
}

.anime-detail-header-stats .stats-block .score:after, .anime-detail-header-stats .stats-block .information, .total_messages, .seasonal-anime-list .seasonal-anime .information .info, .seasonal-anime-list .seasonal-anime .information .scormem, .seasonal-anime-list .seasonal-anime .prodsrc .source, .page-common .incrementalSearchResultList .list .on .info .media-type, .page-common .incrementalSearchResultList .list .on .info .extra-info, .page-common #nav li a:hover, .page-common #nav li.hover a, .membership .about-membership .plan .plan-monthly .plan-name, .membership .about-membership .plan .plan-annually .plan-name, .membership .about-membership .about-extras .about-extras-content .header, .membership .about-membership .about-no-ads .text .description, .forum .forum-side-block .header {
  color: var(--textD1);
}

.page-common .dark_text, .page-common .dark_text:hover, .page-common .dark_text, .news-list .comment-list .information .tags .tag, .news-list .news-unit .information .tags .tag, body.news .tag-side-block .tag-cloud .tag, body.news .menu-category .btn-category, .page-common .fn-grey2, .page-common #searchBar.searchBar #topSearchValue, .anime-detail-header-stats .anime-detail-header-affiliate-dialog:before, .video-providers, .page-forum .forum_postusername a, .anime-search-form-block .anime-search-form-search .inputButton.notActive, .forum .forum-board, .page-common .fn-grey5, .page-common .fn-grey6 {
  color: var(--textD2) !important;
}

body.news .news-side-block .news-list .news .information .comment, body.news .news-side-block .news-list .featured .information .comment, body.news .news-side-block .featured-list .news .information .comment, body.news .news-side-block .featured-list .featured .information .comment, body.news .featured-side-block .news-list .news .information .comment, body.news .featured-side-block .news-list .featured .information .comment, body.news .featured-side-block .featured-list .news .information .comment, body.news .featured-side-block .featured-list .featured .information .comment, .ranking-digest .ranking-header .btn-view_more, .navi-seasonal .horiznav-nav-seasonal .btn-seasonal .btn-type, .ownlist_anime_update #advanced-button .toggle-button, .ownlist_manga_update #advanced-button .toggle-button, .page-common .incrementalSearchResultList .list .off .info.anime .name, .page-common .incrementalSearchResultList .list .off .info.manga .name, .page-common .incrementalSearchResultList .list .off .info.news .name, .page-common .incrementalSearchResultList .list .off .info.featured .name, .page-common .incrementalSearchResultList .list .off .info.forum .name, .page-common .btn-form-submit.small {
  color: var(--blue);
}

.page-common a:hover, .page-common #searchBar.searchBar #topSearchButon, .page-common .incrementalSearchResultList .list .on .info .name, .anime-search-form-block .anime-search-form-search .inputButton, .page-common a, .page-common a:visited, .page-common .goodresult a:link, .page-common .goodresult a:active, .page-common .goodresult a, .page-common .goodresult a:visited, .ranking-digest a, .ranking-digest a:visited, a.header-right, .navi-seasonal .horiznav_nav ul li a, .page-common #horiznav_nav ul li a, .page-common #profileRows a, .page-common .profileRows a {
  color: var(--blueL1);
}

.user-status-block .form-user-score {
  color: var(--blueL1) !important;
}

.forum .forum-side-block .forum-side-list .forum-post .information .comment {
  color: var(--blueL2);
}

.page-common .header-message-button, .page-common .header-list-button, .page-common .header-notification-button {
  color: var(--blueD1) !important;
}
  

.initialize-tutorial a, .initialize-tutorial a:visited {
  color: #FF6D00 !important;
}

.page-common .badresult {
  color: #000000;
}

body.index .left-column, .page-common #content, .initialize-tutorial, body.index .widget .widget-header, .news-list .comment-list, .news-list .news-unit, body.index .widget.my_list_updates .item, body.index .widget.friend_list_updates .item, body.index .widget.clubs .item, body.index .widget.reviews .item, .page-common .borderClass, .page-common a.button_add.button_add, .page-common a.button_add.button_edit, .page-common a.button_edit.button_add, .page-common a.button_edit.button_edit, .page-common #header-menu>.border:before, .page-common .h1, .ranking-digest .ranking-header, .page-common h2, .detail-characters-list .left-column.divider:after, .page-common .content-container .container-right h5, .page-common .content-container .container-left, .user-profile .user-status.border-top, .user-profile h4, .page-common .normal_header, .page-common .border_top, .episode_list .episode-list-header td:last-of-type, .page-common .border_bottom, body.news .news-side-block .header, body.news .featured-side-block .header, body.news .news-side-block .news-list .news, body.news .news-side-block .news-list .featured, body.news .news-side-block .featured-list .news, body.news .news-side-block .featured-list .featured, body.news .featured-side-block .news-list .news, body.news .featured-side-block .news-list .featured, body.news .featured-side-block .featured-list .news, body.news .featured-side-block .featured-list .featured, body.news .content-left, body.news .tag-side-block .header, body.news .columnist-side-block .header, body.news .menu-category, .navi-seasonal .horiznav_nav ul li a.navtab, .navi-seasonal .horiznav-nav-seasonal, .seasonal-anime-list .seasonal-anime, .seasonal-anime-list .seasonal-anime .genres, .seasonal-anime-list .seasonal-anime .information, #dialog, .user-status-block .form-user-episode, .page-common .incrementalSearchResultList, .page-common .incrementalSearchResultList .list:last-of-type, .anime-detail-header-stats .anime-detail-header-affiliate-dialog, .page-forum .forum_boardrow1, .amazon-ads.anime-manga-detail.bottom div#amzn-native-ad-0 .amzn-native-header .amzn-native-header-text, .page-common .borderDark, .pb24 .borderDark div, .sitemap__category, .sitemap__category__title, .episode_list td, .page-forum .sig, .search_all .content-result .list, .search_all .content-result .content-left, .page-common .incrementalSearchResultList .list, .forum .forum-board, .forum .forum-side-block .header, .forum .forum-side-block .forum-side-list .forum-post, .page-common .quotetext, .page-common .codetext, .page-common .social-login-block, body.news .news-breadcrumbs {
  border-color: var(--bgL2) !important;
}

.anime-detail-header-stats .stats-block, .page-common .fn-grey6, .profile .statistics-updates .data .graph, .anime-detail-header-stats .stats-block .information, .user-profile .user-function .icon-user-function.icon-comment, .user-profile .user-function .icon-user-function.icon-message, .user-profile .user-function .icon-user-function.icon-request, .user-profile .user-function .icon-user-function.icon-remove, .user-profile .user-compatability-graph .bar-outer, .season .anime-seasonal-byseason td, .top-ranking-table tr td, .episode_list .episode-list-header td, select, .page-common .inputtext, .page-common .textarea, .page-common #searchBar.searchBar #topSearchButon.notActive, .page-common #searchBar.searchBar #topSearchButon, .page-common .incrementalSearchResultList .list:last-of-type, .page-forum .forum_boardrow2, .episode_list tr:nth-of-type(odd) td, .btn-rect-grey1, .anime-search-form-block .anime-search-form-search .inputButton, .membership .about-membership .plan-header, .membership .about-membership .plan, .membership .about-membership .about-new-feature, .forum .forum-board:nth-of-type(even), .page-common .footer-ranking .ranking-unit h3.title {
  border-color: var(--bgL3) !important;
}

.page-common .btn-forum {
  border-color: var(--blueD1);
}

.page-common .h1 {
  border-bottom-color: var(--blueD1) !important;
}

.right_top_ad {
  opacity: 0.5;
  transition: opacity 300ms;
}

.right_top_ad:hover {
  opacity: 1;
}

.page-common .header-profile-button, .ranking-digest .ranking-unit .image, .page-common div.picSurround img, .widget-slide-block .widget-slide .btn-anime, .profile .user-favorites .favorites-list .list .image, .profile .statistics-updates .image, .user-profile .user-friends .icon-friend, body.news .news-side-block .news-list img.thumbs, body.news .news-side-block .featured-list img.thumbs, body.news .featured-side-block .news-list img.thumbs, body.news .featured-side-block .featured-list img.thumbs, body.news .columnist-side-block .columnist-list .columnists-unit-side .image, .page-common .incrementalSearchResultList .list .image, .news-list .comment-list .image-link, .news-list .news-unit .image-link, .profile .user-comments .comment .image img {
  background-color: transparent;
  box-shadow: none;
  border-color: transparent;
}

.page-common a.button_add.button_add.plantoread, .page-common a.button_add.button_add.plantowatch, .page-common a.button_add.button_edit.plantoread, .page-common a.button_add.button_edit.plantowatch, .page-common a.button_edit.button_add.plantoread, .page-common a.button_edit.button_add.plantowatch, .page-common a.button_edit.button_edit.plantoread, .page-common a.button_edit.button_edit.plantowatch, .seasonal-anime-list .seasonal-anime .prodsrc a.button_add.plantoread, .seasonal-anime-list .seasonal-anime .prodsrc a.button_add.plantowatch, .seasonal-anime-list .seasonal-anime .prodsrc a.button_edit.plantoread, .seasonal-anime-list .seasonal-anime .prodsrc a.button_edit.plantowatch {
  color: var(--bg);
}

.page-common #headerSmall {
  background-image: url(/img/pc/ownlist/logo_mal.png);
  background-position: 0 center;
  background-size: 179px;
}

.anime-detail-header-stats .stats-block:before {
  background-color: var(--bgL3);
  box-shadow: none;
}

.user-status-block .form-user-status {
  color: var(--color) !important;
  border-color: var(--color) !important;
}

.user-status-block .form-user-status[data-class=reading], .user-status-block .form-user-status[data-class=watching] {
  --color: #2AAF3C;
}

.user-status-block .form-user-status[data-class=completed] {
  --color: var(--blue);
}

.user-status-block .form-user-status[data-class=on-hold] {
  --color: #E6B61F;
}

.user-status-block .form-user-status[data-class=dropped] {
  --color: #C84143;
}

.user-status-block .form-user-status[data-class=plantoread], .user-status-block .form-user-status[data-class=plantowatch] {
  --color: #8E8E8E;
}

.page-common #searchBar.searchBar #topSearchValue {
  background-image: url(/images/icon-triangles-planto.png?v=160803001);
}

.js-truncate-outer .btn-truncate {
  background-image: url(/images/icon-pulldown2.png?v=160803001), linear-gradient(transparent, var(--bg));
  bottom: -1px;
}

.membership .about-membership .about-no-ads .text .description {
  text-shadow: #141414 1px 1px 0; /* var(--bg) */
}

.forum .forum-board {
  border-bottom-width: 0;
}

.forum .forum-board:nth-of-type(even) {
  border-top-width: 1px;
  border-bottom-width: 1px;
}

how do i use this

@seasquirt Install a userstyles manager such as Stylus, create a new style for the domain myanimelist.net, and paste the CSS code from this gist.

This is amazing work, but unfortunately a recent MAL update broke some of it, specifically forum blocks, they're just white with gray (almost invisible) text now.

Basically all good dark modes are broken now on forum threads.