「小説家になろう」をダークモードに対応します。
Narou Dark - 「小説家になろう」ダークモード by mmahhi
Details
Authormmahhi
LicenseMIT
Categorysyosetu.com
Created
Updated
Size58 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
概要
小説家になろうをダークモードに対応させるユーザーCSSです。
サポート
ユーザーCSSのインストール方法については、こちらのページをご覧ください。
→「ユーザーCSSのインストール方法について」
ご意見、感想、不具合報告などは、こちらのページからどうぞ。
→「ユーザーCSSに関するお問い合わせフォーム」
Stylusでデバイスのテーマに合わせて、適用するユーザーCSSを切り替える方法は、こちらのページで解説しています。
→「Stylusで自動的にダークモードを切り替える」
更新履歴
Ver.1.0.0 (2024/10/20)
- 公開。
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.0.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.0.0 (2024/10/20) */
/* トップ */
body {
--color-ui-border: rgba(255, 255, 255, 0.1);
}
body, .c-panel__body, .p-header, .p-error-panel, #container, .c-document, .c-application, .p-up-header-pc {
background: #171717;
color: #fff;
}
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;
color: #99ccff;
}
.c-button--outline:visited {
color: #99ccff;
}
.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 {
width: 0;
}
.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 {
background-color: #303134;
color: #fff;
}
.c-form__select {
background: url("data:image/svg+xml;base64,PHN2ZyBpZD0ib3Jp44Gu44Kz44OU44O8IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48dGl0bGU+YW5nbGUtZG93bjwvdGl0bGU+PHBhdGggZD0iTTI1NiwzNzJhMjQuOTQsMjQuOTQsMCwwLDEtMTcuNjgtNy4zM0w3Ni4zOSwyMDIuNzFhMjUsMjUsMCwwLDEsMzUuMzYtMzUuMzVMMjU2LDMxMS42MSw0MDAuMjUsMTY3LjM2YTI1LDI1LDAsMCwxLDM1LjM2LDM1LjM1TDI3My42OCwzNjQuNjRBMjQuOTQsMjQuOTQsMCwwLDEsMjU2LDM3MloiIHN0eWxlPSJmaWxsOiNmZmZmZmYiLz48L3N2Zz4=") no-repeat center right 5px #303134;
background-size: 11.9px;
}
.l-footer a {
color: #f1f3f3;
}
input[type="text"], .c-form__textarea, input[type="password"] {
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: #1eacc1;
}
.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;
}
:root {
color-scheme: dark;
}
}
@-moz-document domain("yomou.syosetu.com") {
/* 読もう */
body {
--bg0: #0d0d0d;
--bg1: #151515;
--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: url("data:image/svg+xml;base64,PHN2ZyBpZD0ib3Jp44Gu44Kz44OU44O8IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48dGl0bGU+YW5nbGUtZG93bjwvdGl0bGU+PHBhdGggZD0iTTI1NiwzNzJhMjQuOTQsMjQuOTQsMCwwLDEtMTcuNjgtNy4zM0w3Ni4zOSwyMDIuNzFhMjUsMjUsMCwwLDEsMzUuMzYtMzUuMzVMMjU2LDMxMS42MSw0MDAuMjUsMTY3LjM2YTI1LDI1LDAsMCwxLDM1LjM2LDM1LjM1TDI3My42OCwzNjQuNjRBMjQuOTQsMjQuOTQsMCwwLDEsMjU2LDM3MloiIHN0eWxlPSJmaWxsOiNmZmZmZmYiLz48L3N2Zz4=") no-repeat center right 5px var(--bg1);
background-size: 11.9px;
}
.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-contents ul.r_navilist a:hover {
color: var(--color0);
border-color: var(--link-b1);
}
.c-trad-contents .title_h2 {
border-color: var(--border1);
}
.c-trad-contents .genreranking_outline h3.ranking_genre {
color: var(--color1);
border-color: var(--border2);
}
.c-trad-contents dl.r_genretypelist dt {
border-color: var(--border1);
}
.c-trad-contents dl.r_genretypelist dd a {
color: var(--link-b1);
border-color: var(--border1);
}
.c-trad-contents dl.r_genretypelist dd a.on {
color: var(--color0);
border-color: var(--border1);
}
.c-trad-contents .ex {
color: #e3c3d3;
}
.c-trad-contents a {
...