Calcite Design System を使用したダークモードスイッチの作成

はじめに

前回の記事では Calcite Design System の使用方法を学習する手段の第一歩として、Calcite Design System を使用したチュートリアル、Create a mapping app のサンプルを翻訳して紹介しました。本記事ではチュートリアルの Build a dark mode switch のサンプルの解説を翻訳して紹介します。

Calcite Components と ArcGIS Maps SDK for JavaScript のライトテーマとダークテーマを切り替えるコンポーネントを作成する方法について説明します。

Calcite Components を使用して、Calcite Components、および ArcGIS JavaScript API ウィジェットやベースマップのダークモードを有効するエレガントなダークモードスイッチを設計します。このアプリケーションは、Create a mapping app のチュートリアルで作成したものをベースにしています。

Calcite は、CSS のクラスである calcite-mode-light（デフォルト）と calcite-mode-dark を使って変更できるライトモードとダークモードを提供します。また、ブラウザの CSS prefers-color-scheme メディアクエリに従う calcite-mode-auto クラスも用意されています。要素にモードクラスを設定すると、その子ノードもすべて変更されます。

モードとスタイリングの詳細については、Calcite Design System の colors and modes foundation の基礎、および ArcGIS Maps SDK for JavaScript の styling に関するドキュメントを参照してください。

前提条件

ArcGIS 開発者アカウント

このチュートリアルで使用するサービスにアクセスするには、無料の ArcGIS Developer アカウントまたは ArcGIS Online の組織に関連付けられたアカウントが必要です。

ステップ

新しいペンの作成

まずは、チュートリアル「Create a mapping app」を完了するか、このペンを使ってください。

API キーの使用

開発者アカウントを使用している場合、ArcGIS サービスにアクセスするために API キーが必要です。ArcGIS Online の組織に関連付けられたアカウントをお持ちの場合は、この手順を省略することができます。

開発者用ダッシュボードで、APIキーを取得します。
CodePen > <script> で、esriConfig クラスをインポートします。
apiKey プロパティを設定します。

  "esri/widgets/Print",
  "esri/config"
], function (WebMap, MapView, Bookmarks, BasemapGallery, LayerList, Legend, Print, esriConfig ) {
esriConfig.apiKey = "YOUR_API_KEY";

テーマのスタイルシート追加

ArcGIS Maps SDK for JavaScript では、個別のテーマスタイルシートが使用されます。ライトスタイルシートとダークスタイルシートの両方を追加すると、id 属性を使用して JavaScript で動的に切り替わります。

ダークテーマのスタイルシートを追加し、disabled 属性を設定し、id を追加します。
既存のライトテーマのスタイルシートにidを追加する。

<script src="https://js.arcgis.com/calcite-components/1.0.7/calcite.esm.js" type="module"></script>
<link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.7/calcite.css" />
<script src="https://js.arcgis.com/4.25/"></script>
<link disabled id="arcgis-maps-sdk-theme-dark" rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/dark/main.css" />
<link id="arcgis-maps-sdk-theme-light" rel="stylesheet" href="https://js.arcgis.com/4.25/esri/themes/light/main.css" />

HTML を追加

ダークモードスイッチの主要部品は calcite-switch です。また、モードスイッチャーは、明暗のアイコンに calcite-icon を使用し、calcite-label で全体をまとめます。

calcite-shell コンポーネントに div 要素を追加し、骨組みにヘッダースロットを配置します。id 属性は後でスタイリングに使用します。
考え方については、スロットの Core concepts のセクションをお読みください。次のステップでCSS を追加した後、骨組みのヘッダースロットからコンポーネントを削除することで、マップ上にテーマスイッチャーを配置することができます。
ヘッダースロット内にネストした div エレメントを追加します。id 属性は後でスタイル付けに使用するため、記述してください。
calcite-label コンポーネントを追加し、layout 属性を inline に設定し、後でスタイリングに使用する class 属性を追加します。
コンポーネントのスタイル設定に使用する class を追加します。
calcite-switch コンポーネントを追加します。

<body>
  <calcite-loader active></calcite-loader>
  <calcite-shell content-behind hidden>

    <!--  Header slot  -->
    <div slot="header" id="header">

      <!-- Title -->
      <h2 id="header-title">
        <!-- Dynamically populated -->
      </h2>

        <!-- Controls -->
        <div id="header-controls">
          <!-- Dark Mode Switch -->
          <calcite-label layout="inline" class="label-wrapper">
            Dark mode: Off
            <calcite-switch></calcite-switch>
            On
          </calcite-label>
        </div>
    </div>

CSS の追加

この時点でアプリを起動すると、アプリの上部、左側にダークモードスイッチャーが表示されているのがわかると思います。

次に、Flexbox を使用してコンポーネントを配置するために、CSS でスタイルを追加します。

1. style エレメントに、ヘッダースロットのために作成した id を使用して、ヘッダー用の CSS を追加します。ヘッダー内のコンテンツにスペースを空けるため、padding を追加し、ヘッダースロットの背景色を CSS 変数 --calcite-ui-foreground-1 に設定します。

#header {
  display: flex;
  padding: 0 1rem;
  background-color: var(--calcite-ui-foreground-1);
}

