Gemini Code Assist を使って kintone 用のカンバンライブラリを作成中で、kintone 用テーマを作成してみた。

概要

Gemini Code Assist で、いろいろ作るのが面白くて、現在 kintone 用のカンバンライブラリを作成中です。
kintone 用ということで、kintone のテーマに合わせてみました。

こんな感じのレッドテーマ

kintone テーマに合わせた６色

開発中のカンバンライブラリの操作例

ライブラリ開発フォルダー

カンバンライブラリの開発用として下記構成になっています。
VSCode でコード作成して、Live Sever 経由 Chrome で動作確認します。

kanban/
├── 📄 CONTEXT.md          ... プロジェクトの文脈やAI用指示書
├── 🎨 demo.css            ... デモ画面専用のスタイル
├── 📄 icons.html          ... アイコン一覧・確認用ページ
├── 🌐 index.html          ... メインの実行ファイル（最新版）
├── 🌐 index2.html         ... 開発バージョン / テスト用 2
├── 🌐 index3.html         ... 開発バージョン / テスト用 3
├── 🌐 index4.html         ... 開発バージョン / テスト用 4
├── 🌐 index5.html         ... 開発バージョン / テスト用 5
├── 🌐 index10.html        ... 特定機能のテスト版 / 派生版 10
├── 🎨 rex0220-kanban.css  ... 【重要】カンバン機能の本体スタイル
└── 📜 rex0220-kanban.js   ... 【重要】カンバン機能の本体スクリプト

テーマの作り方

最初に作成したテーマは、ライトモードとダークモードの２パターンでした。
これはライトモードが基本で、ダークモードはCSSクラスを各要素に追加して、個別に色設定しています。
それからいくつかテーマを追加していきます。

ライトモードとダークモード

いろいろなテーマを追加

Matrix 風のテーマなど、いろいろテーマをつくると、CSSクラス設定とその管理が大変になります。

たまには息抜きにマトリックスしましょう！

CSS カスタムプロパティの設定

CSS カスタムプロパティは、色コード（例: #ff0000, rgb(0,0,0)）に名前をつけて、再利用できるようにする仕組みです。
用途に合わせて、名前と色を設定していきます。
基本は、:root に設定して、画面のどこからでも使えるようにします。
あとは、テーマ別にクラスを作成して、テーマごとの色を設定します。

最初にライトモードとダークモードがあったので、カスタムプロパティへの変換は Gemini Code Assist が勝手にやってくれました。
ただ変換漏れやデザインが崩れたりしたところもあって、マニュアルで再調整が必要です。

/* --- Kanban Board Base Styles --- */

/* --- Color Variables --- */
:root {
    /* --- Base --- */
    --rex-kanban-bg-base: #f8f9fa;
    --rex-kanban-bg-board: #f0f0f0;
    --rex-kanban-bg-header: #f0f0f0;
    --rex-kanban-text-primary: #172b4d;
    --rex-kanban-text-secondary: #252525;
    --rex-kanban-text-secondary-hover: #252525;
    --rex-kanban-text-board-title: #172b4d;
    --rex-kanban-text-card-title: #172b4d;
    --rex-kanban-text-column-title: #172b4d;
    --rex-kanban-text-toolbar: #252525;
    --rex-kanban-border-color: #b2b2b2;
    --rex-kanban-border-color-light: #c5c5c5;

    /* --- Components --- */
    --rex-kanban-bg-column: #dcdcdc;
    --rex-kanban-bg-card: #fff;
    --rex-kanban-bg-card-hover: #f4f5f7;
    --rex-kanban-bg-card-selected: #cce5ff;
    --rex-kanban-bg-button-neutral: #dfe1e6;
    --rex-kanban-bg-button-neutral-hover: #e9ecef;
    --rex-kanban-bg-swimlane-title: #e9ecef;
    --rex-kanban-bg-tag: #dfe1e6;
    --rex-kanban-text-tag: #42526e;

    /* --- States & Accents --- */
    --rex-kanban-accent-color: #007bff;
    --rex-kanban-danger-color: #ef4444;
    --rex-kanban-danger-bg-light: #fee2e2;
    --rex-kanban-danger-border-light: #fca5a5;
    --rex-kanban-text-icon: #6b7280;
    --rex-kanban-text-disabled: #aaa;
    --rex-kanban-bg-dragged: #e9ecef;
    --rex-kanban-border-dragged: #adb5bd;
}

