wait #7691 @2:00

diff --git a/resources/markdowneditor/js/markdowneditor.js b/resources/markdowneditor/js/markdowneditor.js
index 455e2b144bb9845400f463bd52916eb121712718..f181745fc9a82ea82b00e17a8c37cc622db2d92a 100644 (file)
--- a/resources/markdowneditor/js/markdowneditor.js
+++ b/resources/markdowneditor/js/markdowneditor.js
@@ -51,6 +51,8 @@ function MarkdownEditor() {
     this.currentPage = Math.max(1,parseInt(window.location.hash.substring(1))) || 1;
     this.editor = null;
     this.contentMarkdown = null;
+    this.theme = false;
+    this.options = {};
     this.init()
 }
 
@@ -62,6 +64,22 @@ MarkdownEditor.prototype = {
         this.versions = new MarkdowneditorVersions(this);
         this.zoom = new MarkdowneditorZoom(this);
 
+        this.options = {
+            el: document.querySelector('#editor'),
+            initialEditType: 'wysiwyg',
+            previewStyle: 'vertical',
+            theme: this.theme,
+            cursorToEnd: false,
+            autofocus: false,
+            toolbarItems: [
+                ['heading', 'bold', 'italic'],
+                ['hr', 'quote'],
+                ['ul'],
+                ['table', 'image', 'link'],
+                ['scrollSync'],
+            ]
+        }
+
         this.open = false
         this.savedScroll = null;
 
@@ -86,6 +104,20 @@ MarkdownEditor.prototype = {
             }
         }, true);
 
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+            $this.editor.destroy()
+            $this.editor = new Editor({ ...$this.options, theme: 'dark' })
+            $this.changePage($this.currentPage)
+        }
+
+        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
+            const newColorScheme = event.matches ? "dark" : "light";
+            $this.save.save()
+            $this.editor.destroy()
+            $this.editor = new Editor({ ...$this.options, theme: newColorScheme })
+            $this.changePage($this.currentPage)
+        });
+
         $(window).on('hashchange', function () {
             /*if ($this.maskHashEvent) {
                 return;
@@ -220,21 +252,7 @@ MarkdownEditor.prototype = {
     },
 
     markdown: function() {
-        this.editor = new Editor({
-            el: document.querySelector('#editor'),
-            initialEditType: 'wysiwyg',
-            previewStyle: 'vertical',
-            theme: 'dark',
-            cursorToEnd: false,
-            autofocus: false,
-            toolbarItems: [
-                ['heading', 'bold', 'italic'],
-                ['hr', 'quote'],
-                ['ul'],
-                ['table', 'image', 'link'],
-                ['scrollSync'],
-            ]
-        });
+        this.editor = new Editor(this.options);
         this.editor.getMarkdown();
     },
 

diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index 86acabb3c09a0c02a6f0744000d3c612ed5d8992..975ebae57a8996b5a6d2dd116524e069bc473f0b 100644 (file)
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -306,3 +306,27 @@ input::-webkit-inner-spin-button
 .ProseMirror,
 .toastui-editor-md-preview
     @include tinyscrollbars
+
+.toastui-editor-dark
+    .toastui-editor-defaultUI-toolbar
+        .scroll-sync.active::before
+            color: #bbb !important
+        input:checked + .switch::before
+            background-color: #bbb !important
+    .toastui-editor-defaultUI-toolbar,
+    .toastui-editor-md-container,
+    .toastui-editor-ww-container
+        @include dark-theme
+            background-color: #222 !important
+
+    .toastui-editor-mode-switch
+        @include dark-theme
+            background-color: #444 !important
+        .tab-item
+            @include dark-theme
+                background-color: transparent !important
+                color: #bbb !important
+            &.active
+                @include dark-theme
+                    background-color: #222 !important
+                    border-top-color: #222 !important