のはどうやるんだろう？と思った時の個人的メモです。
今更ながらVueUseとかいう超凄い！超便利！なライブラリを知ったので、手始めにテーマ切り替えを試してみます。Nuxt 3のオートインポートにも対応しているんですって！これはもう使わない手はない！ってことで、行ってみましょう。
↓はデモとVueUseのドキュメントです。

開発環境

node.js : v16.17.0
yarn : 1.22.19

プロジェクト作成

先ずはNuxtのプロジェクトを作成します。いつもの。

npx nuxi init nuxt3-app
cd nuxt3-app
yarn install

ライブラリ等々インストール

今回のメインであるVueUse、CSSフレームワークのTailwind CSSと豊富なテーマやコンポーネントが魅力的なdaisyUIをインストールします。

yarn add --dev @vueuse/nuxt @vueuse/core @nuxtjs/tailwindcss daisyui

tailwind.config.tsを作成し、追記。

npx tailwindcss init

tailwind.config.ts

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
+ plugins: [require('daisyui')],
};

nuxt.config.tsに追記。

nust.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
+ modules: ['@nuxtjs/tailwindcss','@vueuse/nuxt'],
});

Nuxtのプロジェクトを編集

OSのテーマを取得し、それを管理するのにuseColorModeを使用します。この関数はuseStorage等をラップしているので、自動的に永続化までできちゃいます。楽ちんですね！
属性名には今回daisyUIのテーマを使用するのでdata-themeを指定しておきす。

composables/useTheme.ts

const useTheme = () => {
  const mode = useColorMode({
    storageKey: 'theme',
    attribute: 'data-theme',
    emitAuto: true,
  });
  const { next: changeTheme } = useCycleList(['dark', 'light', 'auto'], {
    initialValue: mode,
  });

  return {
    theme: readonly(mode),
    changeTheme,
  };
};

export default useTheme;

app.vue

<script setup lang="ts">
const { theme, changeTheme } = useTheme();
</script>

<template>
  <Html :data-theme="theme" />

  <button class="btn" @click="changeTheme()">change</button>
</template>

以上です。たったこれだけでOSのテーマを取得したり、永続化したりと大変お手軽です！型もしっかり付いていますし、オートインポートもいい感じ！
まだまだたくさんの便利な関数が用意されているので、色々試してみましょう！

GitHub Pagesにデプロイ

備忘録

リポジトリのSettings → Pages → Build and deployment → SourceをGitHub Actionsに設定。

nuxt.config.ts

+ const REPOSITORY_NAME = '/<repository-name>/';

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ['@nuxtjs/tailwindcss', '@vueuse/nuxt'],
+ app: {
+   baseURL: REPOSITORY_NAME,
+   cdnURL: `https://<user-name>.github.io${REPOSITORY_NAME}`,
+ },
});

.github/workflows/deploy.yml

name: Deploy to GitHub Pages

on:
  push:
    branches: ['master']
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3
      - name: Setup Node
        uses: actions/setup-node@v3
        with:
          node-version: '16'
      - name: Setup Pages
        id: pages
        uses: actions/configure-pages@v1
      - name: Install dependencies
        run: yarn
      - name: Generate static page
        run: NUXT_APP_CDN_URL=https://<user-name>.github.io/<repository-name>/ yarn generate
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v1
        with:
          path: ./.output/public

  deploy:
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1

さいごに

以下の記事を参考にさせていただきました。感謝！

VueUse
Nuxt3 + GitHub Pages でﾎｰﾑﾍﾟｰｼﾞ兼ﾌﾞﾛｸﾞを作成してみた
 Nuxt3・MicroCMS・Github Pagesを利用してJamStackなWebアプリケーションを作成する

VueUseでOSのテーマを取得する