.rex0220-kanban-theme-dark {
    --rex-kanban-bg-base: #2d3748;
    --rex-kanban-bg-board: #2d3748;
    --rex-kanban-bg-header: #2d3748;
    --rex-kanban-bg-modal: #1a202c; /* A darker background for modals to distinguish them */
    --rex-kanban-text-primary: #f5f5f5;
    --rex-kanban-bg-header: #2d3748; 
    --rex-kanban-text-primary: #e2e8f0; /* Increased contrast for better readability */
    --rex-kanban-text-secondary: #f8f8f8; /* Increased contrast for secondary text */
    --rex-kanban-text-board-title: #e2e8f0;
    --rex-kanban-text-card-title: #e2e8f0;
    --rex-kanban-text-column-title: #e2e8f0;
    --rex-kanban-text-toolbar: #f8f8f8;
    --rex-kanban-border-color: #718096; 
    --rex-kanban-border-color-light: #808080; /* Made lighter than column bg for visibility */

    --rex-kanban-bg-column: #4a5568;
    --rex-kanban-bg-card: #718096;
    --rex-kanban-bg-card-hover: #a0aec0;
    --rex-kanban-bg-input: #2d3748; /* Input background color for dark mode */
    --rex-kanban-border-input: #718096; /* Input border color for dark mode */
    --rex-kanban-bg-card-selected: #2c5282;
    --rex-kanban-bg-button-neutral: #434C5E;
    --rex-kanban-bg-button-neutral-hover: #4C566A;
    --rex-kanban-bg-swimlane-title: #2c2c2c;
    --rex-kanban-bg-tag: #4a5568;
    --rex-kanban-text-tag: #e2e8f0;

    --rex-kanban-accent-color: #3b82f6; /* A slightly lighter blue for better visibility */
    --rex-kanban-danger-color: #ff8888; /* A softer red for dark mode to reduce eye strain */
    --rex-kanban-danger-bg-light: #c53030;
    --rex-kanban-danger-border-light: #c53030;
    --rex-kanban-text-icon: #d5d5d5;
    --rex-kanban-text-disabled: #a0aec0;
    --rex-kanban-bg-dragged: #4a5568;
    --rex-kanban-border-dragged: #718096;
}

カスタムプロパティを参照

各要素の color, background-color, border などに、用途別に割り当てたカスタムプロパティを指定します。

.rex0220-kanban-toolbar-label {
    color: var(--rex-kanban-text-toolbar);
}

.rex0220-kanban-toolbar-select {
    padding: 5px 8px;
    border-radius: 4px;
    border: 1px solid var(--rex-kanban-border-color);
    background-color: var(--rex-kanban-bg-card);
    color: var(--rex-kanban-text-primary);
    font-size: 14px;
    cursor: pointer;
}

.rex0220-kanban-header-container {
    display: flex;
    align-items: center;
    gap: 12px; /* タイトル間の間隔 */
    padding: 0 16px; /* 左右に余白を追加 */
    margin-bottom: 16px;
}

.rex0220-kanban-header-container .rex0220-kanban-main-title,
.rex0220-kanban-header-container .rex0220-kanban-view-title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--rex-kanban-text-primary);
}

カンバンの親要素にテーマクラスを付与

カンバンの親要素にテーマクラスを付与するとテーマ別に設定したカスタムプロパティの色が適用されます。

<div class="rex0220-kanban-root rex0220-kanban-theme-kintone-red">

kintone ライクのテーマを追加

最初は、ブルーテーマを作りました。
Gemini Code Assist に簡単な依頼をすると、とりあえずいい感じでテーマにあった設定で作ってくれます。

kintone blue をベースに、kintone ライクのテーマを追加して

あとは、色の調整や位置調整などをマニュアル調整します。
（カスタムプロパティを追加したり、区切りを入れたりなど）
全部 Gemini Code Assist に任せようとすると、挫折します。

一つ kintone ライクなテーマができると、あとは Gemini がいい感じで追加してくれます。
マニュアル調整する箇所がだいぶ減ります。

kintone green をベースに、kintone ライクのテーマを追加して

kintone ライクなテーマいろいろ

その他いろいろテーマ