SIRIUSにダークモード機能

キャプチャ画像

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


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

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

 

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

キャプチャ画像

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

ダークモードスイッチをONにすると画面全体が暗くなります。

 

Before

before画像

After

after画像

 

Before

before画像

After

after画像

ページ遷移してもダークモード維持

今回搭載のダークモードはそのページのみ有効ではなく、ページが変わってもOFFにしない限りはダークモード状態が続く仕様になってます。

 

ページが変わるたびに通常モードに戻ってしまうとそのたびに画面が明るくなって見にくくなるのと、その都度ダークモードをONにする手間がかかって面倒だからです。

 

PC上ではページが切り替わる瞬間に、一瞬ですがパッと明るくなります。

 

これはページが変わるといったん通常モードに戻った後にダークモードへ自動転換する仕様のためですが、ほんの一瞬です。

 

※管理人のiPhonePad上ではページ遷移時に明るくなることなくスムーズにページが切り替わります。

 

PC上だと”目立つ”という感じでしょうか。

 

DEMOサイトで実際の動作が確認できます。

 

クール・DEMOサイト

プレーン・DEMOサイト

アートレス・DEMOサイト

SIRIUSカスタムテンプレート【Volar】

キャプチャ画像

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

入手方法についてはコチラ↓をご覧ください

(※「SIRIUSでホームページ作成」という姉妹サイトの専用ページが開きます)
 この記事をシェア 
キャプチャ画像

PC版レイアウトに切替

スマホ版レイアウトに切替