カクヨムをダークモードに対応します。
Kakuyomu Dark - 「カクヨム」ダークモード by mmahhi
Details
Authormmahhi
LicenseMIT
Categorykakuyomu.jp
Created
Updated
Size213 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 Kakuyomu 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/kakuyomu-dark/
@supportURL http://mmahhi.s203.xrea.com/userstyle/contact/
@license MIT
==/UserStyle== */
@-moz-document url-prefix("https://kakuyomu.jp") {
/* Kakuyomu Dark - 「カクヨム」ダークモード Ver.1.0.0 (2024/10/20) */
body {
--bg0: #0d1011;
--bg05: #111415;
--bg1: #171b1d;
--bg15: #1b2022;
--bg2: #22282b;
--bg25: #2c3337;
--bg3: #31393e;
--bg4: #404a51;
--color0: #fff;
--color1: #f0f0f0;
--color15: #ccc;
--color2: #b0b0b0;
--color25: #9c9c9c;
--color3: #888;
--border1: #323637;
--border15: #505657;
--border2: #686b6c;
--link1: #4baae0;
--link-v1: #3399ff;
--link-h1: #52bbf7;
--color-darkBlue: #4baae0;
}
:root {
color-scheme: dark;
}
html:not([data-blog-uri="https://kakuyomu.jp/special/"]) body:not(#page-works-episodes-episode):not(#page-my-works-episodes-edit) {
background-color: var(--bg1);
color: var(--color1);
}
:where(body:not(#page-works-episodes-episode)) {
button {
color: var(--color1);
}
input, textarea {
background-color: var(--bg2);
color: var(--color1);
border-color: var(--border1);
}
input:hover, textarea:hover {
border-color: var(--border2);
}
}
input:autofill, textarea:autofill {
-webkit-box-shadow: inset 0 0 0 1000px var(--bg2);
}
:where(#page-top, #page-topTouch, .page-index, .page-entry, .page-archive, #page-violationReport, #page-contests-contest-works, #page-contests-contest-detail, #page-guide-write, #page-guide-read, #page-guide-loyaltyProgram, #page-guide-more, #page-my-antenna-worksGuest, #page-my-antenna-usersGuest, #page-userEvents-userEvent, #page-my-works-edit, #page-my-dashboard, #page-my-antenna-works, #page-my-antenna-users, #page-my-worksDetail, #page-legal-tokuteishoTorihikiho, #page-my-works, #page-my-events, #page-my-collections, #page-my-news, #page-my-works-episodes-edit, #page-siteFeedback, #page-my-antenna-readingHistories, #page-my-antenna-worksTouch, #page-rankings, #page-explore, #page-features, #page-features-feature, #page-userEvents-entrants, #page-errorPage-notFound, #page-fanFictionSources-recentWorks, #page-officialTouch, #page-official-labels, #page-official, #page-recentUserNews, #page-fanFictionSources, #page-userEvents, #page-trends, #page-pickupWorks) :is(a, a:active, a:focus, a:hover) {
color: var(--link1);
}
/* ネクストロゴ */
:is(.kakuyomuNext-badge, .KakuyomuNextLogo_icon__U_24p, .KakuyomuNextTemplate_logo__sbCt4) path[fill="#000"] {
fill: #fff;
}
/* 魔法のiランドロゴ */
:is(.RegularWorkHeader_mahoLogo__14HSv, .CompactWorkHeader_mahoLogo__TomaJ) path {
fill: var(--color1);
}
/* アイキャッチ */
:is(.EyeCatch_container__7zD5T, .widget-workBox-official-catchphrase, .widget-workBox-official-thumbnail-catchphrase, .WorkReviewDetail_title__cCizs, .NextEpisodeWorkBox_catchphrase__LMuQE, .work-catchphrase):is([style*=" rgb(0, 0, 0);"], [style*="#000000"]), :is(.widget-workBox-catchphrase-title, .widget-catchphrase-title, .widget-catchphrase-author) > a:is([style*="rgb(0, 0, 0)"], [style*="#000000"]) {
color: var(--color0) !important;
}
:is(.widget-workCard-workColor, .WorkColor_workColor__n_EKF, .widget-antennaList-workColor, .widget-antennaGuestList-workColor, .episodeFooter-collectionNextWorks-item-collection-color, #workColor, .widget-antennaList-workInfoDetail-workColor, .widget-workTitle-workColor, .widget-workBox-official-workColor):is([style*="rgb(0, 0, 0);"], [style*="#000000"]) {
background-color: var(--color0) !important;
}
.EyeCatch_container__7zD5T:is([style*="color: rgb(112, 21, 109)"], [style*="color:#70156D"]) {
color: #d98dd6 !important;
}
}
@-moz-document url-prefix("https://kakuyomu.jp") {
/* --------------- */
/* 共通パーツ */
/* --------------- */
.heading-underline {
border-color: var(--border1);
}
.isPC .widget-media-genresWorkList .widget-media-genresWorkList-list li.isActive a {
color: var(--color1);
}
.isPC .widget-media-genresWorkList .widget-media-genresWorkList-list a {
color: var(--color15);
}
.isPC .widget-media-genresWorkList .widget-media-genresWorkList-list a:hover {
background-color: var(--bg2);
}
.isPC .widget-media-genresWorkList .widget-media-genresWorkList-listTitle p {
color: var(--color2);
}
.isPC .widget-media-genresWorkList .widget-media-genresWorkList-listTitle {
border-color: var(--border1);
}
.isPC .widget-work {
border-color: var(--border1);
}
.isPC .widget-workCard-titleLabel {
color: var(--color1);
border-color: var(--border2) !important;
}
.isPC .widget-workCard-titleLabel:visited {
color: var(--color15);
}
.isPC .widget-workCard-title a:focus, .isPC .widget-workCard-title a:hover {
color: var(--link1);
}
.isPC .widget-workCard-author, .isPC .widget-workCard-authorLabel {
color: var(--color15);
}
.isPC .widget-workCard-introduction a {
color: var(--color15);
}
.isPC .widget-workCard-data {
background-color: var(--bg2);
color: var(--color2);
}
.isPC .widget-workCard-data a {
color: var(--color15);
}
.isPC .widget-workCard-data a:hover {
color: var(--link1);
}
.isPC .widget-workCard-meta > a::after, .isPC .widget-workCard-meta > span::after {
background-color: var(--border2);
}
.isPC .widget-workCard-tags a:hover span {
color: var(--link1);
}
.isTouch .widget-work {
border-color: var(--border1);
}
.isTouch .widget-workCard-titleLabel {
color: var(--color1);
}
.isTouch .widget-workCard-title a:focus, .isTouch .widget-workCard-title a:hover {
color: var(--link1);
}
.isTouch .widget-work .widget-work-reviews .widget-catchphrase {
border-color: var(--border15);
}
.isTouch .widget-workCard-author, .isTouch .widget-workCard-authorLabel {
color: var(--color15);
}
.isTouch .widget-workCard-title a:focus, .isTouch .widget-workCard-title a:hover {
color: var(--link1);
}
.isTouch .widget-workCard-introduction a {
color: var(--color15);
}
.isTouch .widget-workCard-data {
background-color: var(--bg2);
color: var(--color2);
}
.isTouch .widget-workCard-data a {
color: var(--color15);
}
.isTouch .widget-workCard-data a:hover {
color: var(--link1);
}
.isTouch .widget-workCard-meta > a::after, .isTouch .widget-workCard-meta > span::after {
background-color: var(--border2);
}
.isPC .widget-catchphrase:first-child {
border-color: var(--border1);
}
.isTouch .widget-media-workList .widget-media-workList-title {
border-color: var(--border1);
}
.widget-signupModal-footer p {
color: var(--color2);
border-color: var(--border1);
}
.widget-signupModal-closeButton button {
color: var(--color2);
}
.widget-signupModal-closeButton button:hover {
color: var(--link1);
}
:is(.isPC, .isTouch) .widget-feedList-list time {
color: var(--color2);
}
:is(.isPC, .isTouch) .widget-feedList-list h3 {
color: var(--color1);
}
:is(.isPC, .isTouch) .widget-feedList-list li {
border-color: var(--border1);
}
.widget-feedList-dummyList-listItem {
border-color: var(--border1);
}
.isPC .widget-emptyMessage .widget-emptyMessage-icon {
filter: invert(1);
}
.isPC .widget-emptyMessage .widget-emptyMessage-body {
color: var(--color15);
}
.isTouch .widget-emptyMessage .widget-emptyMessage-body {
color: var(--color2);
}
.isPC .widget-emptyMessage .widget-emptyMessage-icon i {
color: var(--color3);
}
.isTouch .widget-emptyMessage .widget-emptyMessage-icon i {
color: var(--color3);
}
.widget-feedList-dummyList-listTitle, .widget-feedList-dummyList-primaryText {
background-color: var(--bg2);
}
.widget-feedList-dummyList-listDate, .widget-feedList-dummyList-secondaryText {
background-color: var(--bg15);
}
.WorkMeta_bg-lightBeige__lNnbx {
background-color: var(--bg2);
}
:is(.isPC, .isTouch) .widget-workTitle .widget-workTitle-titleLabel {
color: var(--color1);
}
.isPC .widget-workTitle .widget-workTitle-title :is(a:hover, a:focus) {
color: var(--link1);
}
.isTouch .widget-workTitle .widget-workTitle-title a:hover {
border-color: var(--border2);
}
:is(.isPC, .isTouch) .widget-workTitle .widget-workTitle-author, :is(.isPC, .isTouch) .widget-workTitle .widget-workTitle-authorLabel {
color: var(--color15);
}
.isPC .widget-workTitle .widget-workTitle-meta a {
color: var(--color25);
}
.isTouch .widget-workTitle .widget-workTitle-meta a {
color: var(--color2);
}
:is(.isPC, .isTouch) .widget-workTitle .widget-workTitle-meta a:hover {
color: var(--link1);
}
:is(.isPC, .isTouch) .widget-workTitle .widget-workTitle-meta {
color: var(--color2);
}
:is(.isPC, .isTouch) .widget-workTitle .widget-workTitle-meta > span::after, :is(.isPC, .isTouch) .widget-workTitle .widget-workTitle-meta > time::after {
background-color: var(--border2);
}
.widget-transactionLaw table .metaText...