refactor: move blog posts under content directory

2026-08-14 11:29:33 +08:00 · 2023-01-28 00:29:15 +06:30
parent d815b5b9b2
commit 041f5412f8
10 changed files with 46 additions and 28 deletions
@@ -0,0 +1,108 @@
+---
+author: Sat Naing
+pubDatetime: 2022-09-26T12:13:24Z
+title: Predefined color schemes
+postSlug: predefined-color-schemes
+featured: false
+draft: false
+tags:
+  - color-schemes
+ogImage:
+  src: ""
+  alt: ""
+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.
+
+If you don't know how you can configure color schemes, check [this blog post](https://astro-paper.pages.dev/posts/customizing-astropaper-theme-color-schemes/).
+
+## Table of contents
+
+## Light color schemes
+
+Light color scheme has to be defined using the css selector `:root` and `html[data-theme="light"]`.
+
+### Lobster
+
+![lobster-color-scheme](https://user-images.githubusercontent.com/53733092/192282447-1d222faf-a3ce-44a9-9cfe-ac873155e5a9.png)
+
+```css
+:root,
+html[data-theme="light"] {
+  --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,
+html[data-theme="light"] {
+  --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,
+html[data-theme="light"] {
+  --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 `html[data-theme="dark"]`.
+
+### Deep Oyster
+
+![deep-oyster-color-scheme](https://user-images.githubusercontent.com/53733092/192314524-45ec5904-3d8f-450a-9edf-1e32c5e11d6c.png)
+
+```css
+html[data-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
+html[data-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;
+}
+```