이 AstroPaper 블로그 테마를 위해 미리 정의된 색상 테마를 몇 가지 제작했습니다. 기존 색상 테마를 이 색상 테마들로 교체할 수 있습니다.
색상 테마를 구성하는 방법을 모르시는 분은 이 블로그 포스트를 참고하세요.
목차
라이트 색상 테마
라이트 색상 테마는 CSS 선택자 :root와 html[data-theme="light"]를 사용하여 정의해야 합니다.
Lobster

:root,
html[data-theme="light"] {
--background: #f6eee1;
--foreground: #012c56;
--accent: #e14a39;
--muted: #efd8b0;
--border: #dc9891;
}
Leaf Blue

:root,
html[data-theme="light"] {
--background: #f2f5ec;
--foreground: #353538;
--accent: #1158d1;
--muted: #bbc789;
--border: #7cadff;
}
Pinky light

:root,
html[data-theme="light"] {
--background: #fafcfc;
--foreground: #222e36;
--accent: #d3006a;
--muted: #f1bad4;
--border: #e3a9c6;
}
다크 색상 테마
다크 색상 테마는 html[data-theme="dark"]로 정의해야 합니다.
AstroPaper 1 기본 다크 테마

html[data-theme="dark"] {
--background: #2f3741;
--foreground: #e6e6e6;
--accent: #1ad9d9;
--muted: #596b81;
--border: #3b4655;
}
Deep Oyster

html[data-theme="dark"] {
--background: #21233d;
--foreground: #f4f7f5;
--accent: #ff5256;
--muted: #4a4e86;
--border: #b12f32;
}
Pikky dark

html[data-theme="dark"] {
--background: #353640;
--foreground: #e9edf1;
--accent: #ff78c8;
--muted: #715566;
--border: #86436b;
}
Astro dark (고대비)

html[data-theme="dark"] {
--background: #212737;
--foreground: #eaedf3;
--accent: #ff6b01;
--muted: #8a3302;
--border: #ab4b08;
}
Astro dark (AstroPaper 2의 새로운 기본 다크 테마)

html[data-theme="dark"] {
--background: #212737; /* lower contrast background */
--foreground: #eaedf3;
--accent: #ff6b01;
--muted: #8a3302;
--border: #ab4b08;
}
Astro Deep Purple (AstroPaper 3의 새로운 다크 테마)

html[data-theme="dark"] {
--background: #212737;
--foreground: #eaedf3;
--accent: #eb3fd3;
--muted: #7d4f7c;
--border: #642451;
}
AstroPaper v4 Special (AstroPaper 4의 새로운 다크 테마)

html[data-theme="dark"] {
--background: #000123;
--accent: #617bff;
--foreground: #eaedf3;
--muted: #0c0e4f;
--border: #303f8a;
}