📱 🚣🏽 👩‍👧‍👧 UIキットからデプロイまでのNuxt.jsアプリ。パート2：ダークテーマ 🏳️‍🌈 🈺 🤦🏻

こんにちは、Habr！

Nuxt.jsを使用した最新のブログの作成に関する一連の記事の第2部を公開しています。今日は、最初の部分であなたと一緒に書いたアプリケーションにダークテーマを実装します。

各パーツのコードはGithubの独自のスレッドにありmaster

、最後に公開された記事のアプリケーションのバージョンが利用可能であることに注意してください。

ダークテーマとは何ですか？

ダークテーマは、暗い背景に対して明るいテキストとインターフェイス要素を表示するインターフェイスの配色であり、暗い場所で携帯電話、タブレット、およびコンピューターの画面を簡単に表示できます。ダークテーマは、読みやすさに必要な最小限の色のコントラスト比を維持しながら、画面から放出される光を減らします。

ダークテーマは、現在の照明条件に合わせて画面を調整し、夜間や暗闇での使いやすさを提供することで目の疲れを軽減することにより、視覚的な人間工学を改善します。

また、Webおよびモバイルアプリケーションでダークテーマを使用すると、デバイスのバッテリー寿命が延びる可能性があることに注意してください。Googleは、OLED画面のダークテーマがバッテリー寿命の延長に非常に役立つことを確認しています。

@ nuxtjs /カラーモード

ダークテーマを実装するには、@ nuxtjs / color-modeモジュールを使用します。これは次の機能を提供します。

.${color}-mode

タグ<html>

にクラスを追加して、CSSテーマの管理を容易にします
任意のモードNuxt

（static

、、ssr

またはspa

）で動作します。
ユーザーのデバイス上のシステムのカラーモードを自動的に検出し、このデータに基づいて適切なテーマを設定できます。
選択したテーマをタブとウィンドウの間で同期させることができます。
アプリケーション全体ではなく、個々のページに実装されたテーマを使用できます（インクリメンタル開発に最適）。
このモジュールはIE9 +もサポートしています（これが現代の開発にまだ関連しているかどうかはわかりませんが、誰かに役立つかもしれません）。

まず、モジュールをインストールしましょう：

npm i --save-dev @nuxtjs/color-mode

次に、このモジュールに関する情報をbuildModules

ファイルのセクションに追加します nuxt.config.js

。

{
  buildModules: [
    '@nuxtjs/color-mode'
  ]
}

いいね！ここで、アプリケーションを実行Elements

して開発者コンソールでタブを開くと、 html

たとえば、この場合、オペレーティングシステムのテーマに対応するタグにクラスが追加されていることがわかります class="light-mode"

。

テーマスイッチャー

次のステップでは、ダークテーマをライトテーマに、またはその逆に変更するスイッチを実装しましょう。 Figmaでアプリケーション

の設計を見ると、テーマスイッチャーの隣に言語スイッチャーもあることがわかります。これは、このシリーズの次の記事の1つで実装します。

これらのスイッチをカプセル化し、他のコンポーネントの前にマージンを処理するラッパーコンポーネントをすぐに作成しましょう。

これを行うにAppOptions

は、次のコンテンツを含むコンポーネントを作成します。

<template lang="pug">
section.section
  .content
    .app-options
      switcher-color-mode
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'AppOptions',
})
</script>

<style lang="scss" scoped>
.app-options {
  display: flex;
  margin-top: 24px;
}
</style>

Githubのコンポーネント。

ご覧のとおり、このコンポーネントにはロジックがなく、ネストされたコンポーネントのマージンを設定するだけです。これでswitcher-color-mode

、ネストされたコンポーネントが1つだけになりました。それを実装してみましょう。このコンポーネントの

セクションを見てみましょう script

。

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'SwitcherColorMode',

  computed: {
    icon() {
      return (this as any).$colorMode.value === 'light'
        ? 'assets/icons/sun.svg'
        : 'assets/icons/moon.svg'
    },
  },

  methods: {
    changeColorMode() {
      ;(this as any).$colorMode.preference =
        (this as any).$colorMode.value === 'light' ? 'dark' : 'light'
    },
  },
})
</script>

ここではchangeColorMode

、モジュールによって提供されるオブジェクトのテーマを変更するメソッドを実装しています @nuxtjs/color-mode

