Hi there,
I was wondering if IA has plans to insert dark mode features on ignition designer the same way it did with its online manual? I understand that for graphics and design can be a little 'weird' but maybe... on the scripts editor? 
2 Likes
Totally agree!!
1 Like
It seems as though you are both hipsters. See here:
1 Like
If I remember correctly, the script editor used to have dark mode. You would right click in the pane and change the appearance.
Every day I see the Dark Mode legion geting stronger as now there are even rumors of a wizard among them able to hack the darkness into existence
3 Likes
When I was initially developing my own flavor of dark mode for the designer, I wrote this fun little script for comparing colors in the script console:
from java.awt import Window
from java.beans import PropertyChangeListener
class PythonTextAreaBackgroundListener(PropertyChangeListener):
def __init__(self, color):
self.color = color
def propertyChange(self, event):
if event.propertyName == "background":
event.source.background = self.color
def exploreWindow(window):
for component in window.components:
componentClass = component.__class__.__name__
if componentClass == 'PythonTextArea$textArea$1':
for listener in component.propertyChangeListeners:
if listener.__class__.__name__ == 'PythonTextAreaBackgroundListener':
component.removePropertyChangeListener(listener)
break
if hasattr(listener, 'color') and listener.color == currentBackgroundPick:
component.addPropertyChangeListener(PythonTextAreaBackgroundListener(comparisonBackgroundColor))
component.background = comparisonBackgroundColor
component.foreground = comparisonforegroundColor
component.currentLineHighlightColor = comparisonHighlightColor
else:
component.addPropertyChangeListener(PythonTextAreaBackgroundListener(currentBackgroundPick))
component.background = currentBackgroundPick
component.foreground = currentForegroundPick
component.currentLineHighlightColor = currentHighlighterPick
exploreWindow(component)
currentBackgroundPick = system.gui.color('silver')
currentForegroundPick = system.gui.color('black')
currentHighlighterPick = system.gui.color(255, 255, 160)
comparisonBackgroundColor = system.gui.color('pink')
comparisonforegroundColor = system.gui.color('orange')
comparisonHighlightColor = system.gui.color(255, 255, 160)
for window in Window.getWindows():
if window.visible and window.__class__.__name__ == 'InteractiveScriptPlayground':
exploreWindow(window)
Simply paste the script into the script console, change the system.gui.color parameters, and run the script to toggle back and forth between background, foreground, and highlight colors in the console for purposes of comparison:
This is the one I ended up using for late night "dark mode" scripting:
It's still a positive polarity, which makes everything easier to read, but it's not blindingly bright, so I imagine my melatonin production is not completely inhibited while I'm staying up later than I should to play around with some abstract idea that popped into my head after hours.
Psst, if you're going to do this anyways, take a look at the NamedTheme class, which has some built-in RSyntaxTextArea themes.
1 Like
I remember back when I was messing with this, I was able to find the source code for the RSyntaxTextArea online, and that helped out a bunch
There's more to it than simply inverting colors. Listeners are needed to detect when the designer opens or adds things, and the enabled and disabled button icons have to be reversed to get the contrast right with a dark theme. A lot of the OEM listeners have to be wrapped, so they can still perform their functions without messing up the color scheme, and so they can be put back to normal when the user switches back to light mode.
A few months ago, I developed a working prototype, but then I got super busy with actual work, and consequently, I stopped messing around with it. Now that 8.3 is about to come out, I'm not sure it's worth delving back into.
Just for the edification of anybody interested in this thread. Here is an example of how to apply the Dark NamedTheme to the script console's text area using Jython:
from java.awt import Window
from com.inductiveautomation.ignition.common.gui import NamedTheme
# To reverse this, simply use NamedTheme.Default.theme
def applyDarkTheme(window):
for component in window.components:
if component.__class__.__name__ == 'PythonTextArea$textArea$1':
theme = NamedTheme.Dark.theme
theme.apply(component)
applyDarkTheme(component)
for window in Window.getWindows():
if window.visible and window.__class__.__name__ == 'InteractiveScriptPlayground':
applyDarkTheme(window.rootPane)
Result:
...or more generically for use on any jython text area, the function would look like this:
from com.inductiveautomation.ignition.common.gui import NamedTheme
# To reverse this, simply use NamedTheme.Default.theme
def applyScriptEditorDarkTheme(jythonTextArea):
theme = NamedTheme.Dark.theme
theme.apply(jythonTextArea)
Edit:
@Rodrigo_Domingues @Tomas_Ribeiro
A Dark Mode patch is now available for download on the exchange:
Dark Mode for the Designer
For the Vision module and the project library script editor, it's well polished. and it will darken the main of the windows in the Perspective and Reporting modules as well.
3 Likes