Post an article about predefined color schemes

This commit is contained in:
Sat Naing
2022-09-26 22:06:10 +06:30
parent 1fd1b9111b
commit 069486b0da
+101
View File
@@ -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
![lobster-color-scheme](https://user-images.githubusercontent.com/53733092/192282447-1d222faf-a3ce-44a9-9cfe-ac873155e5a9.png)
```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
![leaf-blue-color-scheme](https://user-images.githubusercontent.com/53733092/192318782-e80e3c39-54b5-423e-8f4b-9ae60402fc8d.png)
```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
![pinky-color-scheme](https://user-images.githubusercontent.com/53733092/192286510-892d0042-2d6d-471e-bb72-954221ae2d17.png)
```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
![deep-oyster-color-scheme](https://user-images.githubusercontent.com/53733092/192314524-45ec5904-3d8f-450a-9edf-1e32c5e11d6c.png)
```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
![pinky-dark-color-scheme](https://user-images.githubusercontent.com/53733092/192307050-fbd55326-911c-4001-87c6-a8ad9378ac2e.png)
```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;
}
```