draft note Theme
メディアプラットフォームnoteの心地よい執筆体験にヒントを得た「書くことに集中する」ためのテーマです。
[!NOTE]
このテーマは私が個人で作ったものであり、note株式会社が公式に提供、サポートしているものではありません。
コンセプト
プログラミングではなく、文章を「読む」「書く」という体験そのものに焦点を当てました。
ゆったりとした余白、目に優しいフォント、統一された配色により、思考を妨げるノイズを極限まで減らし、あなたの創造性を最大限に引き出します。
スクリーンショット
使い方
- VS Code Marketplace のページ を開きます。
- Install ボタンをクリックします。
- インストール後、メニューバーから以下の手順で
draft note を選択するとテーマが適用されます。
- Windows / Linux:
ファイル (File) > ユーザー設定 (Preferences) > テーマ (Theme) > 配色テーマ (Color Theme)
- macOS:
Code / Cursor > 基本設定 (Preferences) > テーマ (Theme) > 配色テーマ (Color Theme)
主な特徴
- 執筆に最適化されたレイアウト: 大きめのフォント、広い行間、十分な余白で、長文でも疲れません。
- ノイズのない配色: Markdownの構文ハイライトを必要最低限に抑え、すべての文字を基本の文字色に統一。執筆に集中できます。
- Markdownとテキストファイルに対応: Markdown (
.md) とプレーンテキスト (.txt) ファイルで、最適な執筆スタイルが自動的に適用されます。
- 洗練されたカラーパレット: note.comのデザインシステムを参考に、意味のある機能色を定義しています。
カラーパレット
基本カラー (Base Colors)
テーマの基本となる色です。
| 役割 |
カラーコード |
意味・用途 |
| Primary |
#08131A |
基本となるテキストやUI要素の黒。 |
| Secondary |
#F5F8FA |
背景より少しだけ目立たせたいUI表面の色。 |
| Surface |
#FFFFFF |
エディターやUIの基本背景となる白。 |
| Success |
#1E7B65 |
完了・成功など、ポジティブな状態を示す緑。 |
| Caution |
#AC7A2D |
警告など、注意を促す状態を示す黄色。 |
| Danger |
#BC3852 |
エラーなど、危険な状態を示す赤。 |
| Highlight |
#FFF26B |
検索ハイライトなど、一時的に注目させるための黄色。 |
UIへの適用 (UI Application)
基本カラーをUIの各要素にどのように適用しているかの定義です。
| UI要素/役割 |
カラー |
説明 |
| Primary Text |
Primary (#08131A) |
本文など、もっとも基本的なテキストカラーです。 |
| Secondary Text |
Primary + 66% Opacity (#08131AA8) |
コメントなど、補助的な情報に使用します。 |
| Border |
Primary + 14% Opacity (#08131A24) |
UI要素の境界線です。 |
| Disabled |
Primary + 50% Opacity (#08131A80) |
クリックできないUIなど、無効な状態を示します。 |
| Search Highlight |
Highlight (#FFF26B) |
検索に一致したキーワードの背景色です。 |
このテーマが、あなたの素晴らしい作品を生み出す一助となることを願っています。
| |
