From 8f076aaf897db4ba1fcd525caee50a13cb02ae4b Mon Sep 17 00:00:00 2001 From: QihanNX Date: Sat, 13 Jun 2026 15:35:08 +0800 Subject: [PATCH] Delete src/content/posts/customizing-astropaper-theme-color-schemes.mdx --- ...omizing-astropaper-theme-color-schemes.mdx | 103 ------------------ 1 file changed, 103 deletions(-) delete mode 100644 src/content/posts/customizing-astropaper-theme-color-schemes.mdx diff --git a/src/content/posts/customizing-astropaper-theme-color-schemes.mdx b/src/content/posts/customizing-astropaper-theme-color-schemes.mdx deleted file mode 100644 index 9ff2de4..0000000 --- a/src/content/posts/customizing-astropaper-theme-color-schemes.mdx +++ /dev/null @@ -1,103 +0,0 @@ ---- -author: Sat Naing -pubDatetime: 2022-09-25T15:20:35Z -modDatetime: 2026-05-17T04:57:06.476Z -title: Customizing AstroPaper theme color schemes -featured: false -draft: false -tags: - - color-schemes - - docs -description: - How you can enable/disable light & dark mode; and customize color schemes - of AstroPaper theme. ---- -import ResponsiveTable from '@/components/ResponsiveTable.astro'; - -This guide covers how to enable or disable light and dark mode, and how to customize the color scheme for the entire site. - -## Table of contents - -## Enable/disable light & dark mode - -AstroPaper theme includes light and dark mode by default. This default behavior can be disabled in `astro-paper.config.ts`: - -```ts file="astro-paper.config.ts" -export default defineAstroPaperConfig({ - // ... - features: { - lightAndDarkMode: true, // [!code highlight] - // ... - }, -}); -``` - -To disable `light & dark mode`, set `features.lightAndDarkMode` to `false`. When disabled, the site will use only the light color scheme defined in `src/styles/theme.css`. - -## Customize color schemes - -Both light and dark color schemes of AstroPaper theme are defined in `src/styles/theme.css`. - -```css file="src/styles/theme.css" -/* Light theme values */ -:root, -[data-theme="light"] { - --background: #fdfdfd; - --foreground: #282728; - --accent: #006cac; - --accent-foreground: #ffffff; - --muted: #e6e6e6; - --muted-foreground: #6b7280; - --border: #ece9e9; -} - -/* Dark theme values */ -[data-theme="dark"] { - --background: #212737; - --foreground: #eaedf3; - --accent: #ff6b01; - --accent-foreground: #ffffff; - --muted: #343f60; - --muted-foreground: #afb9ca; - --border: #ab4b08; -} -``` - -The `:root` and `[data-theme="light"]` selectors define the light color scheme, while `[data-theme="dark"]` defines the dark color scheme. - -To customize your own color scheme, specify your light colors inside `:root, [data-theme="light"]`, and your dark colors inside `[data-theme="dark"]`. - -Here is a detailed explanation of each color property: - - - -| Color Property | Definition & Usage | -| --------------------- | --------------------------------------------------------------------- | -| `--background` | Primary color of the website. Usually the main background. | -| `--foreground` | Secondary color of the website. Usually the text color. | -| `--accent` | Accent color. Used for links, hover states, and interactive elements. | -| `--accent-foreground` | Foreground color displayed on top of `--accent` backgrounds. | -| `--muted` | Muted background color. Used for cards, tags, and hover states. | -| `--muted-foreground` | Text color displayed on top of `--muted` backgrounds. | -| `--border` | Border color. Used for dividers and visual separation. | - - - -Here is an example of changing the light color scheme: - -```css file="src/styles/theme.css" -/* ... */ -:root, -[data-theme="light"] { - --background: #f6eee1; - --foreground: #012c56; - --accent: #e14a39; - --accent-foreground: #ffffff; - --muted: #efd8b0; - --muted-foreground: #6b7280; - --border: #dc9891; -} -/* ... */ -``` - -> Check out some [predefined color schemes](https://astro-paper.pages.dev/posts/predefined-color-schemes/) AstroPaper has already crafted for you.