Cyberdev Obsidian テーマ-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

Cyberdev Obsidian テーマ

Patricia Arquette

Jan 02, 2025 pm 05:49 PM

導入

私は、夜遅くまでコンピューターに向かってコードを書いたりメモを取ったりする開発者向けに特別な Obsidian テーマをデザインしました。このテーマは、画面の前で長時間過ごすユーザーの目の疲れを最小限に抑えるために開発されました。黒の背景に対照的な色を使用することで高いコントラストが実現され、可読性が向上し、快適なユーザーエクスペリエンスが提供されます。

このテーマの開発中に直面した主な課題は次のとおりです:

画面の明るさ: 長時間使用しても目に負担をかけない設計です。
可読性: テキストとコードが簡単に区別でき、理解できることを保証します。
シンプルさとミニマリズム: 不必要な視覚的な混乱を避け、焦点を絞ったユーザーエクスペリエンスを提供します。
コードの可読性: コードを簡単に区別して分析できる配色を設計します。

これらの基準を念頭に置いて、ユーザーエクスペリエンスを優先したテーマの作成を目指しました。

開発ノート

Cyberdev Obsidian Theme

テーマテンプレートファイルは、Obsidian テンプレートファイルから新しく作成された Obsidian Vault ファイルにコピーされました。

テンプレートファイルが .obsidian/themes フォルダーに移動された後、manifest.json ファイルが編集されました。

ここで注意すべき最も重要な点は、manifest.json ファイルの名前フィールドに割り当てられた値がフォルダー名と一致する必要があるということです。たとえば、値が "name": "cyberdev" の場合、テンプレートフォルダー名も "cyberdev" に更新する必要があります。

この時点から、すべての調整はtheme.cssファイルで行われます。この段階で、理解すべき重要な点が 2 つあります:

Obsidian API のデフォルト CSS 変数:
Obsidian には、色、フォントサイズ、フォントファミリー、境界線の太さなどの値を直接変更できるデフォルトの CSS 変数が用意されています。これらの変数は、Obsidian ドキュメントの CSS 変数セクションにあります。
開発者ツールの使用:
Obsidian インターフェイスを開いた後、CTRL SHIFT I を押して開発者ツールにアクセスできます。次に、CTRL SHIFT C ショートカットを使用して、検査モードを有効にできます。これにより、マウスを使用して画面上の特定の要素を選択できるようになります。選択した要素に関連する CSS 変数が表示されます。 .cm-em{} などのこれらのクラスの場合は、ドット表記で記述し、中括弧内で変数を定義する必要があります。

ライセンス情報

他の Obsidian テーマコードと同様、テーマ は MIT ライセンスのもとでオープンソースです。これをコンピューターにダウンロードするか、リポジトリからフォークを介してブランチを作成した後、必要に応じてカスタマイズして機能を追加できます。必要に応じて、リポジトリのクローンを作成し、コンピュータ上で編集することもできます。