iT邦幫忙

2021 iThome 鐵人賽

DAY 26
1
Modern Web

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

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

  • 分享至 

  • xImage
  •  

連假結束了Q 今天來講怎麼實作 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

小結

越來越多網站有提供 dark mode 了,尤其是這種部落格網站很需要長時間閱讀的,加了 dark mode 功能應該會讓使用者開心 (吧?XD) 而且用 Chakra UI 真的很方便~ 也使用了比較可愛的字體 (Poppins),現在剩下整個網站的樣式設計。設計好難Q

大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。

祝大家上班上課愉快!

晚安 <3

看更多


上一篇
#25 No-code 之旅 — 實作 Notion 部落格 Pagination (分頁) 功能 ft. SWR
下一篇
#27 No-code 之旅 — 客製化 Favicon ~
系列文
製作你的無程式碼(No-code)個人網頁 ft. Next.js, SWR, 串 Youtube, IG, Github, Notion API ~30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言