前回のトップページに動きをつけます。具体的には下記を実施します。
ダークモードの実装
スマホ用、タブレット用、PC用の表示
ダークモードまずはダークモードです。まずは__app.tsxで以下のように手動でダークモードを設定してみます。
import { AppProps } from 'next/app';import Head from 'next/head';import { MantineProvider } from '@mantine/core';expor
ライティングスタイルの概要Mantineはemotionを使ったcss-in-js libraryで構築されています。ライブラリの競合などを避けるため、可能な限りcreateStylesを作ってスタイリングすることを推奨します。
createStylesは以下のように使います。
import type { NextPage } from 'next'import { createStyles } from '@mantine/core'const useStyles = c