2. ヘッダースロットのネストされた div の id を使用して、ヘッダーコントロールにスタイルを追加します。追加された div エレメントのスタイルは、1つまたは複数のコンポーネントを収容することができます。ヘッダーコントロールのスペースを確保するには、margin-inline-start と align-self の CSS プロパティを使用します。

#header-controls {
  display: flex;
  margin-inline-start: auto;
  align-self: center;
}

3. ダークモードスイッチのレイアウトを設定するために、margin-inline と padding の CSS プロパティを設定します。CSS 変数に --calcite-ui-border-1 で色を指定して、border を追加します。次に、インターフェイスの将来のコントロールに対応するため、calcite-switch にマージンのCSSプロパティを追加します。

コンセプトの詳細については、CSS 変数の Core concepts のセクションをお読みください。Calcite のモードカラーには、ライトとダークの値があり、モードを切り替えると自動的に切り替わります。テーマを切り替えるアプリケーションでは、Calcite 以外のすべての要素にモードカラー変数を使用します。

4. 次に、calcite-label の -calcite-label-margin-bottom CSS 変数を追加して、コンポーネントの下の間隔を設定します。

calcite-label {
  --calcite-label-margin-bottom: 0px;
}

5. 最後に、スイッチの cursor プロパティに pointer を設定し、スイッチコンテナがクリック可能であることを伝達します。

.label-wrapper {
  display: flex;
  margin-inline: 1rem;
  padding: 0.5rem;
  border: 1px solid var(--calcite-ui-border-1);
  cursor: pointer;
}

calcite-switch {
  margin: 0 0.5rem;
}

JavaScript の追加

これで、見栄えの良いコンポーネントができましたが、ダークモードは有効になりません。次に、ダークモードスイッチャーを JavaScript と連携します。

<script> 内の既存の JavaScript コードの下に、ダークモードを有効にするための新しい関数を作成します。
body エレメントの calcite-theme-dark クラスをトグルします。calcite-theme-light クラスはデフォルトなので、追加する必要はありません。
上記で追加した id 属性を使用して、ArcGIS Maps SDK for JavaScript の light スタイルシートと dark スタイルシートにアクセスします。
両方のスタイルシートの disabled 属性を否定して、その Boolean 値を切り替えます。
現在のテーマに応じて、ベースマップを gray-vector と dark-gray-vector に変更します。
calcite-switch コンポーネントにイベントリスナーを追加します。calciteSwitchChange イベントを作成し、作成した関数を提供します。
Calcite は、多くのコンポーネントに対してカスタムイベントを提供しています。カスタムイベントは、プレフィックスは全てが calcite、次にコンポーネント名、最後にイベントのタイプになります。コンポーネントの API リファレンスで、そのコンポーネントがイベントを持っているかどうか、またそのイベントを確認することができます。

　　　　document.querySelector("calcite-shell").hidden = false;
　　　　document.querySelector("calcite-loader").hidden = true;

        const updateDarkMode = () => {
          // Calcite mode
          document.body.classList.toggle("calcite-mode-dark");
          // ArcGIS Maps SDK theme
          const dark = document.querySelector("#arcgis-maps-sdk-theme-dark");
          const light = document.querySelector("#arcgis-maps-sdk-theme-light");
          dark.disabled = !dark.disabled;
          light.disabled = !light.disabled;
          // ArcGIS Maps SDK ベースマップ
          map.basemap = dark.disabled ? "gray-vector" : "dark-gray-vector";
        };

        document.querySelector("calcite-switch").addEventListener("calciteSwitchChange", updateDarkMode);

      });
    });
  </script>
</html>

アプリの実行

CodePenで、コードを実行するとアプリケーションが表示されます。

画面右上に、新しい美しいダークモードスイッチャーのコンポーネントが表示されます。コンポーネント上のどこかをクリックすると、calcite-switch が切り替わります。イベントリスナー用に作成した関数が実行され、Calcite Components のテーマ、および ArcGIS Maps SDK for JavaScript のベースマップとウィジェットが切り替わります。

まとめ

今回は、Calcite Design System を使用した Build a dark mode switch のサンプルを翻訳して紹介しました。次のステップとして Apply core concepts のチュートリアルも併せて参照してください。

Calcite Design System を使用したダークモードスイッチの作成