Bug 532185: [Dark Theme] Help content does not respect styling

When the help content is displayed in the external browser the system
preferences about system wide dark or light appearance should be
respected.

There's a CSS standard coming for this: the prefers-color-scheme
media query (see
https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme ).

The CSS of the help content should incorporate this media
query.

Change-Id: If285533ce386041d2e173cad1aafb99f9a46567e
Signed-off-by: Matthias Becker <ma.becker@sap.com>

10 files changed, 84 insertions, 5 deletions

diff --git a/org.eclipse.help.base/doc/book.css b/org.eclipse.help.base/doc/book.css
index 11e16f8ca..5838ae745 100644
--- a/org.eclipse.help.base/doc/book.css
+++ b/org.eclipse.help.base/doc/book.css
@@ -40,3 +40,13 @@ body, h1, h2, h3, h4, h5, h6, p, table, td, caption, th, ul, ol, dl, li, dd, dt
 body	     { font-size: 83%; background: #FFFFFF; margin-bottom: 1em }
 h1           { font-size: 140%; margin-top: 25px; margin-bottom: 3px }	
 h2           { font-size: 110%; margin-top: 20px; margin-bottom: 3px }
+
+@media (prefers-color-scheme: dark) {
+	body { 
+		color: #f0f0f0; 
+		background: #3d3d3d;
+	} 
+	body, h1, h2, h3, h4, h5, h6, p, table, td, caption, th, ul, ol, dl, li, dd, dt {
+		color: #f0f0f0;
+	}
+}
\ No newline at end of file
diff --git a/org.eclipse.help.base/doc/darkTheme.css b/org.eclipse.help.base/doc/darkTheme.css
new file mode 100644
index 000000000..38dfc4528
--- /dev/null
+++ b/org.eclipse.help.base/doc/darkTheme.css
@@ -0,0 +1,17 @@
+@media (prefers-color-scheme: dark) {
+	body { 
+		color: #f0f0f0; 
+		background: #3d3d3d;
+	} 
+	a {
+		color:#ffffff;
+	}
+	a.active{ 
+		color:#ffffff;
+	}
+	
+	a.nolink:link, 
+	a.nolink:visited {
+		color:#ffffff;
+	}
+}
\ No newline at end of file
diff --git a/org.eclipse.help.webapp/advanced/darkTheme.css b/org.eclipse.help.webapp/advanced/darkTheme.css
new file mode 100644
index 000000000..5d70287bc
--- /dev/null
+++ b/org.eclipse.help.webapp/advanced/darkTheme.css
@@ -0,0 +1,47 @@
+@media (prefers-color-scheme: dark) {
+	body { 
+		color: #f0f0f0; 
+		background: #3d3d3d;
+	}
+
+	#titleText,
+	#searchLabel,
+	#scopeLabel,
+	#scope,
+	a,
+	a.active
+	a.nolink:link, 
+	a.nolink:visited {
+		color:#ffffff;
+	}
+
+	.button a:hover, .buttonMenu a:hover { 
+		border-top:1px solid #3d3d3d; 
+		border-<%=isRTL?"right":"left"%>:1px solid #3d3d3d; 
+		border-<%=isRTL?"left":"right"%>:1px solid #3d3d3d; 
+		border-bottom:1px solid #3d3d3d;
+	}
+
+	table {
+		background:#3d3d3d;
+	}
+	.tab {
+		background:#7b7c7b
+	}
+
+	form {
+		background:#3d3d3d;
+	}
+	
+	.separator {
+
+	}
+	
+	input{
+		background:#a0a0a0;
+	}
+
+	.button a, .buttonMenu a { 
+		border:1px solid #3d3d3d;;
+	}
+}
\ No newline at end of file
diff --git a/org.eclipse.help.webapp/advanced/indexView.css b/org.eclipse.help.webapp/advanced/indexView.css
index 735bb2c5b..c7eea76dd 100644
--- a/org.eclipse.help.webapp/advanced/indexView.css
+++ b/org.eclipse.help.webapp/advanced/indexView.css
@@ -222,5 +222,4 @@ A.nolink:hover {
 	cursor:pointer;
 }
 
-
-
+<%@ include file="darkTheme.css"%>
diff --git a/org.eclipse.help.webapp/advanced/list.css b/org.eclipse.help.webapp/advanced/list.css
index 330b1d2f3..a80e0cdda 100644
--- a/org.eclipse.help.webapp/advanced/list.css
+++ b/org.eclipse.help.webapp/advanced/list.css
@@ -92,4 +92,4 @@ TABLE {
 	padding-<%=isRTL?"left":"right"%>:5px;
 }
 
- 
\ No newline at end of file
+<%@ include file="darkTheme.css"%>
\ No newline at end of file
diff --git a/org.eclipse.help.webapp/advanced/searchList.css b/org.eclipse.help.webapp/advanced/searchList.css
index 4174a9b80..20e348c0d 100644
--- a/org.eclipse.help.webapp/advanced/searchList.css
+++ b/org.eclipse.help.webapp/advanced/searchList.css
@@ -95,3 +95,5 @@ a:hover {
 .description {
 	display: <%=data.isShowDescriptions() ? "block" : "none"%>;
 }
+
+<%@ include file="darkTheme.css"%>
diff --git a/org.eclipse.help.webapp/advanced/searchScoped.jsp b/org.eclipse.help.webapp/advanced/searchScoped.jsp
index 4586e73fe..aa50b02f0 100644
--- a/org.eclipse.help.webapp/advanced/searchScoped.jsp
+++ b/org.eclipse.help.webapp/advanced/searchScoped.jsp
@@ -43,8 +43,8 @@ BODY {
 }
 
 TABLE {
-	font: <%=prefs.getToolbarFont()%>;
 	background:<%=prefs.getToolbarBackground()%>;
+	font: <%=prefs.getToolbarFont()%>;
 	margin: 0px;
 	padding: 0px;
 	height:100%;
@@ -129,6 +129,7 @@ A {
 <%
 	}
 %>
+<%@ include file="darkTheme.css"%>
 </style>
 
 <script type="text/javascript">
diff --git a/org.eclipse.help.webapp/advanced/tabs.jsp b/org.eclipse.help.webapp/advanced/tabs.jsp
index 49e59f6d1..09a356206 100644
--- a/org.eclipse.help.webapp/advanced/tabs.jsp
+++ b/org.eclipse.help.webapp/advanced/tabs.jsp
@@ -105,6 +105,7 @@ IMG {
 	width:16px;
 }
 
+<%@ include file="darkTheme.css"%>
 </style>
  
 <script type="text/javascript">
diff --git a/org.eclipse.help.webapp/advanced/tocTree.css b/org.eclipse.help.webapp/advanced/tocTree.css
index 81a3829ee..95375074f 100644
--- a/org.eclipse.help.webapp/advanced/tocTree.css
+++ b/org.eclipse.help.webapp/advanced/tocTree.css
@@ -109,4 +109,5 @@ A.nolink:hover {
 	visibility:hidden;
 }
 
+<%@ include file="darkTheme.css"%>
  
diff --git a/org.eclipse.help.webapp/advanced/toolbar.jsp b/org.eclipse.help.webapp/advanced/toolbar.jsp
index 2b94d78ad..a3fc3af50 100644
--- a/org.eclipse.help.webapp/advanced/toolbar.jsp
+++ b/org.eclipse.help.webapp/advanced/toolbar.jsp
@@ -156,6 +156,7 @@ HTML {
 }
 %>
 
+<%@ include file="darkTheme.css"%>
 </style>
 
 <%
@@ -460,7 +461,7 @@ if(buttons.length > 0){
 		<table width="100%" border="0" cellspacing="1" cellpadding="0" height="100%">
 			<tr>
 				<td align="<%=isRTL?"left":"right"%>">
-					<table align="<%=isRTL?"left":"right"%>" border="0" cellspacing="0" cellpadding="0" height="100%" style="background:<%=prefs.getToolbarBackground()%>">
+					<table align="<%=isRTL?"left":"right"%>" border="0" cellspacing="0" cellpadding="0" height="100%">
 					<tr>
 <%
 	for (int i=0; i<buttons.length; i++) {