stylus用 note の molokai風ダークテーマ

stylusとは、WebページのCSSを自分の好きにいじれる拡張機能です。

noteの表示にダークテーマを作ってみました。

細部まで設定しきっていませんが、ご勘弁。

なお、最後の設定部分に、広告バナー等の非表示がありますので、表示したい場合は削除してください。

/* ==UserStyle==
@name         note.com Molokai Dark
@namespace    local
@version      1.1.0
@description  note.com 記事向け Molokai 風ダークテーマ
@author       you
==/UserStyle== */

@-moz-document domain("note.com") {
/* ------------------------------
     1) Molokai カラーパレット
     ------------------------------ */
  :root{
    --molokai-bg:        #1b1d1e;
    --molokai-bg-soft:   #232526;
    --molokai-fg:        #f8f8f2;
    --molokai-fg-soft:   #cfcfc2;

    --molokai-yellow:   #e6db74;
    --molokai-orange:   #fd971f;
    --molokai-red:      #f92672;
    --molokai-purple:   #ae81ff;
    --molokai-blue:     #66d9ef;
    --molokai-green:    #a6e22e;

    --molokai-border:   #3a3a3a;
  }

  /* ------------------------------
     2) note の CSS トークン上書き
     ------------------------------ */
  :root{
    --color-text-primary:   var(--molokai-fg) !important;
    --color-text-secondary: var(--molokai-fg-soft) !important;

    --color-background-primary:   var(--molokai-bg) !important;
    --color-background-secondary: var(--molokai-bg-soft) !important;

    --color-border-primary: var(--molokai-border) !important;
    --color-border-strong:  #4a4a4a !important;
  }

  /* ------------------------------
     3) ページ全体
     ------------------------------ */
  html, body{
    background: var(--molokai-bg) !important;
    color: var(--molokai-fg) !important;
  }

  main, article, header, footer, nav, section,
  .bg-background-primary,
  .bg-background-secondary{
    background-color: var(--molokai-bg) !important;
    color: var(--molokai-fg) !important;
  }

  /* ------------------------------
     4) テキスト
     ------------------------------ */
  p, li, dt, dd, th, td, label,
  .o-noteContentHeader__date,
  .o-userMenu__description,
  .o-noteLikeV3__count{
    color: var(--molokai-fg) !important;
  }

  small,
  .o-articleList__statusLabel{
    color: var(--molokai-fg-soft) !important;
  }

  /* 見出し */
  h1, h2, h3{
    color: var(--molokai-orange) !important;
  }

  h4, h5{
    color: var(--molokai-yellow) !important;
  }

  /* ------------------------------
     5) リンク
     ------------------------------ */
  a, a:visited{
    color: var(--molokai-blue) !important;
  }

  a:hover{
    color: var(--molokai-green) !important;
    text-decoration: underline !important;
  }

  /* ------------------------------
     6) 引用・カード類
     ------------------------------ */
  blockquote{
    background: var(--molokai-bg-soft) !important;
    border-left: 4px solid var(--molokai-purple) !important;
    color: var(--molokai-fg-soft) !important;
  }

  .o-tableOfContents,
  .m-largeNoteWrapper__card,
  .m-odaiCard,
  .o-supportAppealBox,
  #sideCreatorProfile{
    background-color: var(--molokai-bg-soft) !important;
    border: 1px solid var(--molokai-border) !important;
    color: var(--molokai-fg) !important;
  }

  /* ------------------------------
     7) コード（Molokai本丸）
     ------------------------------ */
  pre, pre code{
    background: #272822 !important;
    color: #f8f8f2 !important;
    border: 1px solid var(--molokai-border) !important;
  }

  code{
    background: #2a2d2e !important;
    color: var(--molokai-yellow) !important;
    padding: 0.15em 0.35em;
    border-radius: 3px;
  }

  /* ------------------------------
     8) 入力・ボタン
     ------------------------------ */
  input, textarea, select{
    background-color: #272822 !important;
    color: var(--molokai-fg) !important;
    border: 1px solid var(--molokai-border) !important;
  }

  button, .a-button {
    background-color: #2a2d2e !important;
    color: var(--molokai-fg) !important;
    border: 1px solid var(--molokai-border) !important;
  }

div.flex, .o-textNote, .note-embed {
    background-color: var(--molokai-bg-soft) !important;
}

.a-tag__label, .o-magazineItemWithNotes__statusCount {
    color: var(--molokai-orange) !important;
}

[href="/"] {
    background-color: var(--molokai-bg-soft) !important;
}

.o-bannerNotice, .o-contests, .o-infoTrendMessages__wrapper, .o-statsContent__sub {
    display: none;
}
}