support night mode when using share by URL

dittos · Jan 19, 2020 · aa56bca · aa56bca
1 parent 303f8fb
commit aa56bca
Show file tree

Hide file tree

Showing 10 changed files with 388 additions and 202 deletions.
diff --git a/classes/handler/public.php b/classes/handler/public.php
@@ -366,7 +366,18 @@ private function format_article($id, $owner_uid) {
                     <html><head>
                     <meta http-equiv='Content-Type' content='text/html; charset=utf-8'/>
                     <title>".$line["title"]."</title>".
-                    stylesheet_tag("css/default.css")."
+					javascript_tag("lib/prototype.js").
+					javascript_tag("js/utility.js")."
+					<style type='text/css'>
+                    @media (prefers-color-scheme: dark) {
+						body {
+							background : #222;
+						}
+					}
+                    body.css_loading * {
+						display : none;
+					}                   
+					</style>
                     <link rel='shortcut icon' type='image/png' href='images/favicon.png'>
                     <link rel='icon' type='image/png' sizes='72x72' href='images/favicon-72px.png'>";
 
@@ -389,7 +400,7 @@ private function format_article($id, $owner_uid) {
                 $rv .= "<meta property='og:image' content=\"" . htmlspecialchars($og_image) . "\"/>";
             }
 
-            $rv .= "<body class='flat ttrss_utility ttrss_zoom'>";
+            $rv .= "<body class='flat ttrss_utility ttrss_zoom css_loading'>";
             $rv .= "<div class='container'>";
 
 			if ($line["link"]) {

diff --git a/css/default.css b/css/default.css
diff --git a/css/utility.less b/css/utility.less
@@ -10,8 +10,8 @@ body.ttrss_utility {
 	margin : 4em;
 
 	.content {
-		background : white;
-		border : 1px solid #ddd;
+		background : @default-bg;
+		border : 1px solid @border-default;
 		padding : 20px;
 		box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 

diff --git a/css/zoom.less b/css/zoom.less
@@ -3,8 +3,8 @@ body.ttrss_zoom {
 	margin : 2em auto;
 
 	div.post {
-		border : 1px solid #ddd;
-		background : white;
+		border : 1px solid @border-default;
+		background : @default-bg;
 		box-shadow : 0px 1px 1px -1px rgba(0,0,0,0.1);
 
 		.attachments {
@@ -13,11 +13,11 @@ body.ttrss_zoom {
 
 		div.header {
 			padding-bottom : 10px;
-			border: 0px solid #eee;
+			border: 0px solid @border-default;
 			border-bottom-width: 1px;
-			background : white;
+			background : @default-bg;
 			font-size : 12px;
-			color : #555;
+			color : @default-text;
 
 			.row {
 				display : flex;
@@ -49,7 +49,7 @@ body.ttrss_zoom {
 				margin : 5px 0px 5px 0px;
 				color : @default-text;
 				padding-left : 10px;
-				border: 0px solid #ccc;
+				border: 0px solid @border-default;
 				border-left-width: 4px;
 			}
 

diff --git a/js/utility.js b/js/utility.js
@@ -0,0 +1,39 @@
+Event.observe(window, "load", function() {
+    const UtilityJS = {
+        apply_night_mode: function (is_night, link) {
+            console.log("night mode changed to", is_night);
+
+            if (link) {
+                const css_override = is_night ? "themes/night.css" : "css/default.css";
+
+                link.setAttribute("href", css_override + "?" + Date.now());
+            }
+        },
+        setup_night_mode: function() {
+            const mql = window.matchMedia('(prefers-color-scheme: dark)');
+
+            const link = new Element("link", {
+                rel: "stylesheet",
+                id: "theme_auto_css"
+            });
+
+            link.onload = function() {
+                document.querySelector("body").removeClassName("css_loading");
+            };
+
+            try {
+                mql.addEventListener("change", () => {
+                    UtilityJS.apply_night_mode(mql.matches, link);
+                });
+            } catch (e) {
+                console.warn("exception while trying to set MQL event listener");
+            }
+
+            document.querySelector("head").appendChild(link);
+
+            UtilityJS.apply_night_mode(mql.matches, link);
+        }
+    };
+
+    UtilityJS.setup_night_mode();
+});