。

値が変更される $colorMode.preference

と、タグの対応するクラスも設定され html

ます： class="light-mode"

または class="dark-mode"

。

さらにicon

、選択したテーマに応じて、必要なアイコンを返す計算プロパティがあります。正しく機能するためには、アイコンsun.svg

と moon.svg

ディレクトリを追加する必要があることに注意してください assets/icons

。

コンポーネントテンプレートは次のようになります。

<template lang="pug">
button(@click="changeColorMode")
  img(
    alt="theme-icon"
    :src="getDynamicFile(icon)"
  )
</template>

ここではすべてが非常に簡単です！メソッドを呼び出しchangeColorMode

てテーマを変更するボタンをクリックすると、ボタンが表示されます。ボタンの中に、選択したテーマの画像が表示されます。 Githubの

コンポーネント。このコンポーネントをアプリケーションのメインページに追加するだけです。その後、ページテンプレートは次のようになります。

<template lang="pug">
.page
  section-header(
    title="Nuxt blog"
    subtitle="The best blog you can find on the global internet"
  )

  app-options

  post-list
</template>

変数管理

最初の部分から覚えているかもしれませんが、アプリケーションscss

ですべての色を定義するために変数を使用しました。今やらなければならないのは、選択したテーマに応じてこれらの変数の値を変更することだけです。

ただし、問題は scss

、アプリケーションの構築時に変数が一度設定されることであり、将来、テーマを変更するときに変数を再定義することはできません。

この制限はヘルプを使用して回避できます js

が、はるかに簡単な解決策がありcss

ます。ネイティブ変数を使用できます。

変数を含むファイルでは、assets/styles/variables.scss

色のセクションは次のようになります。

// colors  
$text-primary:                      rgb(22, 22, 23);  
$text-secondary:                    rgb(110, 109, 122);  
$line-color:                        rgb(231, 231, 233);  
$background-color:                  rgb(243, 243, 244);  
$html-background-color:             rgb(255, 255, 255);

まず、css

変数を使用して、同じファイル内の2つの配色（明るい色と暗い色）を定義しましょう。

:root {
  // light theme
  --text-primary:                   rgb(22, 22, 23);  
  --text-secondary:                 rgb(110, 109, 122);  
  --line-color:                     rgb(231, 231, 233);  
  --background-color:               rgb(243, 243, 244);  
  --html-background-color:          rgb(255, 255, 255);  
  
  // dark theme  
  &.dark-mode {
    --text-primary:                 rgb(250, 250, 250);  
    --text-secondary:               rgb(188, 187, 201);  
    --line-color:                   rgb(45, 55, 72);  
    --background-color:             rgb(45, 55, 72);  
    --html-background-color:        rgb(26, 32, 44);  
  }  
}

css

セレクターで変数を定義しました :root

。標準では、 css

変数が指定され、接頭辞が付いて使用されます --

。 MDNと W3Schoolsの疑似クラス

について読んでください。引用元：疑似クラスは、ドキュメントツリーのルート要素を見つけます。 HTMLに適用され、タグを検索し、htmlタグセレクターと同じですが、その特異性は高くなります。ご覧のとおり、以前に直接書き込まれた色は css

:root

MDN

css

:root

:root

html

scss

変数はcss

デフォルト値として変数に指定されるようになり、クラスが存在する場合、 .dark-mode

これらの値はオーバーライドされます。

これで、 scss

色変数は次のようになります。

$text-primary:                      var(--text-primary);  
$text-secondary:                    var(--text-secondary);  
$line-color:                        var(--line-color);  
$background-color:                  var(--background-color);  
$html-background-color:             var(--html-background-color);

テーマを切り替えると、指定された値に応じて配色が変更され、すでに実装されているコンポーネントでは何も変更する必要はありません。

結論

この記事のおかげで、Nuxt.jsアプリケーションにダークテーマを実装する方法を学びました。

すべてのステップを完了することができましたか？ダークテーマは単なる誇大宣伝だと思いますか、それとも必需品ですか？コメントであなたの考えを共有してください。

必要な資料へのリンク：

UIキットからデプロイまでのNuxt.jsアプリ。パート2：ダークテーマ

ダークテーマとは何ですか？

@ nuxtjs /カラーモード

テーマスイッチャー

変数管理

結論

More articles: