wip #7691 @1:30

diff --git a/resources/markdowneditor/js/markdowneditor.js b/resources/markdowneditor/js/markdowneditor.js
index dc918650ba4c5a25f5c20c73638108b90a1e2f44..455e2b144bb9845400f463bd52916eb121712718 100644 (file)
--- a/resources/markdowneditor/js/markdowneditor.js
+++ b/resources/markdowneditor/js/markdowneditor.js
@@ -1,4 +1,5 @@
 import Editor from '@toast-ui/editor';
+import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import MarkdowneditorToolbar from "./markdowneditor.toolbar";
 import MarkdowneditorUndo from "./markdowneditor.undo";
 import MarkdowneditorSave from "./markdowneditor.save";
@@ -223,6 +224,7 @@ MarkdownEditor.prototype = {
             el: document.querySelector('#editor'),
             initialEditType: 'wysiwyg',
             previewStyle: 'vertical',
+            theme: 'dark',
             cursorToEnd: false,
             autofocus: false,
             toolbarItems: [

diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index 1cb0053da976a90b908fca3a255dd1cdbd275a48..86acabb3c09a0c02a6f0744000d3c612ed5d8992 100644 (file)
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -1,3 +1,14 @@
+@keyframes rotate
+    from
+        transform: rotate(0)
+    to
+        transform: rotate(360deg)
+
+@mixin dark-theme
+    @media (prefers-color-scheme: dark)
+        &
+            @content
+
 html
     touch-action: none
 
@@ -11,6 +22,8 @@ body
     white-space: nowrap
     &.user-select-none
         user-select: none
+    @include dark-theme
+        background-color: #333
 
 .markdown
     display: flex
@@ -31,6 +44,8 @@ body
             margin: 0 3px
             text-align: center
             color: #5d5d5d
+            @include dark-theme
+                color: #bbb
             &.disabled
                 color: #bbb
                 pointer-events: none
@@ -87,6 +102,8 @@ body
             width: 51px
             height: 100%
             background-color: #ebecee
+            @include dark-theme
+                background-color: #444
             [data-icon]
                 display: block
                 vertical-align: top
@@ -97,6 +114,8 @@ body
                 margin: 6px 0 0 7px
                 text-align: center
                 color: #5d5d5d
+                @include dark-theme
+                    color: #bbb
 
         &-panel
             position: relative
@@ -114,6 +133,8 @@ body
                 width: 100%
                 border-collapse: collapse
                 color: #5d5d5d
+                @include dark-theme
+                    color: #bbb
                 .row
                     padding: 5px 0
                     vertical-align: top
@@ -146,6 +167,9 @@ body
         width: 100%
         display: flex
         align-items: center
+        @include dark-theme
+            background-color: #444
+            color: #bbb
         &-save-block
             position: relative
             min-width: 26px
@@ -169,6 +193,8 @@ body
         position: relative
         padding-top: 40px
         flex: 1
+        @include dark-theme
+            background-color: #222
         #editor
             height: 100% !important
 
@@ -280,9 +306,3 @@ input::-webkit-inner-spin-button
 .ProseMirror,
 .toastui-editor-md-preview
     @include tinyscrollbars
-
-@keyframes rotate
-    from
-        transform: rotate(0)
-    to
-        transform: rotate(360deg)