Riebeckite
Menu
Color mode

最初の Theme を変える

Theme は色、タイポグラフィ、余白、レイアウトなど、Riebeckite サイトの見た目を決めます。このガイドでは minimal テーマに切り替えます。コンテンツファーストで清潔なデザインです。

機能を追加したい場合は 最初の Plugin を追加する を参照してください。

1. インストール

生成されたサイトのディレクトリで次のコマンドを実行してください。

sh
npm install @riebeckite/theme-minimal

2. インポート

riebeckite.config.ts を開き、先頭にインポートを追加してください。

ts
import { minimalTheme } from "@riebeckite/theme-minimal";

3. Theme を変更

config の theme 行で defaultTheme() を minimalTheme() に置き換えてください。

ts
theme: minimalTheme(),

4. Riebeckite を起動

開発サーバーを再起動して新しいテーマを確認してください。

sh
npm exec riebeckite dev

サイトを開くと、見た目が minimal テーマに変わっています。

5. 次のステップ

History

1 changesCollapseExpand
1 + # 最初の Theme を変える
2 +
3 + Theme は色、タイポグラフィ、余白、レイアウトなど、Riebeckite サイトの見た目を決めます。このガイドでは **minimal** テーマに切り替えます。コンテンツファーストで清潔なデザインです。
4 +
5 + > 機能を追加したい場合は [最初の Plugin を追加する](./first-plugin.ja.md) を参照してください。
6 +
7 + ---
8 +
9 + ## 1. インストール
10 +
11 + 生成されたサイトのディレクトリで次のコマンドを実行してください。
12 +
13 + ```sh
14 + npm install @riebeckite/theme-minimal
15 + ```
16 +
17 + ---
18 +
19 + ## 2. インポート
20 +
21 + `riebeckite.config.ts` を開き、先頭にインポートを追加してください。
22 +
23 + ```ts
24 + import { minimalTheme } from "@riebeckite/theme-minimal";
25 + ```
26 +
27 + ---
28 +
29 + ## 3. Theme を変更
30 +
31 + config の `theme` 行で `defaultTheme()` を `minimalTheme()` に置き換えてください。
32 +
33 + ```ts
34 + theme: minimalTheme(),
35 + ```
36 +
37 + ---
38 +
39 + ## 4. Riebeckite を起動
40 +
41 + 開発サーバーを再起動して新しいテーマを確認してください。
42 +
43 + ```sh
44 + npm exec riebeckite dev
45 + ```
46 +
47 + サイトを開くと、見た目が minimal テーマに変わっています。
48 +
49 + ---
50 +
51 + ## 5. 次のステップ
52 +
53 + - [Theme リファレンス](../themes/README.ja.md) で他のテーマを探す
54 + - 暗くカラフルな `@riebeckite/theme-tokyonight` を試す
55 + - 軽やかな `@riebeckite/theme-sakura` を試す
56 + - [自作 Theme の書き方](../themes/writing-a-theme.ja.md) を学ぶ