Home-theater-designers
Web アプリケーションにダーク テーマを実装することは、贅沢な作業から必須の作業になりました。デバイス ユーザーは現在、美的好みと実用的な理由の両方から、明るいテーマから暗いテーマに、またはその逆に切り替えることを望んでいます。
今日のMUOビデオ スクロールしてコンテンツを続けてください
ダーク テーマでは、ユーザー インターフェイスに暗いカラー パレットが提供され、暗い環境でもインターフェイスが目に優しくなります。ダークテーマは、OLED または AMOLED スクリーンを備えたデバイスのバッテリー寿命を節約するのにも役立ちます。
これらの利点やその他の利点により、ユーザーにダーク テーマに切り替える選択肢を与えることがより合理的になります。
テストアプリケーションのセットアップ
Vue でダーク テーマを追加する方法をより深く理解するには、開発をテスト実行するための単純な Vue アプリを作成する必要があります。
新しい Vue アプリを初期化するには、ターミナルから次のコマンドを実行します。
npm init vue@latest
このコマンドは、最新バージョンの ビューの作成 package、新しい Vue アプリを初期化するためのパッケージ。また、特定の機能セットから選択するよう求められます。このチュートリアルの範囲では必要ないため、何も選択する必要はありません。
次のテンプレートを app.vue アプリケーション内のファイル 送信元 ディレクトリ：
<!-- App.vue -->
<template>
<div>
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div>
<button class="toggle-button">Toggle Dark Mode</button>
</div>
</template>
上記のコード ブロックは、スクリプトやスタイル ブロックを使用せずに、アプリケーション全体を通常の HTML で記述しています。スタイル設定の目的で、上記のテンプレートのクラスを使用します。ダークテーマを実装すると、アプリの構造が変わります。
CSS 変数を使用したテスト アプリケーションのスタイル設定
CSS 変数または CSS カスタム プロパティ 、スタイル シートで定義できる動的な値です。 CSS 変数は、色やフォント サイズなどの値を 1 か所で定義および管理できるため、テーマ設定に優れたツールを提供します。
CSS 変数と CSS 疑似クラス セレクターを使用して、Vue アプリケーションに通常のテーマとダーク モードのテーマを追加します。の中に ソース/アセット ディレクトリを作成します スタイル.css ファイル。
iPhoneでimeiを見つける場所
コーディングの機能は何ですか
このstyles.cssファイルに次のスタイルを追加します。
/* styles.css */
:root {
--background-color: #ffffff; /* White */
--text-color: #333333; /* Dark Gray */
--box-background: #007bff; /* Royal Blue */
--box-text-color: #ffffff; /* White */
--toggle-button: #007bff; /* Royal Blue */
}
[data-theme='true'] {
--background-color: #333333; /* Dark Gray */
--text-color: #ffffff; /* White */
--box-background: #000000; /* Black */
--box-text-color: #ffffff; /* White */
--toggle-button: #000000; /* Black */
}
これらの宣言には、特別な疑似クラス セレクター ( ：根 ) と属性セレクター ( [ データテーマ='true'] ）。ルート セレクターに含めるスタイルは、最上位の親要素をターゲットとします。これは、Web ページのデフォルトのスタイルとして機能します。
データテーマセレクターは、その属性が true に設定されている HTML 要素をターゲットとします。この属性セレクターでは、ダーク モード テーマのスタイルを定義して、デフォルトのライト テーマをオーバーライドできます。
これらの宣言は両方とも、 -- 接頭辞。これらには、明るいテーマと暗いテーマに合わせてアプリケーションのスタイルを設定するために使用できる色の値が保存されます。
を編集します src/main.js ファイルを作成し、styles.css ファイルをインポートします。
// main.js
import './assets/styles.css'
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')
さらにいくつかのスタイルを追加します スタイル.css 、その下にある データテーマ セレクタ。これらの定義の一部は、 だった キーワード。これにより、初期スタイルと同様に、各変数の値を切り替えるだけで、使用する色を変更できます。
* {
background-color: var(--background-color);
text-align: center;
color: var(--text-color);
padding: 20px;
font-family: Arial, sans-serif;
transition: background-color 0.3s, color 0.3s;
}
.header {
font-size: 24px;
margin-bottom: 20px;
}
.styled-box {
background-color: var(--box-background);
color: var(--box-text-color);
padding: 10px;
border-radius: 5px;
margin: 20px 0;
}
.styled-text {
font-size: 18px;
font-weight: bold;
}
.toggle-button {
background-color: var(--toggle-button);
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
padding: 5px 10px;
}
ユニバーサル CSS セレクター ( * ) モードを切り替えるときに滑らかなアニメーションを作成するには:
* {
/* Add more transitions as needed */
transition: background-color 0.3s, color 0.3s;
}
これらのトランジションにより、ダーク モードを切り替えると背景色とテキストの色が徐々に変化し、心地よい効果が得られます。
ダークモードロジックの実装
ダーク テーマ モードを実装するには、ライト テーマとダーク テーマを切り替えるための JavaScript ロジックが必要です。あなたの中で app.vue ファイル内で、に記述されたテンプレート ブロックの下に次のスクリプト ブロックを貼り付けます。 Vue のコンポジション API :
<!-- App.vue -->
<script setup>
import { ref } from 'vue';
// Function to get the initial dark mode preference from local storage
const getInitialDarkMode = () => {
const userPreference = localStorage.getItem('darkMode');
return userPreference === 'true' ? true : false;
};
// Define the ref for darkMode and initialize it with the user preference
// or false
const darkMode = ref(getInitialDarkMode());
// Function to save the dark mode preference to local storage
const saveDarkModePreference = (isDarkMode) => {
localStorage.setItem('darkMode', isDarkMode);
};
// Function to toggle dark mode and update the local storage preference
const toggleDarkMode = () => {
darkMode.value = !darkMode.value;
saveDarkModePreference(darkMode.value);
};
</script>
上記のスクリプトには、Web アプリでライト モードとダーク モードを切り替えるためのすべての JavaScript ロジックが含まれています。スクリプトは次で始まります 輸入 Vue でリアクティブ データ (動的データ) を処理するための ref 関数をインポートするステートメント。
次に、を定義します。 getInitialDarkMode ユーザーのダークモード設定を取得する関数 ブラウザの ローカルストレージ 。それは宣言します ダークモード ref、getInitialDarkMode 関数で取得したユーザーの設定で初期化します。
の ダークモード設定を保存 この関数は、ブラウザの LocalStorage にあるユーザーのダーク モード設定を更新します。 セットアイテム 方法。最後に、 ダークモードの切り替え この関数を使用すると、ユーザーはダーク モードを切り替え、ブラウザの LocalStorage 値をダーク モードに更新できるようになります。
ダークモードテーマの適用とアプリケーションのテスト
さて、あなたのテンプレートブロックで、 app.vue ファイルにデータテーマ属性セレクターを追加して、ロジックに基づいてダーク モード テーマを条件付きで適用します。
<!-- App.vue -->
<template>
<!-- added the data theme attribute selector to apply the dark theme
conditionally -->
<div :data-theme="darkMode">
<h1 class="header">Welcome to My Vue App</h1>
<p>This is a simple Vue app with some text and styles.</p>
<div class="styled-box">
<p class="styled-text">Styled Text</p>
</div>
<!--added the dark mode switch button-->
<button @click="toggleDarkMode" class="toggle-button">
Toggle Dark Mode
</button>
</div>
</template>
ここでは、データテーマセレクターを darkMode ref にバインドしています。これにより、いつでも ダークモード true の場合、ダークテーマが有効になります。ボタンのクリック イベント リスナーは、ライト モードとダーク モードを切り替えます。
ターミナルで次のコマンドを実行して、アプリケーションをプレビューします。
npm run dev
次のような画面が表示されるはずです。
ボタンをクリックすると、アプリは明るいテーマと暗いテーマを切り替える必要があります。
Vue アプリケーションに他のパッケージを統合する方法を学ぶ
CSS 変数と LocalStorage API を使用すると、Vue アプリにダーク テーマを簡単に追加できます。
この人はあなたの電話のロックを解除しようとしました
Web アプリをカスタマイズしたり追加機能を使用したりできる、サードパーティのライブラリや組み込みの Vue エクストラが多数あります。