【随時更新】 Notion を見やすくするためのスタイルの上書き（ブラウザ限定・ライト/ダークモード対応）

2024-12-18T15:35:00+09:00 | 1分で読めます | 更新日時 2025-06-23T13:23:50+09:00

@ nabekou29

Note

この記事は Unipos Advent Calendar 2024 の8日目の記事として執筆しました。

仕事上のタスクなどの管理を Notion で行っているのですが、個人的に視認性が悪いと感じることがあります。私はそのような箇所をブラウザの拡張機能などでスタイルを上書きすることで対応しているので、上書き用の css を共有します。（ライトテーマとダークテーマの両方に対応してます）

上書きの仕方

ブラウザの Notion に css を当てられる方法であればなんでも良いです

拡張機能を使う
- User JavaScript and CSS
- Stylus
(Arc ユーザー向け) Boost 機能を使う

ちょっと解説

モード対応について

Notion はライトモードとダークモードの設定によって、上位の要素に notion-light-theme または notion-dark-theme というクラスが付与されます。
それぞれで同じ名前の CSS変数を定義してそれを利用したスタイルを当てることで、モードの対応をしています。

コピーした上で色を調整する際などの参考にしてください。

上書きするスタイル

全体

通常時の横幅を広げる

テーブルなどの表示は狭いまま。（なんとかしたい）

.layout:not(.layout-wide) {
  --cstm-content-width: minmax(
    auto,
    1200px
  ); /* ここで横幅を調整。デフォルトだと 900px くらい */
  --cstm-margin-width: minmax(96px, 1fr);
  display: grid;
  grid-template-columns:
    [full-start] var(--cstm-margin-width)
    [content-start] var(--cstm-content-width) [content-end] var(
      --cstm-margin-width
    )
    [full-end] !important;
  width: 100%;
}

タイムライン

上書き後のイメージ

スタイルを当てた後のタイムラインの画像

土日をわかりやすく

.notion-light-theme {
  --cstm-timeline-saturday: #ebf3fe;
  --cstm-timeline-sunday: #ffebe9;
}

.notion-dark-theme {
  --cstm-timeline-saturday: #272f3a;
  --cstm-timeline-sunday: #312524;
}

.notion-timeline-view
  > .notion-selectable.notion-collection_view_page-block
  > div:first-child
  div,
.notion-timeline-view
  > .notion-selectable.notion-collection_view-block
  > div:first-child
  div {
  background: linear-gradient(
    90deg,
    var(--cstm-timeline-saturday) 0%,
    var(--cstm-timeline-saturday) 50%,
    var(--cstm-timeline-sunday) 50%,
    var(--cstm-timeline-sunday) 100%
  ) !important;
}

各アイテムの境界を見やすく

.notion-light-theme {
  --cstm-timeline-border: #d6d6d6;
}

.notion-dark-theme {
  --cstm-timeline-border: #606060;
}

.notion-timeline-item {
  border: 1px solid var(--cstm-timeline-border) !important;
}

ページのリンク

ページのメンションを目立たせる

メンションされたページの先に大事な情報が載っていたりするのですが、流し読みしていると見落としがちです。
そのため、メンションされたページのリンクを目立たせるようにしています。

.notion-light-theme {
  --cstm-mention-token-bg: #cbe6ff;
  --cstm-mention-token-border: #0062ba;
}

.notion-dark-theme {
  --cstm-mention-token-bg: #0c263e;
  --cstm-mention-token-border: #c6e4ff;
}

.notion-page-mention-token {
  background-color: var(--cstm-mention-token-bg);
  border: 1px var(--cstm-mention-token-border) solid;
  border-radius: 6px;
  padding: 2px;
}