[Rt-commit] rt branch, 5.0/fix-rich-text-styles-dark-theme, created. rt-5.0.0beta1-2-gbee22d1eec

[Blaine Motsinger]

The branch, 5.0/fix-rich-text-styles-dark-theme has been created
        at  bee22d1eec965ad33f0824a1667aba539d32a538 (commit)

- Log -----------------------------------------------------------------
commit c43ec9718992be36a3298f419cb3b807b46dd464
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Tue Jun 9 21:08:45 2020 -0500

    Add darkmode class to ckeditor iframe if darkmode
    
    CSS targets can't traverse iframe boundaries. Add a class to style
    the CKEditor iframe body content if the parent is in darkmode.

diff --git a/share/static/js/util.js b/share/static/js/util.js
index 1cbd739e53..6c9928f102 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -1016,3 +1016,19 @@ jQuery(function() {
         }
     }
 });
+
+// Add the darkmode class to the ckeditor iframe document body.
+// CSS targets can't traverse iframe boundaries so we need to do this to
+// style the CKEditor iframe body content if the parent is in darkmode.
+jQuery(function() {
+    if (document.body.classList.contains('darkmode')) {
+        var messageBoxId = document.querySelector('.messagebox').getAttribute('id');
+
+        if (CKEDITOR.instances && CKEDITOR.instances[messageBoxId]) {
+            var richTextEditor = CKEDITOR.instances[messageBoxId];
+            richTextEditor.on('instanceReady', function() {
+                richTextEditor.document.getBody().addClass('darkmode');
+            });
+        }
+    }
+});

commit bee22d1eec965ad33f0824a1667aba539d32a538
Author: Blaine Motsinger <blaine at bestpractical.com>
Date:   Tue Jun 9 21:11:02 2020 -0500

    Fix darkmode styles for ckeditor

diff --git a/share/static/css/elevator-dark/main.css b/share/static/css/elevator-dark/main.css
index 3874c165ab..b9e66d9260 100644
--- a/share/static/css/elevator-dark/main.css
+++ b/share/static/css/elevator-dark/main.css
@@ -321,3 +321,42 @@
 .darkmode ul.toplevel.sf-menu > li > ul > li a.sf-with-ul:after {
     background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' id='i-chevron-right' viewBox='0 0 7 12' height='100%' width='100%' fill='none' stroke='rgb(237,237,237)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'><path d='M1 1 l5 5 -5 5' /></svg>") no-repeat center center;
 }
+
+/* CKEditor darkmode fixes */
+
+/* Reset all to a common color.
+   This is much easier than specifying each small button. */
+.darkmode [class^='cke_'] {
+    background-color: #333d42 !important;
+}
+
+.darkmode #cke_Content .cke_inner,
+.darkmode .cke_toolbox .cke_toolbar,
+.darkmode #cke_UpdateContent,
+.darkmode #cke_Content,
+.darkmode #cke_UpdateContent .cke_top,
+.darkmode #cke_Content .cke_top,
+.darkmode .cke_toolbox .cke_toolbar .cke_combo,
+.darkmode #cke_UpdateContent .cke_bottom,
+.darkmode #cke_Content .cke_bottom,
+.darkmode #cke_UpdateContent .cke_bottom .cke_resizer,
+.darkmode #cke_Content .cke_bottom .cke_resizer {
+    background-color: #2c3539 !important;
+}
+
+.darkmode .cke_toolbox .cke_toolbar .cke_combo .cke_combo_text {
+    color: #ededed !important;
+    line-height: 2em;
+}
+
+/* this target is added through util.js to the ckeditor iframe body if in darkmode */
+body.cke_editable.darkmode:not(.placeholder) {
+    color: #ededed !important;
+}
+
+.darkmode #cke_UpdateContent, .darkmode #cke_Content,
+.darkmode .cke_contents,
+.darkmode .cke_toolbar .cke_combo_button,
+.darkmode .cke_toolbar .cke_toolgroup {
+    border-color: #717171 !important;
+}

-----------------------------------------------------------------------