Vue は scss 変数を使用してテーマの色を制御します

原理は、本体スタイルに変数を挿入し、テーマの色を変更するときに変数の色を変更することです。
scss 変数を--color:red
本文に置く利点は、グローバルに使用できることです。

if(sheme==="dark"){
 document.getElementsByTagName('body')[0].style.setProperty('--color', `#27202E`);
 }else{
 document.getElementsByTagName('body')[0].style.setProperty('--color', `#ffffff`);
 }

使用：

  div:hover {
    color: var(--color);
  }

アプローチ 2: scss
filter.App.vue

<style lang="scss">
:root {
    
    
  --background-color: white;
  --text-color: black;
}
[theme="dark"] {
    
    
  --background-color: black;
  --text-color: white;
}
</style>

xxxページ.ビュー

    changeTheme() {
    
    
      this.theme = this.theme == "dark" ? "light" : "dark";
      document.documentElement.setAttribute("theme", this.theme);
    },

<style scoped lang="scss">
.home {
    
    
  background: var(--background-color);
}
</style>

[tips:scoped 非反復データ属性 (data-v-2311c06a など) を HTML の DOM ノードに追加して、その一意性を示します。
各 CSS セレクター (コンパイルされて生成された CSS ステートメント) の最後に 1 つ追加します。現在のコンポーネントのセレクター ([data-v-2311c06a] など) を使用してスタイルをプライベート化します。
コンポーネントの内部に他のコンポーネントが含まれている場合、現在のコンポーネントのデータ属性のみが他のコンポーネントの最も外側のラベルに追加されます]

ダークモードかどうかにかかわらず、システムのアプローチに従ってください。

	const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
	
	function darkModeHandler() {
    
    
	    if (mediaQuery.matches) {
    
    
	        console.log('现在是深色模式')
	    } else {
    
    
	        console.log('现在是浅色模式')
	    }
	}
	
	// 判断当前模式
	darkModeHandler()
	// 监听模式变化
	mediaQuery.addListener(darkModeHandler)

簡単に色を反転したり、絵文字などの効果を削除したりできます。[prefers-color-scheme] は、システムのテーマがダーク モードであるかどうかを自動的に読み取ります。システムに従ってください。

@media (prefers-color-scheme: dark) {
    
    
        body {
    
    
    filter: invert(100%);
    background-color: rgb(29, 32, 31) !important;
  }
  img,
  .astro-code,
  .emoji {
    
    
    filter: invert(100%);
  }
}