🌑

Zennをダークモードにしよう

に公開

StylebotなどでCSSを適用してください。
埋め込みはあきらめました。

:root, .znc {
  --c-bg-primary: #444;
  --c-bg-primary-lighter: #161616;
  --c-bg-secondary: #111;
  --c-bg-base: #222;
  --c-bg-neutral: #111;
  --c-bg-neutral-lighter: #161616;
  --c-bg-neutral-lightest: #1b1b1b;
  --c-blue-350: #333;
  --c-blue-400: #448;
  --c-label-primary-painted-bg: #111;
  --c-label-primary-painted-fg: #ddd;
  --c-text-body: #eee;
  --c-text-low-priority: #999;
  --c-text-lower-priority: #eee;
  --c-text-link-visited: #888;
  --c-neutral-border: #444;
  --c-neutral-border-lighter: #444;
  --c-button-secondary-border: #444;
  --c-button-secondary-hover-bg: #444;
  --c-form-text: #eee;
  --c-bg-code: #444;
  --c-purple-300: #333;
}

* {
  caret-color: #8888ff;
}

/* nav element */
.ExploreNav_childNav__uQuQY {
  background-color: var(--c-bg-neutral);
}
.ExploreNav_childNav__uQuQY [aria-current=page] {
  background-color: var(--c-bg-primary);
}

.FullSizeEditor_contentItemPreview__Ij8_p:before {
  background-color: var(--c-bg-primary);
  border-radius: 0 8px;
}

.znc aside.msg {
  color: var(--c-text-body);
  background-color: #222;
  border: thin solid #ffb84c;
}

.znc th, .znc td {
  background-color: var(--c-bg-base);
  border-color: var(--c-button-secondary-border);
}

.znc .footnotes,
.znc blockquote {
  color: #aaa;
}

summary,
.details-content {
  background-color: var(--c-bg-base);
  border-color: var(--c-button-secondary-border);
}

.HelpIcon_icon__mK38p {
  background-color: #333;
}

.ArticleToc_toc__WF75u .ol-depth-2 li:not(.active):before {
  background: #777;
  border: none;
}

svg *:not([fill=none]) {
  fill: #ddd;
}

.LikeButton_button__ZwdG4,
.BookmarkButton_bookmarkButton__tZ8rb {
  background-color: #222;
}

注意

Zenn側の更新で何かがまぶしくなることも多分あります。
アプデが止まったらご自身でCSSを修正するなりお願いします。

Discussion