[epiphany] highlight.js: support view source dark mode

From: Jan-Michael Brummer <jbrummer src gnome org>
To: commits-list gnome org
Cc:
Subject: [epiphany] highlight.js: support view source dark mode
Date: Sun, 14 Jun 2020 15:20:51 +0000 (UTC)
commit fb2124837d596044c7043d1176644981197462ec
Author: Jim Mason <jmason ibinx com>
Date:   Fri Jun 12 16:47:37 2020 +0100

    highlight.js: support view source dark mode
    
    This MR picks up the new upstream stylesheets nnfx.css and
    nnfx-dark.css from highlight.js.
    
    needs !703

 embed/ephy-view-source-handler.c                  |   3 +-
 third-party/highlightjs/README.epiphany           |   3 +-
 third-party/highlightjs/default.css               |  99 --------------------
 third-party/highlightjs/highlightjs.gresource.xml |   3 +-
 third-party/highlightjs/nnfx-dark.css             | 106 ++++++++++++++++++++++
 third-party/highlightjs/nnfx.css                  | 106 ++++++++++++++++++++++
 6 files changed, 218 insertions(+), 102 deletions(-)
---
diff --git a/embed/ephy-view-source-handler.c b/embed/ephy-view-source-handler.c
index d39a3553a..55878e105 100644
--- a/embed/ephy-view-source-handler.c
+++ b/embed/ephy-view-source-handler.c
@@ -124,7 +124,8 @@ web_resource_data_cb (WebKitWebResource     *resource,
   escaped_str = g_markup_escape_text ((const char *)data, length);
 
   html = g_strdup_printf ("<head>"
-                          "  <link rel='stylesheet' 
href='ephy-resource:///org/gnome/epiphany/highlightjs/default.css'>"
+                          "  <link rel='stylesheet' 
href='ephy-resource:///org/gnome/epiphany/highlightjs/nnfx.css' media='(prefers-color-scheme: no-preference), 
(prefers-color-scheme: light)'>"
+                          "  <link rel='stylesheet' 
href='ephy-resource:///org/gnome/epiphany/highlightjs/nnfx-dark.css' media='(prefers-color-scheme: dark)'>"
                           "  <title>%s</title>"
                           "</head>"
                           "<body class='hljs'>"
diff --git a/third-party/highlightjs/README.epiphany b/third-party/highlightjs/README.epiphany
index 3a751f4cb..c26df05ec 100644
--- a/third-party/highlightjs/README.epiphany
+++ b/third-party/highlightjs/README.epiphany
@@ -11,6 +11,7 @@ npm install
 node tools/build.js -n css javascript xml
 
 Copy build/highlight.js to <epiphany-source>/third-party/highlightjs/
-Copy src/styles/default.css to <epiphany-source>third-party/highlightjs/
+Copy src/styles/nnfx.css to <epiphany-source>third-party/highlightjs/
+Copy src/styles/nnfx-dark.css to <epiphany-source>third-party/highlightjs/
 
 # Documentation created by Jan-Michael Brummer <jan brummer tabos org>
diff --git a/third-party/highlightjs/highlightjs.gresource.xml 
b/third-party/highlightjs/highlightjs.gresource.xml
index 44db95f55..3d1ea96ee 100644
--- a/third-party/highlightjs/highlightjs.gresource.xml
+++ b/third-party/highlightjs/highlightjs.gresource.xml
@@ -2,6 +2,7 @@
 <gresources>
   <gresource prefix="/org/gnome/epiphany/highlightjs">
     <file compressed="true">highlight.js</file>
-    <file compressed="true">default.css</file>
+    <file compressed="true">nnfx.css</file>
+    <file compressed="true">nnfx-dark.css</file>
   </gresource>
 </gresources>
diff --git a/third-party/highlightjs/nnfx-dark.css b/third-party/highlightjs/nnfx-dark.css
new file mode 100644
index 000000000..0751ee5d9
--- /dev/null
+++ b/third-party/highlightjs/nnfx-dark.css
@@ -0,0 +1,106 @@
+/**
+ * nnfx dark - a theme inspired by Netscape Navigator/Firefox
+ *
+ * @version 1.0.0
+ * @author (c) 2020 Jim Mason <jmason ibinx com>
+ * @license https://creativecommons.org/licenses/by-sa/4.0  CC BY-SA 4.0
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #333;
+  color: #fff;
+}
+
+.xml .hljs-meta {
+  font-weight: bold;
+  font-style: italic;
+  color: #69f;
+}
+
+.hljs-comment,
+.hljs-quote {
+  font-style: italic;
+  color: #9c6;
+}
+
+.hljs-name,
+.hljs-keyword {
+  color: #a7a;
+}
+
+.hljs-name,
+.hljs-attr {
+  font-weight: bold;
+}
+
+.hljs-string {
+  font-weight: normal;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #588;
+}
+
+.hljs-code,
+.hljs-string,
+.hljs-meta-string,
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  color: #bce;
+}
+
+.hljs-title,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #d40;
+}
+
+.hljs-section,
+.hljs-meta {
+  color: #a85;
+}
+
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #96c;
+}
+
+.hljs-function .hljs-title,
+.hljs-attr,
+.hljs-subst {
+  color: #fff;
+}
+
+.hljs-formula {
+  background-color: #eee;
+  font-style: italic;
+}
+
+.hljs-addition {
+  background-color: #797;
+}
+
+.hljs-deletion {
+  background-color: #c99;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #964;
+}
+
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
diff --git a/third-party/highlightjs/nnfx.css b/third-party/highlightjs/nnfx.css
new file mode 100644
index 000000000..e7beaa518
--- /dev/null
+++ b/third-party/highlightjs/nnfx.css
@@ -0,0 +1,106 @@
+/**
+ * nnfx - a theme inspired by Netscape Navigator/Firefox
+ *
+ * @version 1.0.0
+ * @author (c) 2020 Jim Mason <jmason ibinx com>
+ * @license https://creativecommons.org/licenses/by-sa/4.0  CC BY-SA 4.0
+ */
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  background: #fff;
+  color: #000;
+}
+
+.xml .hljs-meta {
+  font-weight: bold;
+  font-style: italic;
+  color: #48b;
+}
+
+.hljs-comment,
+.hljs-quote {
+  font-style: italic;
+  color: #070;
+}
+
+.hljs-name,
+.hljs-keyword {
+  color: #808;
+}
+
+.hljs-name,
+.hljs-attr {
+  font-weight: bold;
+}
+
+.hljs-string {
+  font-weight: normal;
+}
+
+.hljs-variable,
+.hljs-template-variable {
+  color: #477;
+}
+
+.hljs-code,
+.hljs-string,
+.hljs-meta-string,
+.hljs-number,
+.hljs-regexp,
+.hljs-link {
+  color: #00f;
+}
+
+.hljs-title,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #f40;
+}
+
+.hljs-section,
+.hljs-meta {
+  color: #642;
+}
+
+.hljs-class .hljs-title,
+.hljs-type {
+  color: #639;
+}
+
+.hljs-function .hljs-title,
+.hljs-attr,
+.hljs-subst {
+  color: #000;
+}
+
+.hljs-formula {
+  background-color: #eee;
+  font-style: italic;
+}
+
+.hljs-addition {
+  background-color: #beb;
+}
+
+.hljs-deletion {
+  background-color: #fbb;
+}
+
+.hljs-selector-id,
+.hljs-selector-class {
+  color: #964;
+}
+
+.hljs-doctag,
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
[Date Prev][Date Next] [Thread Prev][Thread Next] [Thread Index] [Date Index] [Author Index]