True dark mode

[bythckr]

This is a suggestion. First off, love the project and a nice tool to learn python. Much better than IDLE. Hope its become standard in python soon.

In the dark mode/theme,

• The terminal at the bottom when you run/debug/repl/plotter a code doesn't turn dark.
• The Mu administration opened by the cogwheel, the input background of the "Current Log" & "Python3 Environment" is white.
• The button background (between the yellow ring & icon) is white, issue is already created. Instead of an image with a background, wouldn't an image with transparent background be better?
• Also if the buttons on the top could be smaller, it would be great. An option to make it small, if there is a need for big buttons for some.

[dybber]

Just checked what the status is now.

• [x] The Python 3 REPL still has a white background in dark-mode
• [x] It seems the background in the administration Window is now fixed
• [ ] Buttons not following the theme setting is still an issue I guess, but I'm not a dark-mode user. I can see the linked issue #847 is now closed without a solution implemented. Perhaps chime in over there what you think, to make sure it's recorded that multiple people are requesting this.
• [ ] Smaller buttons might be linked to this suggestion, where the Zoom buttons also affects the buttons https://github.com/mu-editor/mu/pull/955 and the general discussion of making buttons have the same size no matter what resolution computer they are displayed.

[devdanzin]

Making the Python 3 REPL follow the theme seems to be a simple enough change. It seems we could even use the current theme CSS files if we want matching colors.

For the REPL, High contrast is trivial, it's white on black and only the prompt color can be argued. Night theme can be turned into a fully-colorful dark theme (using monokai below), or kept much closer to its current black-on-white styling (but dark).

Here's a quick demo from the minimal changes below:

https://user-images.githubusercontent.com/74280297/104253619-b9228c80-5453-11eb-9dce-6b208fe44571.mp4

The Night->Day colors aren't working well, but from High Contrast and Day flipping black/white, it seems to be simply a matter of redefining those colors in the right places.

diff --git a/mu/interface/panes.py b/mu/interface/panes.py
index c1deb6e..e7f31dc 100644
--- a/mu/interface/panes.py
+++ b/mu/interface/panes.py
@@ -56,6 +56,8 @@ from PyQt5.QtGui import (
     QStandardItem,
 )
 from qtconsole.rich_jupyter_widget import RichJupyterWidget
+from qtconsole import styles
+from pygments.styles.bw import BlackWhiteStyle
 from ..i18n import language_code
 from mu.interface.themes import Font
 from mu.interface.themes import DEFAULT_FONT_SIZE
@@ -84,6 +86,11 @@ PANE_ZOOM_SIZES = {
 }

+class HighContrastStyle(BlackWhiteStyle):
+    color = "#ffffff"
+    background_color = "#000000"
+
+
 class JupyterREPLPane(RichJupyterWidget):
     """
     REPL = Read, Evaluate, Print, Loop.
@@ -124,9 +131,10 @@ class JupyterREPLPane(RichJupyterWidget):
         Sets the theme / look for the REPL pane.
         """
         if theme == "contrast":
-            self.set_default_style(colors="nocolor")
+            self.style_sheet = styles.default_dark_style_sheet
+            self._highlighter.set_style(HighContrastStyle)
         elif theme == "night":
-            self.set_default_style(colors="nocolor")
+            self.set_default_style(colors="linux")
         else:
             self.set_default_style()

[devdanzin]

Regarding dark buttons, we can easily update the ButtonBar icons on theme change. Maybe having one set for dark themes and one for the Day theme. We could either adapt each PNG image or programmatically transform them in Qt (doesn't seem worth the trouble).

Here's something close to the visual effect I think we'd want, but not good enough (the trick is transparent icons, so they don't look good in Day theme because they don't have a white background anymore). Let's pretend the zoom buttons were left unchanged on purpose to... er... allow comparison to current look?

https://user-images.githubusercontent.com/74280297/104256335-cc385b00-5459-11eb-89ac-d43d184d818f.mp4

Happy to implement any ideas or suggestions for testing.

[dybber]

@ntoll or @ZanderBrown: Do we have vector versions of the buttons?

[ntoll]

Yes... sort of. I created / found / reused some for my Mu-tate experiment here: https://github.com/mu-editor/Mu-tate/tree/master/mu/icons

[ntoll]

NB, not all the icons are the same as our current ones, but they're close enough.