連假結束了Q 今天來講怎麼實作 dark mode 還有怎麼使用 Google Fonts 讓網站看起來更好看!我們會用 Chakra UI 去實作 dark mode 功能,所以還不知道 Chakra UI 的大家可以看這兩篇簡介文和客製化篇。
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 加入到專案裡呢?有兩種方式,第一是如果字體只會用在單一頁面,那可以放在該 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,
}
把字體加入到專案之後,該怎麼使用呢?因為這專案採用 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
在之前的客製化篇提過怎麼使用 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 功能應該會讓使用者開心 (吧?XD) 而且用 Chakra UI 真的很方便~ 也使用了比較可愛的字體 (Poppins
),現在剩下整個網站的樣式設計。設計好難Q
大家想要看看之前的網站可以看這裡,或是直接到首頁~ 有任何問題可以問我,或是也可以討論未來要開發的 No-code 專案喔。
祝大家上班上課愉快!
晚安 <3