diff --git a/assets/icon-dark.svg b/assets/icon-dark.svg
new file mode 100644
index 0000000..7c5c81f
--- /dev/null
+++ b/assets/icon-dark.svg
@@ -0,0 +1,10 @@
+
diff --git a/assets/icon-light.svg b/assets/icon-light.svg
new file mode 100644
index 0000000..83096d0
--- /dev/null
+++ b/assets/icon-light.svg
@@ -0,0 +1,10 @@
+
diff --git a/assets/logo-dark.svg b/assets/logo-dark.svg
index 471c47d..18f5493 100644
--- a/assets/logo-dark.svg
+++ b/assets/logo-dark.svg
@@ -7,6 +7,6 @@
}
- dgray
+ dgray
diff --git a/assets/logo-light.svg b/assets/logo-light.svg
index 7d61531..d0b35f1 100644
--- a/assets/logo-light.svg
+++ b/assets/logo-light.svg
@@ -7,6 +7,6 @@
}
- dgray
+ dgray
diff --git a/css/variables.css b/css/variables.css
index 60328da..89008b6 100644
--- a/css/variables.css
+++ b/css/variables.css
@@ -1,7 +1,7 @@
:root {
/*
* Monochrome Theme - dgray.io
- * Pure grayscale, no colors
+ * Pure grayscale with neon green accent
*/
/* Colors - Light Mode */
@@ -12,8 +12,8 @@
--color-secondary: #777777;
--color-secondary-hover: #5A5A5A;
- --color-accent: #333333;
- --color-accent-hover: #1A1A1A;
+ --color-accent: #059669;
+ --color-accent-hover: #047857;
--color-success: #666666;
--color-warning: #888888;
@@ -103,8 +103,8 @@
--color-secondary: #909090;
--color-secondary-hover: #A5A5A5;
- --color-accent: #CCCCCC;
- --color-accent-hover: #E0E0E0;
+ --color-accent: #10B981;
+ --color-accent-hover: #34D399;
--color-success: #999999;
--color-warning: #AAAAAA;
@@ -135,8 +135,8 @@
--color-secondary: #909090;
--color-secondary-hover: #A5A5A5;
- --color-accent: #CCCCCC;
- --color-accent-hover: #E0E0E0;
+ --color-accent: #10B981;
+ --color-accent-hover: #34D399;
--color-success: #999999;
--color-warning: #AAAAAA;
@@ -166,8 +166,8 @@
--color-secondary: #777777;
--color-secondary-hover: #5A5A5A;
- --color-accent: #333333;
- --color-accent-hover: #1A1A1A;
+ --color-accent: #059669;
+ --color-accent-hover: #047857;
--color-success: #666666;
--color-warning: #888888;
diff --git a/index.html b/index.html
index a24a922..9e8dbfc 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,8 @@
dgray.io
-
+
+
diff --git a/js/components/listing-card.js b/js/components/listing-card.js
index 2024733..04644e0 100644
--- a/js/components/listing-card.js
+++ b/js/components/listing-card.js
@@ -213,13 +213,13 @@ style.textContent = /* css */`
}
listing-card .favorite-btn.active .heart-icon {
- fill: var(--color-error);
- stroke: var(--color-error);
- color: var(--color-error);
+ fill: var(--color-accent);
+ stroke: var(--color-accent);
+ color: var(--color-accent);
}
listing-card .favorite-btn:hover .heart-icon {
- color: var(--color-error);
+ color: var(--color-accent);
}
`;
document.head.appendChild(style);