Hi,
I set a new dark theme and can’t see the text if I want to add a comment.
What is the RT version shown in the footer in the web UI? Do you have any custom CSS for your RT?
Version is 5.0.0 as stated in the subject. Custom css not used.
My RT5 comment box looks like this
Could be some style caching from older RT, maybe try a hard page refresh
The text I write is visible, you can’t see the text I’m commenting on.
I performed a clean installation on the test machine and the problem is the same.
The text is white and that is a problem.
On our RT5 beta 2 install the quoted comment is visible, but it is a light grey on a peachy coloured background so not terribly good contrast.
Had a quick look: it appears you can fix this with a local CSS file. Create a directory called /opt/rt5/local/static/RichText
and in there copy the file `/opt/rt5/share/static/RichText/contents-dark.css``. Then edit the new local copy and change the hex colour value in the third line. So for example I have a nice red text with:
/* main input color */
.cke_editable {
color: #f70101 !important;
}
Flush your Mason cache, restart the web server and then take a look (you might need to shift-reload your web browser if it caches the CSS style sheet).
If you want a really Goth look, try this:
/* main input color */
.cke_editable {
color: #ededed;
background-color: #020202;
}
The solution from @GreenJimll is working fine although the forward text area and the new ticket creation text area suffer from the same issue.
To solve this issue :
Create the local directory “mkdir -p /opt/rt5/local/static/RichText/skins/bootstrapck/”
Copy each browsers file
For Chrome “cp /opt/rt5/share/static/RichText/skins/bootstrapck/editor.css /opt/rt5/local/static/RichText/skins/bootstrapck/”
For Firefox “cp /opt/rt5/share/static/RichText/skins/bootstrapck/editor_gecho.css /opt/rt5/local/static/RichText/skins/bootstrapck/”
Edit all of the files above and add the line below
Save changes, delete mason cache, restart Apache, delete your browser’s local cache
Done
I also filled a bug report https://rt.bestpractical.com/Ticket/Display.html?id=36828
It looks like dark theme fixes were merged into the stable branch for the next rerelease as well
Is there an environmental variable that would prevent these changes from taking effect? I have followed the suggestions in this thread to a tee and regardless of what I try, my screen contrast remains unchanged. I’ve tried creating the /local/static/RichText directory and populating it with the edited dark.css file. Flushed mason cache with rm -rf /opt/rt5/var/mason_data/obj/* restarted apache with systemctl restart httpd, flushed browser cache, and same issue. Even went as far as modifying the /opt/rt5/share/static/RichText/contents-dark.css with the same changes…followed by the same steps, and nothing changed. I keep getting that god awful peach colored background
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. ).
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.
This worked! Thanks.