Add color themes.

5 files changed, 197 insertions, 0 deletions

diff --git a/public/themes/gray.css b/public/themes/gray.css
new file mode 100644
index 0000000..1382d81
--- /dev/null
+++ b/public/themes/gray.css
@@ -0,0 +1,46 @@
+/* light gray */
+:root {
+	--color-head: hsl(0, 0%, 85%);
+	--color-body: hsl(0, 0%, 95%);
+	--color-text: hsl(0, 0%, 100%);
+
+	--color-post-head: hsl(0, 0%, 85%);
+	--color-post-body: hsl(0, 0%, 98%);
+
+	--color-table-head: hsl(0, 0%, 85%);
+	--color-table-foot: hsl(0, 0%, 90%);
+	--color-table-body: hsl(0, 0%, 98%);
+	--color-table-stripe: hsl(0, 0%, 96%);
+
+	--color-focus: hsl(210, 40%, 65%);
+
+	--color-blue: hsl(240, 100%, 50%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 40%);
+}
+
+/* dark gray */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(0, 0%, 75%);
+	--color-body: hsl(0, 0%, 85%);
+	--color-text: hsl(0, 0%, 95%);
+
+	--color-post-head: hsl(0, 0%, 75%);
+	--color-post-body: hsl(0, 0%, 90%);
+
+	--color-table-head: hsl(0, 0%, 75%);
+	--color-table-foot: hsl(0, 0%, 80%);
+	--color-table-body: hsl(0, 0%, 90%);
+	--color-table-stripe: hsl(0, 0%, 88%);
+
+	--color-focus: hsl(210, 40%, 60%);
+
+	--color-blue: hsl(240, 100%, 40%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 35%);
+}}
diff --git a/public/themes/pink.css b/public/themes/pink.css
new file mode 100644
index 0000000..9f57650
--- /dev/null
+++ b/public/themes/pink.css
@@ -0,0 +1,35 @@
+/* light tan */
+:root {
+	--color-head: hsl(5, 35%, 85%);
+	--color-body: hsl(5, 35%, 95%);
+	--color-text: hsl(5, 35%, 100%);
+
+	--color-post-head: hsl(5, 35%, 85%);
+	--color-post-body: hsl(5, 35%, 98%);
+
+	--color-table-head: hsl(5, 35%, 85%);
+	--color-table-foot: hsl(5, 35%, 90%);
+	--color-table-body: hsl(5, 35%, 98%);
+	--color-table-stripe: hsl(5, 20%, 95%);
+
+	--color-accent: hsl(340, 60%, 40%);
+}
+
+/* dark tan */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(5, 35%, 75%);
+	--color-body: hsl(5, 35%, 85%);
+	--color-text: hsl(5, 35%, 95%);
+
+	--color-post-head: hsl(5, 35%, 75%);
+	--color-post-body: hsl(5, 35%, 90%);
+
+	--color-table-head: hsl(5, 35%, 75%);
+	--color-table-foot: hsl(5, 35%, 80%);
+	--color-table-body: hsl(5, 35%, 90%);
+	--color-table-stripe: hsl(5, 35%, 87%);
+
+	--color-accent: hsl(340, 60%, 35%);
+}}
+
diff --git a/public/themes/steel.css b/public/themes/steel.css
new file mode 100644
index 0000000..d491583
--- /dev/null
+++ b/public/themes/steel.css
@@ -0,0 +1,35 @@
+/* light tan */
+:root {
+	--color-head: hsl(220, 15%, 85%);
+	--color-body: hsl(220, 15%, 95%);
+	--color-text: hsl(220, 15%, 100%);
+
+	--color-post-head: hsl(220, 15%, 85%);
+	--color-post-body: hsl(220, 15%, 98%);
+
+	--color-table-head: hsl(220, 15%, 85%);
+	--color-table-foot: hsl(220, 15%, 90%);
+	--color-table-body: hsl(220, 15%, 98%);
+	--color-table-stripe: hsl(220, 20%, 95%);
+
+	--color-accent: hsl(340, 60%, 40%);
+}
+
+/* dark tan */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(220, 15%, 75%);
+	--color-body: hsl(220, 15%, 85%);
+	--color-text: hsl(220, 15%, 95%);
+
+	--color-post-head: hsl(220, 15%, 75%);
+	--color-post-body: hsl(220, 15%, 90%);
+
+	--color-table-head: hsl(220, 15%, 75%);
+	--color-table-foot: hsl(220, 15%, 80%);
+	--color-table-body: hsl(220, 15%, 90%);
+	--color-table-stripe: hsl(220, 15%, 87%);
+
+	--color-accent: hsl(340, 60%, 35%);
+}}
+
diff --git a/public/themes/tan.css b/public/themes/tan.css
new file mode 100644
index 0000000..6a06c49
--- /dev/null
+++ b/public/themes/tan.css
@@ -0,0 +1,35 @@
+/* light tan */
+:root {
+	--color-head: hsl(35, 15%, 85%);
+	--color-body: hsl(35, 15%, 95%);
+	--color-text: hsl(35, 15%, 100%);
+
+	--color-post-head: hsl(35, 15%, 85%);
+	--color-post-body: hsl(35, 15%, 98%);
+
+	--color-table-head: hsl(35, 15%, 85%);
+	--color-table-foot: hsl(35, 15%, 90%);
+	--color-table-body: hsl(35, 15%, 98%);
+	--color-table-stripe: hsl(35, 20%, 95%);
+
+	--color-accent: hsl(340, 60%, 40%);
+}
+
+/* dark tan */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(35, 15%, 75%);
+	--color-body: hsl(35, 15%, 85%);
+	--color-text: hsl(35, 15%, 95%);
+
+	--color-post-head: hsl(35, 15%, 75%);
+	--color-post-body: hsl(35, 15%, 90%);
+
+	--color-table-head: hsl(35, 15%, 75%);
+	--color-table-foot: hsl(35, 15%, 80%);
+	--color-table-body: hsl(35, 15%, 90%);
+	--color-table-stripe: hsl(35, 15%, 87%);
+
+	--color-accent: hsl(340, 60%, 35%);
+}}
+
diff --git a/public/themes/yellow.css b/public/themes/yellow.css
new file mode 100644
index 0000000..62a7603
--- /dev/null
+++ b/public/themes/yellow.css
@@ -0,0 +1,46 @@
+/* light yellow */
+:root {
+	--color-head: hsl(48, 50%, 85%);
+	--color-body: hsl(48, 50%, 95%);
+	--color-text: hsl(48, 50%, 100%);
+
+	--color-post-head: hsl(48, 50%, 85%);
+	--color-post-body: hsl(48, 50%, 98%);
+
+	--color-table-head: hsl(48, 50%, 85%);
+	--color-table-foot: hsl(48, 50%, 90%);
+	--color-table-body: hsl(48, 50%, 98%);
+	--color-table-stripe: hsl(48, 50%, 96%);
+
+	--color-focus: hsl(210, 40%, 65%);
+
+	--color-blue: hsl(240, 100%, 50%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 40%);
+}
+
+/* dark yellow */
+@media (prefers-color-scheme: dark) {
+:root {
+	--color-head: hsl(0, 0%, 75%);
+	--color-body: hsl(0, 0%, 85%);
+	--color-text: hsl(0, 0%, 95%);
+
+	--color-post-head: hsl(0, 0%, 75%);
+	--color-post-body: hsl(0, 0%, 90%);
+
+	--color-table-head: hsl(0, 0%, 75%);
+	--color-table-foot: hsl(0, 0%, 80%);
+	--color-table-body: hsl(0, 0%, 90%);
+	--color-table-stripe: hsl(0, 0%, 88%);
+
+	--color-focus: hsl(210, 40%, 60%);
+
+	--color-blue: hsl(240, 100%, 40%);
+	--color-red: hsl(0, 100%, 35%);
+	--color-green: hsl(120, 100%, 30%);
+
+	--color-accent: hsl(0, 60%, 35%);
+}}