#26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2021 iThome 鐵人賽

DAY 26

Modern Web

製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ～系列第 26 篇

#26 No-code 之旅 — 實作 Dark Mode 和加入 Google Fonts ft. Chakra UI

13th鐵人賽 react nextjs chakraui google fonts

Jade

2021-10-11 23:42:40

1809 瀏覽

連假結束了Ｑ今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看！我們會用 Chakra UI 去實作 dark mode 功能，所以還不知道 Chakra UI 的大家可以看這兩篇簡介文和客製化篇。

Fonts

Font Optimization

Next.js 有提供內建的字體效能優化，不過目前只支援 Google Fonts 和 Typekit，當然還是可以用其他的字體庫，只是不會被優化喔～ Next.js 在 build 過程中會自動把字體的 <link> 轉成 inline font CSS。這麼做會減少 First Contentful Paint (FCP) 和 Largest Contentful Paint (LCP) 的時間，讓使用者可以比較快看到網頁。

<!-- 前 -->
<link
  href="https://fonts.googleapis.com/css2?family=Poppins"
  rel="stylesheet"
/>

<!-- 後 -->
<style data-href="https://fonts.googleapis.com/css2?family=Poppins">
  @font-face{font-family:'Poppins';font-style:normal...
</style>

加入 Google Fonts

那怎麼把 Google Fonts 加入到專案裡呢？有兩種方式，第一是如果字體只會用在單一頁面，那可以放在該 page 的 <Head> 裡：

<!-- pages/index.js -->
<Head>
  <link
    href="https://fonts.googleapis.com/css2?family=Poppins&display=optional"
    rel="stylesheet"
  />
</Head>

可是如果想要在整個專案裡用字體，可以加在我們做的 Custom Document：

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Poppins&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

不想要用字體優化的話，可以在 next.config.js 裡設定喔：

module.exports = {
  optimizeFonts: false,
}

使用 Google Fonts

把字體加入到專案之後，該怎麼使用呢？因為這專案採用 Chakra UI，所以我們可以延伸 Chakra UI 的 theme：

// config/theme.js
import { extendTheme } from "@chakra-ui/react";

// 延伸 Chakra UI 的 global styles
const styles = {
  global: {
    body: {
      // 設定整個 body 的 fontFamily
      fontFamily: "'Poppins', sans-serif",
    },
  },
};

const theme = extendTheme({ styles });

export default theme;

那現在我們要把新的 theme 塞給 ChakraProvider，讓所有 components 可以吃到最新的 custom global styles：

import { ChakraProvider } from "@chakra-ui/react"
import theme from "config/theme"

function MyApp({ Component, pageProps }) {
  return (
    // 提供 custom theme 給 ChakraProvider
    <ChakraProvider theme={theme}>
      <Component {...pageProps} />
    </ChakraProvider>
  )
}

export default MyApp

Dark Mode

在之前的客製化篇提過怎麼使用 Chakra UI 的 color mode，今天快速複習一下，在 config/theme.js 加：

// config/theme.js
import { extendTheme } from "@chakra-ui/react";

const styles = {...};

const config = {
  initialColorMode: "light", // 設定預設的模式
  useSystemColorMode: false, // 要不要跟著使用者系統的 color mode
}

// 把 config 加進 theme 裡
const theme = extendTheme({ config, styles });

export default theme;

然後我們要加 ColorModeScript 到 Next.js 的 custom document (pages/_document.js) 裡：

// pages/_document.js

import { ColorModeScript } from "@chakra-ui/react"
import NextDocument, { Html, Head, Main, NextScript } from "next/document"
import theme from "./theme"

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head>...字體！...</Head>
        <body>
          // body 裡的第一個～
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

最後我們要加一個按鈕讓使用者切換模式，我們可以使用 Chakra UI 提供的其中一個 hook，useColorMode：

import { Button } from "@chakra-ui/button";
import { useColorMode } from "@chakra-ui/color-mode";
import { Container } from "@chakra-ui/layout";
import React from "react";

function AppFrame({ children }) {
  // 使用 Chakra UI 提供的 useColorMode
  // colorMode：現在的模式
  // toggleColorMode：切換模式的 function
  const { colorMode, toggleColorMode } = useColorMode();

  return (
    <Container p="6">
      <Button mb="4" onClick={toggleColorMode}>
        Toggle {colorMode === "light" ? "Dark" : "Light"}
      </Button>
      {children} // 網頁內容～
    </Container>
  );
}
export default AppFrame;

耶～做完了，可以看下面的圖！

Dark mode