Skip to content
| Marketplace
Sign in
Visual Studio Code>Themes>draft noteNew to Visual Studio Code? Get it now.
draft note

draft note

saladdays

|
47 installs
| (0) | Free
A minimal and elegant theme for an immersive writing and reading experience.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

draft note Theme

メディアプラットフォームnoteの心地よい執筆体験にヒントを得た「書くことに集中する」ためのテーマです。

[!NOTE] このテーマは私が個人で作ったものであり、note株式会社が公式に提供、サポートしているものではありません。

コンセプト

プログラミングではなく、文章を「読む」「書く」という体験そのものに焦点を当てました。 ゆったりとした余白、目に優しいフォント、統一された配色により、思考を妨げるノイズを極限まで減らし、あなたの創造性を最大限に引き出します。

スクリーンショット

screenshot

使い方

  1. VS Code Marketplace のページ を開きます。
  2. Install ボタンをクリックします。
  3. インストール後、メニューバーから以下の手順で 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) 検索に一致したキーワードの背景色です。

このテーマが、あなたの素晴らしい作品を生み出す一助となることを願っています。

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft