vue3 と element-plus に基づいてダーク モードを実装する方法

1. 基本的な使い方

htmlタグにdarkクラスを追加することで自分で切り替えることができるので

ただし、切り替えとさらなるカスタマイズを容易にするために、 useDark | VueUse

を使用することが公式に推奨されています。例: 以下では、要素プラススイッチ コンポーネントに基づいてダーク モード スイッチ コンポーネントが作成されます。

<script setup>
import { useDark, useToggle } from &#39;@vueuse/core&#39;

const isDark = useDark()
const toggleDark = useToggle(isDark)

</script>

<template>
  <span @click.stop="toggleDark()">暗黑模式</span>
  <el-switch size="small" v-model="isDark"/>
</template>

2. カスタムダークスタイル

ダークモードでは、ダーク以外のスタイルが混在すると、非常に醜く眩しくなります。一部のカスタム スタイルのダーク モード適応は不可欠です

1. ダーク スタイル

element-plus は、独自のスタイルのダーク モード適応プロジェクトを満たすために、ダーク モードでいくつかの変数を定義します

色が設定されたスタイルは自動的に適応できません。

html.dark {
  .my-dialog {
    background-color: #304156;
    color: #bfcbd9;
  }
}

2 をカバーするダーク スタイルのセットを手動で記述する必要があります。変数の適用範囲

繰り返し使用される一部のスタイルは、変数として定義できます。単純な変数カバレッジを介してダーク モードに適応できるように再利用します

:root {
  --theme-color: #409EFF;
}
html.dark {
  --theme-color: #135fad;
}
.demo-class {background-color:var(--theme-color)}
.demo-class-one button {color:var(--theme-color)}

3. element-plus 変数カバレッジ

element-plus のデフォルトのダーク スタイルを変更したい場合は、次のようにします。再度定義して上書きすることができます。正しくカバレッジするには、要素プラス スタイル

src/styles/demo.scss:

html.dark {
  /* 覆盖element-plus默认深色背景色 */
  --el-bg-color: #626aef;
  .el-button--primary {
    --el-button-text-color: #ededed;
  }
}

main.js:

import 'element-plus/dist/index.css'
import './styles/demo.scss'

を導入した後に、次のスタイルを導入する必要があります。 4. scss 変数

scss は変数を定義し、それらを他のスタイルに導入します。 CSS 変数と組み合わせると、ダーク モード適応も簡単に実現できます

src/styles/variables.scss：

$menuBg:var(--menuBg);
$menuActiveText:var(--themeColor);
$btnColor: var(--themeColor);

src/styles/index.scss：

@import './variables.scss';

:root {
  --themeColor: #409EFF;
  --menuBg: #304156;
}
html.dark {
  --themeColor: #46ACFF;
  --menuBg: #263445;
}

main .js:

import './styles/index.scss'

そうは言っても、scss 変数を css 変数として使用するだけなら、css 変数を直接使用しないのはなぜでしょうか。さらに、css 変数は js

3 を使用して変更することもできます。実際、画像の明るさと彩度は CSS3 フィルターを使用して設定されます:

filter: Brightness(0.8) saturate(1.25);

In darkモード 写真を表示すると、一部の部分が明るくなって眩しくなります。 CSS フィルターを使用して画像の明るさと彩度を設定できます画像に加えて、画像を背景画像として使用するコンテナにクラス dark-img-bg またはその他の CSS セレクターを追加できます

html.dark {
  img,
  .dark-img-bg {filter:brightness(0.8) saturate(1.25)}
}

以上がvue3 と element-plus に基づいてダーク モードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。