VSCode Dark Islands(Islands Dark テーマ)

Tool

概要

JetBrains の Islands Dark テーマから着想を得た Visual Studio Code 用ダークカラーテーマです。コアは深いダークキャンバス(#131217)で、浮遊するパネルを思わせるガラス風ボーダー、上/左がやや明るく下/右が控えめに暗く見える方向性ライティングの表現、角丸のパネルデザイン風の統一感を重視しています。シンタックスの可読性と UI の一貫性に配慮しており、スクリーンショットやアセットも同梱されたシンプルなパッケージです。

GitHub

リポジトリの統計情報

  • スター数: 28
  • フォーク数: 0
  • ウォッチャー数: 28
  • コミット数: 8
  • ファイル数: 8
  • メインの言語: 未指定

主な特徴

  • 深いダークキャンバス (#131217) を基調とした落ち着いた配色
  • ガラス風のボーダー表現と方向性のある光の演出(上/左がやや明るい)
  • パネルや通知などに統一された角丸感(デザイン志向)
  • シンタックスと UI 要素のバランスを取った色分け

技術的なポイント

このテーマは、VSCode の「テーマ(Color Theme)」の仕組みを使って配色を提供する典型的な拡張です。具体的には workbench(ワークベンチ)周りの色トークン(例:editor.background / sideBar.background / panel.border など)と、editor のシンタックスハイライトを定義する tokenColors を組み合わせ、UI とコード表示の両方で統一感ある見た目を実現しています。README にある「ガラス効果」や「角丸」といった表現は主に色と境界線の指定による視覚的な擬似表現で、VSCode のテーマでは直接 CSS のように角丸やアニメーションを自由に定義することはできません。そのため、上/左を明るめに、下/右を控えめにすることでライトの方向性を疑似的に表現し、境界の微妙な色差と陰影の組み合わせで浮遊感を作っています。

リポジトリ構成からは、assets にスクリーンショット等の画像を含め、.vscodeignore により VSIX パッケージ化時の不要ファイル除外、CHANGELOG.md でバージョン履歴を管理している点がわかります。配色設計上の注意点としては、テキストのコントラスト(可読性)とアクセントカラーの塩梅、シンタックスカラーが言語別に見やすいかの検証が重要です。テーマを改善する際は、tokenColors を言語特性ごとに細かく整備し、semanticHighlighting の対応有無やワークベンチの細部(terminal, diffEditor, minibuffer など)をチェックすると効果的です。また、パッケージサイズ軽減のため .vscodeignore を用いる運用や、スクリーンショット・説明を README に明示しておくことでユーザー導線も良くなります。

プロジェクトの構成

主要なファイルとディレクトリ:

  • .gitignore: file
  • .vscodeignore: file
  • CHANGELOG.md: file
  • README.md: file
  • assets: dir

…他 3 ファイル

まとめ

落ち着いた深色基調でUIの統一感を重視した、実用的で洗練されたダークテーマです(約50字)。

リポジトリ情報:

READMEの抜粋:

Islands Dark

A dark color theme for Visual Studio Code inspired by JetBrains’ Islands Dark theme. Features floating glass-like panels, rounded corners, smooth animations, and a deeply refined UI.

Islands Dark Screenshot

Features

  • Deep dark canvas (#131217) with floating panels
  • Glass-effect borders with directional light simulation (brighter top/left, subtle bottom/right)
  • Rounded corners on all panels, notifications, command…