mirror of
https://github.com/ChenQihan666/MyBlog-Next.git
synced 2026-08-14 11:29:33 +08:00
Post an article about predefined color schemes
This commit is contained in:
@@ -0,0 +1,101 @@
|
|||||||
|
---
|
||||||
|
author: Sat Naing
|
||||||
|
datetime: 2022-09-26T12:13:24Z
|
||||||
|
title: Predefined color schemes
|
||||||
|
slug: predefined-color-schemes
|
||||||
|
featured: false
|
||||||
|
draft: false
|
||||||
|
tags:
|
||||||
|
- color-schemes
|
||||||
|
ogImage: ""
|
||||||
|
description:
|
||||||
|
Some of the well-crafted, predefined color schemes for AstroPaper blog
|
||||||
|
theme.
|
||||||
|
---
|
||||||
|
|
||||||
|
I've crafted some predefined color schemes for this AstroPaper blog theme. You can replace these color schemes with the original ones.
|
||||||
|
|
||||||
|
## Table of contents
|
||||||
|
|
||||||
|
## Light color schemes
|
||||||
|
|
||||||
|
Light color scheme has to be defined as `:root`.
|
||||||
|
|
||||||
|
### Lobster
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--color-fill: 246, 238, 225;
|
||||||
|
--color-text-base: 1, 44, 86;
|
||||||
|
--color-accent: 225, 74, 57;
|
||||||
|
--color-card: 217, 209, 195;
|
||||||
|
--color-card-muted: 239, 216, 176;
|
||||||
|
--color-border: 220, 152, 145;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Leaf Blue
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--color-fill: 242, 245, 236;
|
||||||
|
--color-text-base: 53, 53, 56;
|
||||||
|
--color-accent: 17, 88, 209;
|
||||||
|
--color-card: 206, 213, 180;
|
||||||
|
--color-card-muted: 187, 199, 137;
|
||||||
|
--color-border: 124, 173, 255;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Pinky light
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--color-fill: 250, 252, 252;
|
||||||
|
--color-text-base: 34, 46, 54;
|
||||||
|
--color-accent: 211, 0, 106;
|
||||||
|
--color-card: 234, 206, 219;
|
||||||
|
--color-card-muted: 241, 186, 212;
|
||||||
|
--color-border: 227, 169, 198;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## Dark color schemes
|
||||||
|
|
||||||
|
Light color scheme has to be defined as `.theme-dark`.
|
||||||
|
|
||||||
|
### Deep Oyster
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
```css
|
||||||
|
.theme-dark {
|
||||||
|
--color-fill: 33, 35, 61;
|
||||||
|
--color-text-base: 244, 247, 245;
|
||||||
|
--color-accent: 255, 82, 86;
|
||||||
|
--color-card: 57, 60, 102;
|
||||||
|
--color-card-muted: 74, 78, 134;
|
||||||
|
--color-border: 177, 47, 50;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
### Pikky dark
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
```css
|
||||||
|
.theme-dark {
|
||||||
|
--color-fill: 53, 54, 64;
|
||||||
|
--color-text-base: 233, 237, 241;
|
||||||
|
--color-accent: 255, 120, 200;
|
||||||
|
--color-card: 75, 76, 89;
|
||||||
|
--color-card-muted: 113, 85, 102;
|
||||||
|
--color-border: 134, 67, 107;
|
||||||
|
}
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user