RT 5.0.0 and dark theme

RT Users
14

We’ve been doing some more hacking on this, as we seem to be shuttling between annoying darkmode users and annoying lightmode users.

One thing I’m trying at the moment is a little local hack to Ticket/Update.html to include some Javascript that propagates the darkmode CSS class from the outer document to the iframe that CKEDITOR uses. That way we can then have a darkmode specific bit of CSS running inside the editor. Here’s the context diff of the change to Ticket/Update.html:

diff -c /opt/rt5/share/html/Ticket/Update.html  /opt/rt5/local/html/Ticket/Update.html
*** /opt/rt5/share/html/Ticket/Update.html	2020-07-28 13:13:40.117760968 +0100
--- /opt/rt5/local/html/Ticket/Update.html	2021-01-13 17:33:49.561154239 +0000
***************
*** 190,195 ****
--- 190,209 ----
      <& /Elements/MessageBox, Name=>"UpdateContent", IncludeSignature => $IncludeSignature, %ARGS &>
  % }
  % $m->callback( %ARGS, CallbackName => 'AfterMessageBox' );
+ <script type="text/javascript">
+   jQuery(function() {
+   if (jQuery(".darkmode") && 
+       CKEDITOR.instances 
+   ) {
+     CKEDITOR.on('instanceReady', function( evt ) {
+       if(CKEDITOR.instances['UpdateContent']) {
+         CKEDITOR.instances['UpdateContent'].document.getBody().addClass('darkmode');
+       }
+     });
+   }
+ });
+ </script>
+ 
    </div>
  </div>

The local copy of share/static/RichText/contents-dark.css then just has this added at the top to make the darkmode text in the editor black:

.darkmode.cke_editable {
    color: #000 !important;
}

You could do all sorts of dark mode specific CSS in the editor with this (dark blood red background for example… get the Goth vibe really going. :slight_smile: ).

I guess we could generalise the Javascript to copy all the classes from the body element of the parent document to the body element in the iframe, so that other custom CSS themes could be propagated into the editor. But we’ll play with this a bit first. I just thought it might be a useful update for someone out there.

4 Likes