テーマ

多くの端末は、ライトモード、ダークモードの2種類のモードを備えており、夜間の閲覧による目への影響の軽減を図っています。

XelticaUI は、クラスを追加するだけでダークモードに切り替えられます。
どちらのモードでもデザインが崩れないように設計されているので、 難しいことを考える必要がありません。

ダークテーマに切り替える場合は、bodyタグにdarkクラスを追加するだけです。

このページは、OSの設定に応じてテーマが切り替わるようになっています。同様の処理を実装したい場合は、以下のコード片を用いると良いかもしれません。

const q = window.matchMedia('(prefers-color-scheme: dark)');
const sync = (isDark) => document.body.classList[isDark ? 'add' : 'remove']('dark');

sync(q.matches);
q.addListener(e => sync(e.matches));