Improved: Dark mode of Origine (#5229)

* fix

* fix button

2 files changed, 50 insertions, 20 deletions

diff --git a/p/themes/Origine/origine.css b/p/themes/Origine/origine.css
index b2bcb668e..0893c7a2c 100644
--- a/p/themes/Origine/origine.css
+++ b/p/themes/Origine/origine.css
@@ -5,7 +5,8 @@
 :root {
 	--frss-padding-top-bottom: 0.5rem;
 
-	--background-color-light-gradient: #eee;
+	--background-color-light-gradient1: #fff;
+	--background-color-light-gradient2: #eee;
 	--background-color-light: #fff;
 	--background-color-light-shadowed: #f6f6f6;
 	--background-color-grey: #f0f0f0;
@@ -260,7 +261,7 @@ form th {
 .btn {
 	margin: 0;
 	padding: 5px 10px;
-	background-image: linear-gradient(to bottom, var(--background-color-light) 0%, var(--background-color-light-gradient) 100%);
+	background-image: linear-gradient(to bottom, var(--background-color-light-gradient1) 0%, var(--background-color-light-gradient2) 100%);
 	display: inline-block;
 	color: var(--font-color-grey);
 	font-size: 0.9rem;
@@ -1187,12 +1188,14 @@ a.btn-attention:hover {
 		--frss-background-color-transparent: #000000a3;
 		--frss-scrollbar-handle: #fff1;
 		--frss-scrollbar-handle-hover: #fff4;
+		--frss-font-color-grey-light: #555;
 
-		--background-color-light-gradient: #111;
+		--background-color-light-gradient1: #1c1c1c;
+		--background-color-light-gradient2: #111;
 		--background-color-light: #111;
 		--background-color-light-shadowed: #191919;
 		--background-color-grey: #1f1f1f;
-		--background-color-hover: #09090977;
+		--background-color-hover: #222;
 
 		--unread-article-background-color: #201f1e;
 		--unread-article-background-color-hover: #1a1918;
@@ -1245,7 +1248,7 @@ a.btn-attention:hover {
 
 		--text-shadow-color: #1c1c1c;
 		--text-shadow-color-dark: #666;
-		--box-shadow-color: #4446;
+		--box-shadow-color: #0009;
 		--box-shadow-color-inset: #1f1f1f;
 
 		--font-color-link: #467eb3;
@@ -1255,16 +1258,28 @@ a.btn-attention:hover {
 		--border-color-shadow-side: #333;
 		--contrast-border-color-active: #0062be;
 
-		--form-element-font-color-focus: #879db1;
+		--form-element-font-color-focus: #b8d0e7;
 		--form-element-border-color-focus: #0062be;
 		--form-element-focus-box-shadow-color-inset: #110;
 		--form-element-border-color-invalid: #f00;
-		--form-element-invalid-box-shadow-color-inset: #fdd;
+		--form-element-invalid-box-shadow-color-inset: none;
 	}
 
-	.btn.active,
-	.btn:active,
-	.dropdown-target:target ~ .btn.dropdown-toggle {
+	:root .darkMode_auto .btn {
+		color: #777;
+	}
+
+	:root .darkMode_auto .btn:hover {
+		color: var(--font-color-grey);
+	}
+
+	:root .darkMode_auto .btn.active,
+	:root .darkMode_auto .btn:active,
+	:root .darkMode_auto .dropdown-target:target ~ .btn.dropdown-toggle {
 		background: var(--border-color);
 	}
+
+	:root .darkMode_auto .dropdown-menu {
+		background-color: #0a0a0a;
+	}
 }
diff --git a/p/themes/Origine/origine.rtl.css b/p/themes/Origine/origine.rtl.css
index b297228de..cb6d5e137 100644
--- a/p/themes/Origine/origine.rtl.css
+++ b/p/themes/Origine/origine.rtl.css
@@ -5,7 +5,8 @@
 :root {
 	--frss-padding-top-bottom: 0.5rem;
 
-	--background-color-light-gradient: #eee;
+	--background-color-light-gradient1: #fff;
+	--background-color-light-gradient2: #eee;
 	--background-color-light: #fff;
 	--background-color-light-shadowed: #f6f6f6;
 	--background-color-grey: #f0f0f0;
@@ -260,7 +261,7 @@ form th {
 .btn {
 	margin: 0;
 	padding: 5px 10px;
-	background-image: linear-gradient(to bottom, var(--background-color-light) 0%, var(--background-color-light-gradient) 100%);
+	background-image: linear-gradient(to bottom, var(--background-color-light-gradient1) 0%, var(--background-color-light-gradient2) 100%);
 	display: inline-block;
 	color: var(--font-color-grey);
 	font-size: 0.9rem;
@@ -1187,12 +1188,14 @@ a.btn-attention:hover {
 		--frss-background-color-transparent: #000000a3;
 		--frss-scrollbar-handle: #fff1;
 		--frss-scrollbar-handle-hover: #fff4;
+		--frss-font-color-grey-light: #555;
 
-		--background-color-light-gradient: #111;
+		--background-color-light-gradient1: #1c1c1c;
+		--background-color-light-gradient2: #111;
 		--background-color-light: #111;
 		--background-color-light-shadowed: #191919;
 		--background-color-grey: #1f1f1f;
-		--background-color-hover: #09090977;
+		--background-color-hover: #222;
 
 		--unread-article-background-color: #201f1e;
 		--unread-article-background-color-hover: #1a1918;
@@ -1245,7 +1248,7 @@ a.btn-attention:hover {
 
 		--text-shadow-color: #1c1c1c;
 		--text-shadow-color-dark: #666;
-		--box-shadow-color: #4446;
+		--box-shadow-color: #0009;
 		--box-shadow-color-inset: #1f1f1f;
 
 		--font-color-link: #467eb3;
@@ -1255,16 +1258,28 @@ a.btn-attention:hover {
 		--border-color-shadow-side: #333;
 		--contrast-border-color-active: #0062be;
 
-		--form-element-font-color-focus: #879db1;
+		--form-element-font-color-focus: #b8d0e7;
 		--form-element-border-color-focus: #0062be;
 		--form-element-focus-box-shadow-color-inset: #110;
 		--form-element-border-color-invalid: #f00;
-		--form-element-invalid-box-shadow-color-inset: #fdd;
+		--form-element-invalid-box-shadow-color-inset: none;
 	}
 
-	.btn.active,
-	.btn:active,
-	.dropdown-target:target ~ .btn.dropdown-toggle {
+	:root .darkMode_auto .btn {
+		color: #777;
+	}
+
+	:root .darkMode_auto .btn:hover {
+		color: var(--font-color-grey);
+	}
+
+	:root .darkMode_auto .btn.active,
+	:root .darkMode_auto .btn:active,
+	:root .darkMode_auto .dropdown-target:target ~ .btn.dropdown-toggle {
 		background: var(--border-color);
 	}
+
+	:root .darkMode_auto .dropdown-menu {
+		background-color: #0a0a0a;
+	}
 }