「小説家になろう」をダークモードに対応します。
Narou Dark - 「小説家になろう」ダークモード by mmahhi
Details
Authormmahhi
LicenseMIT
Categorysyosetu.com
Created
Updated
Size75 kB
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小説の小説情報ページに適用されない不具合を修正しました。
- 一部配色を変更しました。
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.1.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.1.0 (2024/11/10) */
/* トップ */
: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;
}
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;
}
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-color: var(--border1);
}
.c-trad-contents ul.r_navilist li.on a {
color: var(--color0);
border-color: var(--link-b1);
}
.c-trad-con...