A comfortable alternative to the MAL official dark mode and others.
Comfortable Dark Mode - Easy To Edit by shishiostyles
Details
Authorshishiostyles
LicenseNo License
Categoryhttps://myanimelist.net/
Created
Updated
Size78 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
This Dark Mode should load smoother and can be easily edited if you have CSS experience (the others are condensed). Simply change the colors with the root menu at the top. This version darkens every page on MyAnimeList including lists. Overwrites the default dark mode for Myanimelist.
If you want to exclude lists from dark mode, delete the codes under LIST SETTINGS section near the bottom.
This is one of three versions, depending on your preference; the lightweight versions are compressed to make them even faster.
https://userstyles.world/style/8321/dark-myanimelist-2023-easy-to-edit
https://userstyles.world/style/8298/dark-myanimelist-2023-lightweight-includes-lists
https://userstyles.world/style/8320/dark-myanimelist-2023-lightweight-excludes-lists
Big thanks and credit to Valerio_Lyndon for mapping out much of the site earlier in previous dark themes. I used a file with your name (and only your name) on it to get this started and it was a giant help in the beginning. Thanks and credit to ShaggyZE for any work you may have put into the file I used as well.
Colors were inspired in part by cicerakes dark mode (my preferred theme for years) and the Dark Reader extension, although I've made mine darker and added lots of other changes.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Dark MyAnimeList 2023 [Easy to Edit]
@namespace ShishioStyles
@version 19
@description Darkens the entire site
@author Shishio-kun @MyAnimeList
==/UserStyle== */
@-moz-document domain("myanimelist.net") {
:root {
/*The Background's Dark Color*/
--bg: #222;
/*Table Grays and Blacks
Colors most of the site's content and tables*/
--table1: #303030;
--table2: #2D2F30;
--table3: #2A2B2C;
--table4: #262626;
--table5: #1A1A1A;
/*Header Grays*/
--header-light-grey: #585555;
--header-mid-grey: #424242;
/*MAL Blues*/
--default-blue: #2e51a2;
--dark-blue: #1d3366;
--grey-blue: #4E678D;
/*Special*/
--important-red: #ce6161;
/*Border Color*/
--border: #3e3e3e;
/*Text Colors*/
--text-white: #DBDBDB;
--text-white-bright: #F5F5F5;
--text-light-grey: #BFBFBF;
--text-med-grey: #999999;
--text-dark-grey: #808080;
--text-link: #648BC6;
--text-link-list: #7faaea;
--text-link-hover: #5179DB;
}
/*
################################### COLOR GROUPS #########################################################
*/
/*
##########################################################################################
BG
A dark color for the main background is applied to all selectors grouped here.
##########################################################################################
*/
#advancedSearchResultList .list.list-bottom.focus a,
#topSearchResultList .list.list-bottom.focus a,
.anime-detail-header-stats .stats-block,
.characters-favorites-ranking-table tr.ranking-list td,
.navi-seasonal .horiznav-nav-seasonal .btn-seasonal .btn-type,
.page-common #content,
.page-common #footer-block,
.page-common #header-menu .header-menu-unit,
.page-common .badresult,
.page-common .bg-color-base5,
.page-common .borderClass,
.page-common .fn-grey6,
.page-common .goodresult,
.page-common .header-notification-dropdown-inner h3,
.page-common .header-profile.link-bg,
.page-common .header-profile.link-bg.on,
.page-common .header-profile.link-bg.on:hover ,
.page-common .header-profile.link-bg:hover,
.page-common .incrementalSearchResultList .list .off .info,
.page-common .incrementalSearchResultList .list,
.page-common .topic-reply-box,
.page-common div.picSurround,
.page-forum .btn-forum,
.page-forum .forum_boardrow1,
.page-forum .js-ignore-topic-button, .page-forum .forum-ignore,
.people-favorites-ranking-table tr.ranking-list td,
.pmessage-checked-action .pmessage-checked-action-button,
.profile .statistics-updates .data .graph,
.profile .user-comments .comment,
.ranking-company .company-favorites-ranking-table tr.ranking-list td,
.seasonal-anime-list .seasonal-anime .image,
.staff_wrap .staff:nth-child(odd),
.user-profile .user-compatability-graph .bar-outer .bar-outer-negative,
.user-profile .user-compatability-graph .bar-outer,
.user-profile .user-status li,
.user-profile .user-status,
.watch .video-menu-category .btn-category:hover,
a.mal-btn.small, button.mal-btn.small,
body.placeholder,
body:not(.ownlist),
div.fl-l.pb8,
div.sceditor-toolbar,
li.clearfix
{
background-color: var(--bg) !important;
}
.header-profile-button:before,
.header-right #editdiv,
.mal-navbar,
.page-common #headerSmall,
.page-common #topSearchResultList,
.page-common .h1,
.page-common .header-list .header-list-dropdown,
.page-common .header-notification-dropdown .arrow_box,
.page-common .header-notification-view-all a,
.page-common .header-profile .header-profile-dropdown,
.root .modal-content
{
background-color: var(--bg) !important;
}
#advancedSearchResultList .list.list-bottom.focus a,
#topSearchResultList .list.list-bottom.focus a
{
color: var(--bg) !important;
}
.video-block .video-list.episode a
{
box-shadow: var( --bg);
}
/*
##########################################################################################
TABLE 1
A dark blackish grey, the brightest of the table colors.
##########################################################################################
*/
#content > div.membership-manager *,
#myanimelist .inputButton:not(:disabled):hover,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.btn-anime-watch-status.notinmylist:hover,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.btn-anime-watch-status:hover,
#myanimelist-layout[data-v-2ac6c46e] .form-control,
#new-style > p,
#topSearchResultList .list.focus,
.club-list .table-data:nth-of-type(odd) td,
.club-search-form-search .select,
.fa-times-circle:before,
.fa-times-circle:before,
.head-config,
.head-config,
.head-config,
.icon-top-ranking-page .prev:hover, .icon-top-ranking-page .next:hover,
.initialize-tutorial,
.mal-alert.info,
.membership .about-membership .about-no-ads .image,
.membership .about-membership .plan .plan-annually,
.membership .about-membership .plan .plan-gift,
.membership .about-membership .plan .plan-monthly,
.membership .about-membership .plan-description,
.membership .about-membership .plan-header,
.mym_checkboxes,
.navi-seasonal,
.news-list .comment-list .information .tags *,
.news-list .news-unit .information .tags *,
.page-common #header-menu .header-menu-login .btn-mal-service:hover,
.page-common .bbcode-table th,
.page-common .bg-color-blue1,
.page-common .footer-ranking,
.page-common .inputtext,
.page-common .normal_header,
.page-forum .forum-topic-message .message-wrapper .content,
.page-forum .forum-topic-message .message-wrapper .profile,
.page-forum .topic-poll .topic-poll-result .topic-poll-option .vote .topic-poll-button,
.pmessage-checkbox-block .mym-checkbox-pulldown-button.on,
.pmessage-select > a,
.private-message-content .message.selected > .mym,
.private-message-content .message.selected > .mym,
.private-message-content .message.selected:first-of-type > .mym,
.profile .boxlist-container .boxlist,
.profile .stacks-list .column-item .score,
.profile .stacks-list .column-item .score,
.profile .stacks-list .column-item .tag,
.profile .stacks-list .column-item .tag,
.quick-search *,
.ranking-digest .ranking-header,
.ranking-digest ul,
.ranking-digest,
.review-element .thumbbody .body .reaction-box .btn-reaction,
.sceditor-button:hover, .sceditor-button:active, .sceditor-button.active,
.sceditor-container,
.stacks .btn-new-stack.on,.stacks .new-stack-block, .stacks .new-stack-block *,
.stacks .btn-new-stack.on,.stacks .new-stack-block, .stacks .new-stack-block *,
.stacks .my-list tbody tr:nth-child(2n) td,
.stacks .my-list tbody tr:nth-child(2n) td,
.stacks .my-list thead td,
.stacks .my-list thead td,
.stacks .radio.box.on,
.stacks .radio.box.on,
.stacks .stack-list .item .bar,
.stacks .stack-list .item .bar,
.stacks .stacks-detail .any_status .score,
.stacks .stacks-detail .any_status,
.stacks .stacks-detail .info-block,
.stacks .stacks-detail .list-anime-list .seasonal-anime .head .title-text,
.stacks .stacks-detail .tag,
.stacks .stacks-modal .modal_content .foot,
.stacks .stacks-modal .modal_content .foot,
.stacks .stacks-modal .modal_content .modal-list,
.stacks .stacks-modal .modal_content .modal-list,
.stacks .stacks-modal .modal_content,
.stacks .stacks-modal .modal_content,
.stacks .sticky-toolbar,
.stacks .sticky-toolbar,
.stacks .tag.box,
.stacks .tag.box,
.top-ranking-table .title .button-preview:hover,
.user-profile .user-function .icon-user-function:hover,
.user-status-block *,
.user-status-block .form-user-episode,
.user-status-block .form-user-score option,
.user-status-block .form-user-score,
.user-status-block .form-user-status option,
.user-status-block .form-user-status,
.video-block .video-list.episode a:hover,
a.left-info-block-broadcast-button:hover,
body.index .widget-container .widget.friend_list_updates .footer .link-more,
body.index .widget-container .widget.friend_list_updates .footer,
body.news .news-container .information,
body.news .news-container .news-info-block,
body.news .news-container .tags .tag,
body.news .news-container .tags,
h2.title,
option,
option,
select *,
select
{
background-color: var(--table1) !important;
}
/*
##########################################################################################
TABLE 2
A dark blackish grey, the second brightest of the table colors.
##########################################################################################
*/
#advancedSearchResultList .list-bottom,
#advancedSearchResultList .list.focus:hover,
#myanimelist .news-list .comment-list .quotetext,
#myanimelist .news-list .tags-inner .tag,
#myanimelist .news-list .tags-inner .tag,
#myanimelist .quotetext .button.expand_quote,
#myanimelist .quotetext,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.completed,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.dropped,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.on-hold,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.plantoread,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.plantowatch,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.reading,
#myanimelist a.Lightbox_AddEdit.btn-addEdit-large.watching,
#myanimelist a.button_add:not(.Lightbox_AddEdit),
#myanimelist a.button_add:not(.Lightbox_AddEdit),
#myanimelist a.button_edit:not(.Lightbox_AddEdit),
#myanimelist a.button_edit:not(.Lightbox_AddEdit),
#myanimelist input,
#myanimelist textarea,
#quickadd input,
#topSearchResultList .list-bottom,
.anime-manga-search .genre-link .genre-list .genre-name-link:hover,
.btn-rect-grey1:hover,
.forum .forum-search-side .forum-search-...