Make adding user styles & scripts easier and implement simple dark mode

Author: akirakyle

.gitignore

@@ -1 +1 @@
-webkitgtk-module.so
+*.so

README.org

@@ -216,6 +216,9 @@ about this).
 
 ;; Globally use a proxy
 (add-hook 'webkit-new-hook (lambda () (webkit-set-proxy "socks://localhost:8000")))
+
+;; Globally use the simple dark mode
+(setq webkit-dark-mode t)
 #+end_src
 
 I personally use evil so I've included ~evil-collection~ bindings which I hope
@@ -229,7 +232,6 @@ to upstream at some point when things stabilize.
 #+end_src
 
 * TODO Roadmap (roughly in order of my priorities)
-- Dark mode
 - bookmarks.el
 - Ad block
 - Edit text areas in temp emacs buffer

dark-mode.css

@@ -0,0 +1,41 @@
+*,div,pre,textarea,body,input,td,tr,p {
+    background-color: #292b2e !important;
+    /*background-image: none !important;*/
+    color: #b2b2b2 !important;
+}
+h1,h2,h3,h4 {
+    background-color: #303030 !important;
+    color: #b8ddea !important;
+}
+a {
+    color: #2aa1ae !important;
+}
+a:hover,a:focus {
+    color: #7070e0 !important;
+}
+a:visited {
+    color: #4f97d7 !important;
+}
+
+/* for wikipedia's equations */
+img.mwe-math-fallback-image-inline {
+    filter: invert(100%) !important;
+    background-color: transparent !important;
+}
+
+*[webkitviewhint^='hint']
+{
+    all: initial !important;
+    z-index: 2147483647;
+    position:fixed !important;
+    opacity: 0.7;
+    border: 1px solid #2d2d2d !important;
+    color: #2d2d2d !important;
+    background-color: #f2f0ec !important;
+    font: bold 20px monospace;
+    margin: 0;
+    padding: 0px 1px;
+}
+::selection {
+    background: red;
+}

evil-collection-webkit.el

@@ -87,7 +87,8 @@ document.addEventListener('keydown', WKViewEvilKeyDown);
     "gg" 'webkit-scroll-top
     "G" 'webkit-scroll-bottom
     "y" 'webkit-copy-selection
-    "Y" 'webkit-copy-url)
+    "Y" 'webkit-copy-url
+    "zd" 'webkit-dark-toggle)
 
   (when evil-want-C-d-scroll
     (evil-collection-define-key 'normal 'webkit-mode-map

hints.css

@@ -1,17 +1,13 @@
 *[webkitviewhint^='hint']
 {
-    all: initial;
+    all: initial !important;
     z-index: 2147483647;
     position:fixed !important;
     opacity: 0.7;
     border:1px solid #444;
     color: red;
     background-color: yellow;
-    /*
-    font-family: monospace !important;
-    font-size: 2em !important;
-   */
-    font: bold 20px monospace !important;
+    font: bold 20px monospace;
     margin: 0;
     padding: 0px 1px;
 }

script.js

@@ -27,22 +27,20 @@
 
 (require 'webkit)
 
+(declare-function webkit-add-style "webkit")
+(declare-function webkit-add-script "webkit")
 (declare-function webkit--file-to-string "webkit")
 (declare-function webkit--execute-js "webkit-module")
 (declare-function webkit--focus "webkit-module")
-(declare-function webkit--add-user-script "webkit-module")
-(declare-function webkit--add-user-style "webkit-module")
 
 (defconst webkit--base (file-name-directory load-file-name))
 
 (defvar webkit--id)
 
-(defvar webkit--hints-script
-      (webkit--file-to-string
-       (expand-file-name "hints.js" webkit--base)))
-(defvar webkit--hints-style
-      (webkit--file-to-string
-       (expand-file-name "hints.css" webkit--base)))
+(defvar webkit--hints-script (webkit--file-to-string
+                              (expand-file-name "hints.js" webkit--base)))
+(defvar webkit--hints-style (webkit--file-to-string
+                             (expand-file-name "hints.css" webkit--base)))
 
 (defcustom webkit-ace-chars "asdfghjklweio"
   "Link hint characters."
@@ -66,9 +64,8 @@
    "webkit-ace--callback"))
 
 (defun webkit-ace-init ()
-  (webkit--add-user-script webkit--id webkit--hints-script)
-  (webkit--add-user-style webkit--id webkit--hints-style)
-  )
+  (webkit-add-style webkit--hints-style)
+  (webkit-add-script webkit--hints-script))
 
 (add-hook 'webkit-new-hook #'webkit-ace-init)
 (define-key webkit-mode-map "o" 'webkit-ace)

style.css

@@ -64,7 +64,6 @@
 
 (declare-function webkit-history-completing-read prompt "webkit-history")
 
-(defconst webkit--base (file-name-directory load-file-name))
 (defconst webkit--user-dir (locate-user-emacs-file "webkit/"))
 (make-directory webkit--user-dir t)
 
@@ -78,8 +77,8 @@
 
 (defvar webkit--id)
 (defvar webkit--buffers)
-(defvar webkit--script)
-(defvar webkit--style)
+(defvar webkit--scripts)
+(defvar webkit--styles)
 
 (defgroup webkit nil
   "The dynamic module webkit browser."
@@ -342,6 +341,40 @@ Seach is case sensitive if CASE is not nil."
   (interactive)
   (webkit--start-web-inspector (or webkit-id webkit--id)))
 
+(defun webkit-set-styles (styles webkit-id)
+  "Add all the strings of css scripts in the list STYLES to
+WEBKIT-ID while removing any previous styles."
+  (webkit--remove-all-user-styles webkit-id)
+  (dolist (style styles)
+    (webkit--add-user-style webkit-id style)))
+
+(defun webkit-set-scripts (scripts webkit-id)
+  "Add all the strings of js scripts in the list SCRIPTS to
+WEBKIT-ID while removing any previous scripts."
+  (webkit--remove-all-user-scripts webkit-id)
+  (dolist (script scripts)
+    (webkit--add-user-script webkit-id script)))
+
+(defun webkit-add-style (style &optional webkit-id)
+  "Add user css STYLE to webkit view."
+  (push style webkit--styles)
+  (webkit-set-styles webkit--styles (or webkit-id webkit--id)))
+
+(defun webkit-add-script (script &optional webkit-id)
+  "Add user js SCRIPT to webkit view."
+  (push script webkit--scripts)
+  (webkit-set-scripts webkit--scripts (or webkit-id webkit--id)))
+
+(defun webkit-remove-style (style &optional webkit-id)
+  "Remove user css STYLE frome webkit view."
+  (setq webkit--styles (delq style webkit--styles))
+  (webkit-set-styles webkit--styles (or webkit-id webkit--id)))
+
+(defun webkit-remove-script (script &optional webkit-id)
+  "Remove user js SCRIPT frome webkit view."
+  (setq webkit--scripts (delq script webkit--scripts))
+  (webkit-set-scripts webkit--scripts (or webkit-id webkit--id)))
+
 (defun webkit-enable-javascript (&optional enable webkit-id)
   "Enable external javascript execution if ENABLE is not nil and
 disable it otherwise."
@@ -637,12 +670,10 @@ the default webkit buffer."
 ;;`webkit-own-window' must be set to desired value before this is called."
 
 (make-variable-buffer-local 'webkit--id)
+(make-variable-buffer-local 'webkit--scripts)
+(make-variable-buffer-local 'webkit--styles)
 (setq webkit--buffers nil)
 
-(setq webkit--script (webkit--file-to-string
-                    (expand-file-name "script.js" webkit--base)))
-(setq webkit--style (webkit--file-to-string
-                    (expand-file-name "style.css" webkit--base)))
 (unless webkit-own-window
 (add-hook 'window-size-change-functions #'webkit--adjust-size)
 (add-hook 'delete-frame-functions #'webkit--delete-frame))