「小説家になろう」をダークモードに対応します。
Narou Dark - 「小説家になろう」ダークモード by mmahhi
Details
Authormmahhi
LicenseMIT
Categorysyosetu.com
Created
Updated
Code size71 kB
Code checksum3e8910b9
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
概要
小説家になろうをダークモードに対応させるユーザーCSSです。
対応ページ
- サイトページ（トップページやサポートページ）
※「今日の一冊」コーナーを除きます。 - 小説ページ（R18、感想、レビュー、小説情報、縦書きPDFページなどを含む）
※「表示調整」の配色設定は無視され、一律でダークモードが適用されます。 - 小説を読もう！
- マイページ（Xマイページを含む）
- ユーザーページ
※Xユーザーページは未検証です。 - 公式ブログ（R18部門・みてみん用を含む）
- KASASAGI
- なろうデベロッパー
非対応ページ
- みてみん
- えぱれっと
- ノクターンノベルズ
- ムーンライトノベルズ
- ミッドナイトノベルズ
※R18の小説ページは対応しています。
サポート
ユーザーCSSのインストール方法については、こちらのページをご覧ください。
→「ユーザーCSSのインストール方法について」
ご意見、感想、不具合報告などは、こちらのページからどうぞ。
→「ユーザーCSSに関するお問い合わせフォーム」
Stylusでデバイスのテーマに合わせて、適用するユーザーCSSを切り替える方法は、こちらのページで解説しています。
→「Stylusで自動的にダークモードを切り替える」
更新履歴
Ver.1.0.0 (2024/10/20)
- 公開。
Ver.1.1.0 (2024/11/10)
- ユーザーページのコードを新しくしました。
※この変更により、一部配色が変更されます。 - 一部のスマホページに適用されない不具合を修正しました。
- R18小説の小説情報ページに適用されない不具合を修正しました。
- 一部配色を変更しました。
Ver.1.2.0 (2025/03/13)
- リニューアルされた感想・レビュー・小説情報ページに対応しました。
- リアクション機能に対応しました。
Ver.1.2.1 (2025/03/17)
- 個人情報ページに対応しました。
Ver.1.3.0 (2025/04/18)
- リニューアルされたKASASAGIに対応しました。
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Narou Dark - 「小説家になろう」ダークモード
@namespace github.com/mmahhi
@version 1.3.0
@description 「小説家になろう」をダークモードに対応します。
@author mmahhi <mmahhi@s203.xrea.com> (http://mmahhi.s203.xrea.com/)
@homepageURL http://mmahhi.s203.xrea.com/userstyle/narou-dark/
@supportURL http://mmahhi.s203.xrea.com/userstyle/contact/
@license MIT
==/UserStyle== */
@-moz-document url-prefix("https://syosetu.com"), url-prefix("https://ssl.syosetu.com") {
/* Narou Dark - 「小説家になろう」ダークモード Ver.1.3.0 (2025/04/18) */
/* トップ */
:root {
--color-text: #f1f1f1;
--color-text--sub: #bbb;
--color-ui-border: rgba(255, 255, 255, 0.1);
--color-link: #99ccff;
--color-link--visited: #3399ff;
--color-link--hover: #55aaff;
--color-ui-bg: #121212;
}
body, .c-panel__body, .p-header, .p-error-panel, #container, .c-document, .c-application {
background: #171717;
}
body, .p-error-panel {
background-color: #0d0d0d;
}
/* a, .c-aside__item a:active, .c-aside__item a:hover, .c-aside__item a:link {
color: #99ccff;
}
a:visited, .c-aside__item a:visited {
color: #3399ff;
}
a:hover {
color: #55aaff;
} */
.p-main-nav__item > a {
color: #fff;
}
/* .c-novel-item__subinfo, .c-novel-item__name {
color: #fff;
} */
a.p-ranking__item:active, a.p-ranking__item:focus, a.p-ranking__item:hover, .c-panel__body a.c-panel__readmore:active, .c-panel__body a.c-panel__readmore:focus, .c-panel__body a.c-panel__readmore:hover, a.c-panel__item:active, a.c-panel__item:focus, a.c-panel__item:hover, a.c-panel__item:active, a.c-panel__item:focus, a.c-panel__item:hover, a.c-pager__item:hover {
background-color: rgba(48, 48, 48, 0.5) !important;
}
.c-button--outline {
background: #171717;
}
.c-button--outline:active, .c-button--outline:focus, .c-button--outline:hover {
color: #55aaff;
box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.05);
}
.c-horizontalnav__mask:after {
background: linear-gradient(to left,#171717,transparent);
}
.c-panel__headline, .c-well {
color: #fff;
}
.p-main-nav {
background-color: #0d6773;
}
.c-form__quicksearch-text, .c-form__select, .c-form__input-group-prepend > .c-form__input-group-text, .c-form__input-group-prepend > .c-form__select, .c-form__input-group-prepend, .c-form__input-text {
background-color: #303134;
color: #fff;
}
.c-form__select {
background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0ib3Jp44Gu44Kz44OU44O8IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48dGl0bGU+YW5nbGUtZG93bjwvdGl0bGU+PHBhdGggZD0iTTI1NiwzNzJhMjQuOTQsMjQuOTQsMCwwLDEtMTcuNjgtNy4zM0w3Ni4zOSwyMDIuNzFhMjUsMjUsMCwwLDEsMzUuMzYtMzUuMzVMMjU2LDMxMS42MSw0MDAuMjUsMTY3LjM2YTI1LDI1LDAsMCwxLDM1LjM2LDM1LjM1TDI3My42OCwzNjQuNjRBMjQuOTQsMjQuOTQsMCwwLDEsMjU2LDM3MloiIHN0eWxlPSJmaWxsOiNmZmZmZmYiLz48L3N2Zz4=");
}
.l-footer a {
color: #f1f3f3;
}
.c-form__textarea, input[type="password"], .p-header__search-input .c-form__input-text {
background: #303134 !important;
color: #fff !important;
}
.c-form__input-group-append {
background-color: #303134;
}
.c-button--twitter-login {
background: url(/view/images/social/twitter_icons_square_blue.png) no-repeat 0 50% #121212;
background-size: contain;
}
.c-label:not(.p-news__category), .c-label--news-1, .c-label--news-7, .c-label--news-11 {
background-color: #333;
color: #fff;
}
.c-aside__headline, .c-page-title__text, .c-card-cluster-title, .c-card__title, .p-ranking__type-title, .c-rank-place__num, .c-page-title__page-group {
color: #23c9e1;
}
.c-card-cluster-title {
border-color: #1eacc1;
}
.c-button--outline {
border-color: #444;
}
.c-horizontalnav-button__mask::after {
background: linear-gradient(to left, #171717, transparent);
}
.c-card, .c-readmore__button-less, .c-readmore__button-more {
background: #373737;
}
.c-readmore__button-more {
background-color: #171717;
box-shadow: -.1em -.1em .2em 0 rgba(255, 255, 255, 0.05);
}
.c-card {
background: #171717;
}
.c-readmore__mask[aria-expanded="false"]::after {
background-image: linear-gradient(to bottom, transparent, #171717);
}
.c-horizontalnav-button__item, .c-panel__item:not(:last-child), .p-header__subnav-item--site, .c-aside__item, .c-aside__item:first-child, .p-helpcategory-item__title, .c-horizontalnav-button__mask, .c-horizontalnav__mask, .p-ranking__item--col2::before, .p-ranking__item--col2:nth-of-type(-n+5), .c-panel__item--col2:not(:nth-child(2n))::before, .c-panel__item--col4:not(:nth-child(4n))::before {
border-color: rgba(255, 255, 255, 0.1);
}
.c-horizontalnav__item {
color: #ccc;
}
.c-horizontalnav__item:active, .c-horizontalnav__item:focus, .c-horizontalnav__item:hover {
background-color: rgba(73, 74, 74, 0.5);
}
.p-header__subnav-item--site img {
filter: brightness(2);
}
.c-aside__item a {
color: #c9d1d9 !important;
}
.c-aside__item a:hover {
background-color: #202020;
}
.c-aside__item a::after, .p-helpcategory-item__list-item > a::after {
opacity: .6;
}
.p-error-panel__heading {
color: #1eacc1;
}
.c-faq dt {
color: #1eacc1;
}
.c-faq dd {
background-color: #202020;
}
.p-event-header__info {
background: #171717;
}
.c-table th {
background-color: rgba(255, 255, 255, 0.03);
border-bottom-color: #444;
}
.c-table td {
border-bottom-color: rgba(255,255,255, 0.08);
}
.c-application-cluster-title {
color: #1eacc1;
}
.c-application__well {
background-color: #202020;
}
.c-document-well--negative, .c-document-well {
background-color: #202020;
}
.c-card-strips-list__link:active, .c-card-strips-list__link:focus, .c-card-strips-list__link:hover {
background-color: rgba(38, 38, 38, 0.5);
}
.l-footer {
background-color: #0e1e20;
}
.p-copyright {
background-color: #0a4e57;
}
.c-see-more::after {
background-color: #171717;
}
.c-pager__item {
color: #c9d1d9;
}
.c-pager__item.is-disabled {
color: #888;
}
.c-panel__readmore::after {
background-color: #171717;
}
/* スマホ版ページ */
.p-main-nav__item.is-active > a, .p-drawer-nav {
background-color: #171717;
}
.p-drawer-nav__groupsite-logo {
filter: brightness(2);
}
.p-drawer-nav .c-navlist__headline {
background-color: #202020;
}
.p-drawer-nav__close a, .p-footer__pagetop a {
background-color: #0a4e57;
}
:root {
color-scheme: dark;
}
}
@-moz-document domain("yomou.syosetu.com") {
/* 小説を読もう！ */
body {
--bg0: #0d0d0d;
--bg1: #131313;
--bg2: #202020;
--bg3: #323232;
--color0: #f1f1f1;
--color1: #c9d1d9;
--color2: #aaa;
--colorA: #f48246;
--border0: rgba(255, 255, 255, 0.1);
--border1: #444;
--border2: #666;
--link1: #ff6b22;
--link-h1: #ff8a51;
--link-b1: #99ccff;
--link-bh1: #3399ff;
--color-text--sub: var(--color2);
--color-text--accent: var(--colorA);
--color-ui-border: var(--border0);
}
body {
background-color: var(--bg0);
color: var(--color1);
}
a {
color: var(--link1);
}
a:active, a:focus, a:hover {
color: #ff8a51;
}
a:visited {
color: #ae93b3;
}
.p-header {
background-color: var(--bg1);
}
.p-header__logo img {
filter: brightness(2);
}
.p-header__count {
color: var(--colorA);
}
.p-main-nav__item > a {
color: #fff;
}
.c-form__input-group-prepend > .c-form__input-group-text, .c-form__input-group-prepend > .c-form__select {
background-color: var(--bg2);
}
.c-form__input-text, .c-form__select, .c-form__textarea {
background-color: var(--bg1);
}
.c-form__select {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20d%3D%22M256%2C372a24.94%2C24.94%2C0%2C0%2C1-17.68-7.33L76.39%2C202.71a25%2C25%2C0%2C0%2C1%2C35.36-35.35L256%2C311.61%2C400.25%2C167.36a25%2C25%2C0%2C0%2C1%2C35.36%2C35.35L273.68%2C364.64A24.94%2C24.94%2C0%2C0%2C1%2C256%2C372Z%22%20fill%3D%22%23c9d1d9%22%2F%3E%3C%2Fsvg%3E");
}
.c-form__input-group-append {
background-color: var(--bg1);
}
.c-form__input-group-button {
color: var(--colorA);
}
#trad.c-trad-contents {
background-color: var(--bg1);
}
.c-trad-contents * {
color: var(--color1);
}
.c-trad-contents .attenstion2 {
color: var(--color2);
}
.c-trad-contents h2.ranking {
color: var(--color0);
border-color: var(--border1);
}
.c-trad-contents ul.ranking_navi li.on a {
color: var(--color0);
}
.c-trad-contents ul.ranking_navi a {
color: var(--link-b1);
}
.c-rank-place__num {
color: var(--colorA);
}
.c-trad-contents ul.r_navilist a {
color: var(--link-b1);
border...