※モバイル機器のみ有効→PC表示に切替 モバイル表示に切替

ダークモード時は自動でダークモード用レイアウトに切り替わります

SIRIUSにダークモード機能

キャプチャ画像

iPhone(iOS13~)やAndroid(10~)に搭載されてるダークモード(ダークテーマ)に合わせて、【Volar】デザインテンプレートにもダークモード機能を搭載しました。


ダークモード(ダークテーマ)機能について

ご存知の方も多いかと思いますが、ダークモード(ダークテーマ)というのは画面の背景が黒ベースでテキストカラーが白ベースの、主に暗いところで見やすくなる表示モードです。

 

※コチラ↓はiPhoneの画面キャプチャ画像です。

キャプチャ画像

 

Windows10にもダークモードというのがありますが、通常ダークモードと言えばiPhone(スマホ)でのダークモードが思い浮かぶでしょう。

 

iPhone(or Android)にOSベースで標準搭載されるようになってからというもの、ダークモード時には自動でダークモードになるアプリもどんどん登場してます。

 

しかしSafariで開くホームページ(ウェブサイト)は、いくらOS側でダークモードに切り替えたとしてもそのまま表示されてしまいます。

 

暗めの場所でホームページを開いていきなり画面がぱぁ~と明るくなって思わず「まぶしい!」ってなった経験、あなたも一度はあるんじゃないですか。

 

そんな状態で明るいページを見続けるのは無理があるし、目にも優しくないですね。

 

そこで【Volar】にはいまどきのダークモードに合わせて、暗い場所でもホームページが見やすくなるようホームページの表示を暗めにできるダークモード機能を搭載してあります。

 

「ダークモード」機能は、【Volar】デザインテンプレート「クール」「プレーン」「アートレス」のみへの搭載となってます。

 

SIRIUSテンプレート【Volar】「デフォルトタイプ」「ビジネスタイプ」「角丸タイプ」には搭載してません。

 

※ダークモード機能はデフォルトでは無効化されてます。

 

※矢印のドラッグでダークモード前後の比較が確認できます。

キャプチャ画像・後
キャプチャ画像・前

 

キャプチャ画像・後
キャプチャ画像・前

2種類のダークモードスイッチ

当初、【Volar】デザインテンプレートに搭載していたダークモード切替機能はスイッチのON・OFFによる切り替えのみでした。

デザインテンプレートの各DEMOサイトでは、スイッチのON・OFFによるダークモード機能が確認できます。

 

クール・DEMOサイト

プレーン・DEMOサイト

アートレス・DEMOサイト

 

現在はサイトを見ている機器(WindowsPCやiPhoneなど)がダークモードであれば自動でダークモードに切り替わる機能も追加搭載してます。

 

当サイトでは自動でダークモードに切り替わる機能を採用しているため、ダークモードスイッチは表示OFFになってます。

 

iPhone(スマホ)で一時的にダークモードに変更してみてください。

サイトが瞬時にダークモードに変わるのが確認できるかと思います。

(Windows10でも確認できます)

 

2つの機能の違い

スイッチ切り替えによるダークモード』機能と『自動切り替えによるダークモード』機能の違いは以下のようになってます。

 

  スイッチ切替 自動切替
ダークモード有効化に必要な機能 ・専用のスタイルシート
・ダークモードスイッチ表示用モジュール
・ダークモード用スクリプト
・ページ遷移時のダークモード機能持続スクリプト(任意)
専用のスタイルシートのみ
ダークモードON切替 スイッチON サイト閲覧機器のダークモード有効時に自動起動
ダークモードOFF切替 スイッチOFF サイト閲覧機器のダークモード無効時に自動OFF
ページ遷移時のダークモード維持 ダークモード機能持続スクリプトを有効化する必要あり 閲覧機器側のダークモードがOFFにならない限りは維持

スイッチ切替の方は、最後の『ページ遷移時のダークモード維持』専用のスクリプトを有効にしなかった場合、ダークモードスイッチをONにしたページはダークモードで表示されても、リンクをクリックして別のページに切り替えると通常の明るいページに戻ってしまいます。

 

ページが変わるたびに画面が明るくなるのは単に見にくいだけでなくその都度ダークモードをONにする手間がかかって面倒なので、基本的には『ページ遷移時のダークモード維持』スクリプトは常に有効にしておくことをおススメします。

 

ここまでの違いを見てわかるように、スイッチON・OFFによるダークモード切替サイト訪問者の意思で切り替え可能ですが、有効化するモジュールやスクリプトが多めになります。

 

一方、自動起動の方はサイト訪問者の閲覧機器がダークモードになっていれば、専用スタイルを有効化しておくだけで自動起動します。

 

手間もかからず専用スタイルのみでの切り替えなので動作も軽めです。

 

ただし閲覧機器側のダークモード機能が無効化されない限りダークモード機能はOFFにはなりません。

 

またスイッチ類がないので、機器がダークモード中に初めてサイトを訪れた方はいきなり暗めのページが表示されて一瞬とまどう可能性もあります。

 

そのため「閲覧機器がダークモード時には自動でダークモードテーマに切り替わります」的な文言をどこかに表示させておくと親切設計かもしれませんね。

SIRIUSテンプレート【Volar】

キャプチャ画像

SIRIUS ver.1.5で大幅刷新された新テンプレートを元に、独自のカスタマイズを加えた改良型SIRIUSテンプレートが【Volar】です。

入手方法についてはコチラ↓をご覧ください。
 この記事をシェア