カンバンライブラリで kintone 用テーマ作成

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 ライクなテーマいろいろ

• その他いろいろテーマ