Encapsulate theme handling

The Theme class encapsulates theme handling, by listing default themes
and providing means to access their gtk/web css.

Besides cleaning things up, it makes it easy to support custom themes
in the future. The user just needs to provide two CSS files, and we'll
be able to instantiate and use a Theme from that.

data/media/adwaita_style.css

@@ -1,4 +0,0 @@
-@define-color dark_bg #353535;
-@define-color light_bg #F6F5F4;
-
-@import url("style.css");

data/media/arc_style.css

@@ -1,4 +0,0 @@
-@define-color dark_bg #31373D;
-@define-color light_bg #EDEDED;
-
-@import url("style.css");

data/media/css/_gtk_base.css

@@ -27,19 +27,8 @@
 .uberwriter_window {
   -gtk-key-bindings: window-bindings;
   /*border-radius: 7px 7px 3px 3px;*/
-  background: @light_bg;
+  background: @background_color;
-  caret-color: @dark_bg;
+  caret-color: @foreground_color;
-}
-
-.uberwriter_window.dark_mode {
-  background: @dark_bg;
-  caret-color: @light_bg;
-}
-
-.uberwriter_window.dark_mode .uberwriter-editor text{
-  background: @dark_bg;
-  caret-color: @light_bg;
-  color: @light_bg;
 }
 
 .uberwriter_window.small .uberwriter-editor {
@@ -47,12 +36,7 @@
   font-size: 12px;
 }
 .uberwriter_window grid {
-  background-color: @light_bg;
+  background-color: @background_color;
-}
-
-.uberwriter_window.dark_mode grid, 
-.uberwriter_window.dark_mode scrolledwindow {
-  background-color: @dark_bg;
 }
 
 #UberwriterWindow.medium .uberwriter-editor {
@@ -75,25 +59,22 @@
 }
 
 #titlebar_container { 
-  background: @light_bg; 
+  background: @background_color; 
-}
-
-#titlebar_container.dark_mode { 
-  background: @dark_bg; 
 }
 
 .uberwriter-editor {
   border: none;
   background-color: transparent;
-  color: #222;
+  text-decoration-color: #ff0000;
   /*-GtkWidget-cursor-color: shade(#4D9FCE, 0.9);*/
   /*-GtkWidget-cursor-aspect-ratio: 0.1;*/
   -gtk-key-bindings: editor-bindings;
 }
 
 .uberwriter-editor text {
-  background-color: @light_bg;
+  background-color: @background_color;
-  color: #222;
+  color: @foreground_color;
+  caret-color: @foreground_color;
 }
 
 .uberwriter-editor:selected {
@@ -120,7 +101,7 @@
 
 .status_bar_box button {
   /* finding reset */
-  background-color: @light_bg;
+  background-color: @background_color;
   text-shadow: inherit;
   /*icon-shadow: inherit;*/
   box-shadow: initial;
@@ -146,13 +127,13 @@
 .status_bar_box button:hover,
 .status_bar_box button:checked {
   transition: 0s ease-in;
-  color: @light_bg;
+  color: @background_color;
   background-color: #666;
 }
 
 .status_bar_box button:hover label,
 .status_bar_box button:checked label {
-  color: @light_bg;
+  color: @background_color;
 }
 
 .status_bar_box button:active {
@@ -161,22 +142,7 @@
   background-image: none;
   box-shadow: 0 0 2px rgba(0,0,0,0.4)
 }
-.dark_mode .status_bar_box button {
-  background-color: @dark_bg;
-}
-.dark_mode .status_bar_box label {
-  color: @light_bg;
-}
-.dark_mode .status_bar_box button:hover,
-.dark_mode .status_bar_box button:checked {
-  background-color: @light_bg;
-  color: #666;
-}
 
-.dark_mode .status_bar_box button:hover label,
-.dark_mode .status_bar_box button:checked label{
-  color: #666;
-}
 .status_bar_box separator {
   border-color: #999;
   border-right: none;
@@ -198,9 +164,9 @@
   /*font: serif 10;*/
   font-family: serif;
   font-size: 10px;
-  background: @light_bg;
+  background: @background_color;
   border-radius: 4px;
-  border-color: @light_bg;
+  border-color: @background_color;
   margin: 5px;
   padding: 5px;
 }
@@ -211,7 +177,7 @@
   border: 1px solid #333;
   background: @ligth_bg;
   border-radius: 3px;
-  border-color: @light_bg;
+  border-color: @background_color;
 } */
 
 #LexikonBubble label {
@@ -219,9 +185,8 @@
 }
 
 #LexikonBubble {
-  background-color: @light_bg;
+  background-color: @background_color;
-   border: 5px solid @light_bg;
+  border: 5px solid @background_color;
-   border-color: @light_bg
 }
 
 #LexikonBubble .lexikon_heading {
@@ -240,15 +205,15 @@
 }
 
 .QuickPreviewPopup {
-	background-color: @light_bg;
+	background-color: @background_color;
 }
 
 .QuickPreviewPopup grid {
-	background-color: @light_bg;
+	background-color: @background_color;
-	color: @dark_bg;
+	color: @foreground_color;
-	border-color: @light_bg;
+	border-color: @background_color;
 }
 
 .QuickPreviewPopup label {
-	color: @dark_bg;
+	color: @foreground_color;
-}
+}

data/media/css/_web_base.css

@@ -1,11 +1,11 @@
 @font-face {
   font-family: fira-sans;
-  src: url("fonts/fira-sans-v9-vietnamese_latin_cyrillic-ext_cyrillic_greek-ext_latin-ext_greek-regular.woff2") format("woff2");
+  src: url("../fonts/fira-sans-v9-vietnamese_latin_cyrillic-ext_cyrillic_greek-ext_latin-ext_greek-regular.woff2") format("woff2");
 }
 
 @font-face {
   font-family: fira-mono;
-  src: url("fonts/fira-mono-v7-latin_cyrillic-ext_cyrillic_greek-ext_latin-ext_greek-regular.woff2") format("woff2");
+  src: url("../fonts/fira-mono-v7-latin_cyrillic-ext_cyrillic_greek-ext_latin-ext_greek-regular.woff2") format("woff2");
 }
 
 @font-face {
@@ -14,22 +14,21 @@
 }
 
 :root {
-  --text-color: #242424;
+  /* This is GitHub's default color scheme, which should be overridden per theme. */
-  --background-color: #f6f5f4;
+  --text-color: #24292e;
-  --alt-background-color: #ebebeb;
+  --background-color: #ffffff;
+  --alt-background-color: #f6f8fa;
   --link-color: #0366d6;
-  --blockquote-text-color: #606060;
+  --blockquote-text-color: #6a737d;
-  --blockquote-border-color: #d8d8d8;
+  --blockquote-border-color: #dfe2e5;
-  --header-border-color: #e2e2e2;
+  --header-border-color: #eaecef;
-  --hr-background-color: #dadada;
+  --hr-background-color: #e1e4e8;
-  --hr-border-color: #e4e4e4;
+  --table-tr-border-color: #c6cbd1;
-  --code-background-color: #eeeeee;
+  --table-td-border-color: #dfe2e5;
-  --table-td-border-color: #d8d8d8;
+  --kbd-text-color: #444d56;
-  --table-tr-border-color: #c1c1c1;
+  --kbd-background-color: #fafbfc;
-  --kbd-text-color: #444444;
+  --kbd-border-color: #c6cbd1;
-  --kbd-background-color: #f2f2f2;
+  --kbd-shadow-color: #959da5;
-  --kbd-border-color: #c1c1c1;
-  --kbd-shadow-color: #939393;
 }
 
 * {
@@ -55,7 +54,7 @@ html {
 body {
   color: var(--text-color);
   background-color: var(--background-color);
-  font-family: fira-sans, sans-serif, color-emoji;
+  font-family: "Fira Sans", fira-sans, sans-serif, color-emoji;
   line-height: 1.5;
   text-size-adjust: 100%;
   word-wrap: break-word;
@@ -93,7 +92,6 @@ hr {
   overflow: hidden;
   background-color: var(--hr-background-color);
   border: 0;
-  border-bottom: 1px solid var(--hr-border-color);
 }
 
 hr::before {
@@ -199,8 +197,7 @@ dd {
 code,
 kbd,
 pre {
-  font-family: fira-mono, monospace, color-emoji;
+  font-family: "Fira Mono", fira-mono, monospace, color-emoji;
-  background-color: var(--code-background-color);
   font-size: 1em;
   word-wrap: normal;
 }

data/media/css/gtk_adwaita.css

@@ -0,0 +1,5 @@
+@define-color foreground_color #2e3436;
+@define-color background_color #f6f5f4;
+@define-color math_text_color #00364c;
+
+@import url("_gtk_base.css");

data/media/css/gtk_adwaita_dark.css

@@ -0,0 +1,5 @@
+@define-color foreground_color #eeeeec;
+@define-color background_color #353535;
+@define-color math_text_color #ffc9b3;
+
+@import url("_gtk_base.css");

data/media/css/web_adwaita.css

@@ -0,0 +1,19 @@
+@import url("_web_base.css");
+
+:root {
+  --text-color: #2e3436;
+  --background-color: #f6f5f4;
+  --alt-background-color: #edeeef;
+  --link-color: #0d71de;
+  --blockquote-text-color: #747e85;
+  --blockquote-border-color: #d6d8da;
+  --header-border-color: #e1e2e4;
+  --hr-background-color: #d8dadd;
+  --table-tr-border-color: #bdc1c6;
+  --table-td-border-color: #d6d8da;
+  --kbd-text-color: #4e585e;
+  --kbd-background-color: #f1f1f1;
+  --kbd-border-color: #bdc1c6;
+  --kbd-shadow-color: #8c939a;
+
+}

data/media/css/web_adwaita_dark.css

@@ -1,19 +1,17 @@
-@import url("github-md.css");
+@import url("_web_base.css");
 
 :root {
-  --text-color: #dbdbdb;
+  --text-color: #eeeeec;
   --background-color: #353535;
   --alt-background-color: #3a3a3a;
-  --link-color: #4388d6;
+  --link-color: #b5daff;
-  --blockquote-text-color: #959595;
+  --blockquote-text-color: #a8a8a6;
   --blockquote-border-color: #525252;
   --header-border-color: #474747;
   --hr-background-color: #505050;
-  --hr-border-color: #464646;
-  --code-background-color: #3e3e3e;
-  --table-td-border-color: #525252;
   --table-tr-border-color: #696969;
-  --kbd-text-color: #bbbbbb;
+  --table-td-border-color: #525252;
+  --kbd-text-color: #cececc;
   --kbd-background-color: #3c3c3c;
   --kbd-border-color: #696969;
   --kbd-shadow-color: #979797;

uberwriter/Theme.py

@@ -0,0 +1,49 @@
+from gi.repository import Gtk
+
+from uberwriter.Settings import Settings
+from uberwriter_lib.helpers import get_css_path
+
+
+class Theme:
+    """
+    The Theme enum lists all supported themes using their "gtk-theme-name" value.
+
+    The light variant is listed first, followed by the dark variant, if any.
+    """
+
+    settings = Settings.new()
+
+    def __init__(self, name, gtk_css_path, web_css_path, is_dark, inverse_name):
+        self.name = name
+        self.gtk_css_path = gtk_css_path
+        self.web_css_path = web_css_path
+        self.is_dark = is_dark
+        self.inverse_name = inverse_name
+
+    @classmethod
+    def get_for_name(cls, name, default=None):
+        current_theme = default or defaultThemes[0]
+        for theme in defaultThemes:
+            if name == theme.name:
+                current_theme = theme
+        return current_theme
+
+    @classmethod
+    def get_current(cls):
+        theme_name = Gtk.Settings.get_default().get_property('gtk-theme-name')
+        dark_mode = cls.settings.get_value('dark-mode').get_boolean()
+        current_theme = cls.get_for_name(theme_name)
+        # Technically, we could very easily allow the user to force the light ui on a dark theme.
+        # However, as there is no inverse of "gtk-application-prefer-dark-theme", we shouldn't do that.
+        if dark_mode and not current_theme.is_dark and current_theme.inverse_name:
+            current_theme = cls.get_for_name(current_theme.inverse_name, current_theme.name)
+        return current_theme
+
+
+defaultThemes = [
+    # https://gitlab.gnome.org/GNOME/gtk/tree/master/gtk/theme/Adwaita
+    Theme('Adwaita', get_css_path('gtk_adwaita.css'),
+          get_css_path('web_adwaita.css'), False, 'Adwaita-dark'),
+    Theme('Adwaita-dark', get_css_path('gtk_adwaita_dark.css'),
+          get_css_path('web_adwaita_dark.css'), True, 'Adwaita'),
+]

uberwriter/UberwriterExportDialog.py

@@ -24,6 +24,9 @@ import logging
 
 from gettext import gettext as _
 import gi
+
+from uberwriter.Theme import Theme
+
 gi.require_version('Gtk', '3.0')
 from gi.repository import Gtk
 
@@ -215,7 +218,7 @@ class Export:
                 args.append("-o%s.odt" % basename)
 
             elif export_format == "html":
-                css = helpers.get_media_file('github-md.css')
+                css = Theme.ADWAITA.get_gtk_css_file()
                 relativize = helpers.get_script_path('relative_to_absolute.lua')
                 task_list = helpers.get_script_path('task-list.lua')
                 args.append("-c%s" % css)

uberwriter/UberwriterWindow.py

@@ -14,20 +14,22 @@
 # with this program.  If not, see <http://www.gnu.org/licenses/>.
 # END LICENSE
 
-import locale
-import subprocess
-import os
 import codecs
-import webbrowser
+import locale
-import urllib
 import logging
-
 import mimetypes
+import os
 import re
-
+import subprocess
+import urllib
+import webbrowser
 from gettext import gettext as _
 
 import gi
+from gi.repository.GObject import param_spec_string
+
+from uberwriter.Theme import Theme
+
 gi.require_version('Gtk', '3.0')
 gi.require_version('WebKit2', '4.0')  # pylint: disable=wrong-import-position
 from gi.repository import Gtk, Gdk, GObject, GLib, Gio
@@ -181,21 +183,13 @@ class UberwriterWindow(Gtk.ApplicationWindow):
         # Init file name with None
         self.set_filename()
 
-        # self.style_provider = Gtk.CssProvider()
-        # self.style_provider.load_from_path(helpers.get_media_path('arc_style.css'))
-
-        # Gtk.StyleContext.add_provider_for_screen(
-        #     Gdk.Screen.get_default(), self.style_provider,
-        #     Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION
-        # )
-
         # Markup and Shortcuts for the TextBuffer
         self.markup_buffer = MarkupBuffer(
             self, self.text_buffer, base_leftmargin)
         self.markup_buffer.markup_buffer()
 
-        # Setup dark mode if so
+        # Set current theme
-        self.toggle_dark_mode(self.settings.get_value("dark-mode"))
+        self.apply_current_theme()
 
         # Scrolling -> Dark or not?
         self.textchange = False
@@ -266,6 +260,22 @@ class UberwriterWindow(Gtk.ApplicationWindow):
         'close-window': (GObject.SIGNAL_ACTION, None, ())
     }
 
+    def apply_current_theme(self):
+        """Adjusts both the window and the CSD for the current theme.
+        """
+
+        theme = Theme.get_current()
+        if theme.is_dark:
+            self.markup_buffer.dark_mode(True)
+        else:
+            self.markup_buffer.dark_mode(False)
+
+        # Reload preview if it exists, otherwise redraw contents of window (self)
+        if self.preview_webview:
+            self.show_preview()
+        else:
+            self.queue_draw()
+
     def scrolled(self, widget):
         """if window scrolled + focusmode make font black again"""
         # if self.focusmode:
@@ -387,7 +397,7 @@ class UberwriterWindow(Gtk.ApplicationWindow):
         else:
             self.remove_typewriter()
             self.focusmode = False
-            self.text_buffer.remove_tag(self.markup_buffer.grayfont,
+            self.text_buffer.remove_tag(self.markup_buffer.unfocused_text,
                                         self.text_buffer.get_start_iter(),
                                         self.text_buffer.get_end_iter())
             self.text_buffer.remove_tag(self.markup_buffer.blackfont,
@@ -865,20 +875,13 @@ class UberwriterWindow(Gtk.ApplicationWindow):
                 base_path = ''
             os.environ['PANDOC_PREFIX'] = base_path + '/'
 
-            # Set the styles according the color theme
-            if self.settings.get_value("dark-mode"):
-                stylesheet = helpers.get_media_path('github-md-dark.css')
-            else:
-                stylesheet = helpers.get_media_path('github-md.css')
-
             args = ['pandoc',
                     '-s',
                     '--from=markdown',
                     '--to=html5',
                     '--mathjax',
-                    '--css=' + stylesheet,
+                    '--css=' + Theme.get_current().web_css_path,
-                    '--lua-filter=' +
+                    '--lua-filter=' + helpers.get_script_path('relative_to_absolute.lua'),
-                    helpers.get_script_path('relative_to_absolute.lua'),
                     '--lua-filter=' + helpers.get_script_path('task-list.lua')]
 
             proc = subprocess.Popen(
@@ -906,32 +909,6 @@ class UberwriterWindow(Gtk.ApplicationWindow):
 
             self.preview_webview.load_html(output.decode("utf-8"), 'file://localhost/')
 
-    def toggle_dark_mode(self, state):
-        """Toggle the dark mode, both for the window and for the CSD
-
-        Arguments:
-            state {gtk bool} -- Desired state of the dark mode (enabled/disabled)
-        """
-
-        # Save state for saving settings later
-        if state:
-            # Dark Mode is on
-            self.get_style_context().add_class("dark_mode")
-            self.headerbar.hb_container.get_style_context().add_class("dark_mode")
-            self.markup_buffer.dark_mode(True)
-        else:
-            # Dark mode off
-            self.get_style_context().remove_class("dark_mode")
-            self.headerbar.hb_container.get_style_context().remove_class("dark_mode")
-            self.markup_buffer.dark_mode(False)
-
-        # Reload preview if it exists
-        if self.preview_webview:
-            self.show_preview()
-
-        # Redraw contents of window (self)
-        self.queue_draw()
-
     def load_file(self, filename=None):
         """Open File from command line or open / open recent etc."""
         if self.check_change() == Gtk.ResponseType.CANCEL:

uberwriter_lib/helpers.py

@@ -49,16 +49,12 @@ def get_builder(builder_file_name):
 
 
 # Owais Lone : To get quick access to icons and stuff.
-def get_media_file(media_file_name):
+def get_media_file(media_file_path):
     """Return the full path of a given filename under the media dir
        (starts with file:///)
     """
 
-    media_filename = get_data_file('media', '%s' % (media_file_name,))
+    return "file:///" + get_media_path(media_file_path)
-    if not os.path.exists(media_filename):
-        media_filename = None
-
-    return "file:///" + media_filename
 
 
 def get_media_path(media_file_name):
@@ -66,19 +62,26 @@ def get_media_path(media_file_name):
        (doesn't start with file:///)
     """
 
-    media_filename = get_data_file('media', '%s' % (media_file_name,))
+    media_path = get_data_file('media', '%s' % (media_file_name,))
-    if not os.path.exists(media_filename):
+    if not os.path.exists(media_path):
-        media_filename = None
+        media_path = None
-    return media_filename
+    return media_path
+
+
+def get_css_path(css_file_name):
+    """Return the full path of a given filename under the css dir
+       (doesn't start with file:///)
+    """
+    return get_media_path("css/{}".format(css_file_name))
 
 
 def get_script_path(script_file_name):
     """Return the full path of a given filename under the script dir
     """
-    script_filename = get_data_file('lua', '%s' % (script_file_name,))
+    script_path = get_data_file('lua', '%s' % (script_file_name,))
-    if not os.path.exists(script_filename):
+    if not os.path.exists(script_path):
-        script_filename = None
+        script_path = None
-    return script_filename
+    return script_path
 
 
 class NullHandler(logging.Handler):