Processing 4. Change editor window colour?

[JSGauthier]

Hi there,

Does anyone know hw to change the background colour in the editor window on P4 to a darker colour?
I find the new tone of blue too bright and it tires my eyes.

Thanks,
JS

[behreajj]

Hi @JSGauthier ,

I’m very much in the same boat. One place to start is to go to the folder where you downloaded Processing, go within the lib folder, open theme.txt and look for editor.bgcolor. The text color should be below it. For reference, I copied my personal theme below. It still needs a lot of work.

You’d need to edit the image files that are scattered through-out to get rid of all the bright blues. I had to change the start up splash image (about-1x.png and about-2x.png). I also manually set

welcome.four.beta.show = false
welcome.four.beta.seen = true

in defaults.txt and in my preferences (I did both just for good measure).

I’ve not had time to review all the changes made about themes, so there may be more settings and files you have to dig around and change.

# STATUS
# Status messages (1 file added to sketch, errors, etc)
status.notice.fgcolor = #161e3f
status.notice.bgcolor = #7987a0
status.error.fgcolor = #ffffff
status.error.bgcolor = #e10c2f
status.warning.bgcolor = #fed456
status.warning.fgcolor = #764a00
status.url.fgcolor = #cccccc
status.font = processing.sans,plain,13
# For the clipboard icon, needs to be a little larger on macOS
status.emoji.font = Dialog,plain,22
status.emoji.font.macosx = Dialog,plain,22

# HEADER TABS
# Settings for the tab area at the top.
header.text.font = processing.sans,plain,14
header.text.selected.color = #fff7d5
header.text.unselected.color = #fff7d5
header.tab.arrow.color = #007fff
header.gradient.top = #131313
header.gradient.bottom = #131313
header.tab.selected.color = #232323
header.tab.unselected.color = #131313
header.tab.modified.color = #007fff

# FOOTER TABS
footer.text.font = processing.sans,plain,12
footer.text.selected.color = #fff7d5
footer.text.unselected.color = #fff7d5
footer.tab.arrow.color = #007fff
footer.gradient.top = #131313
footer.gradient.bottom = #131313
footer.tab.selected.color = #232323
footer.tab.unselected.color = #131313
footer.updates.color = #007fff

# CONSOLE
# The font is handled by preferences, so its size/etc are modifiable.
console.color = #131313
console.output.color = #fff7d5
console.error.color = #e10c2f

# TOOLBAR BUTTONS
buttons.bgcolor = #131313

# for the debug and mode buttons
#reversed.gradient.top = #131313
#reversed.gradient.bottom = #131313

## size of divider between editing area and the console
#divider.size = 0
## the larger divider on windows is ugly with the little arrows
## this makes it large enough to see (mouse changes) and use,
## but keeps it from being annoyingly obtrusive
#divider.size.windows = 2

divider.height = 9
divider.color = #131313
divider.dot.diameter = 3
divider.dot.color = #505050

# TOOLBAR BUTTON TEXT
toolbar.rollover.font = processing.sans,plain,12
toolbar.rollover.color = #fff7d5
toolbar.gradient.top = #131313
toolbar.gradient.bottom = #131313

# MODE SELECTOR
#mode.title.font = processing.sans,plain,15
mode.title.font = processing.sans,plain,12
mode.title.color = #fff7d5
# outline color of the mode button
#mode.button.color = #fff7d5
#mode.button.gap = 13
#mode.arrow.width
#mode.background.color = #3D5362
# stolen from gradient bottom
mode.background.color = #131313
mode.outline.color = #fff7d5

# EDITOR - DETAILS

# foreground and background colors
editor.fgcolor = #fff7d5
editor.bgcolor = #131313

editor.gradient.top = #131313
editor.gradient.bottom = #131313

# highlight for the current line
editor.linehighlight.color=#232323
editor.linehighlight=true

editor.caret.color = #00afff
editor.selection.color = #404040

# area that's not in use by the text (replaced with tildes)
editor.invalid.style = #7e7e7e,plain

# little pooties at the end of lines that show where they finish
editor.eolmarkers = false
editor.eolmarkers.color = #999999

# bracket/brace highlighting
editor.brackethighlight = true
editor.brackethighlight.color = #007fff

editor.gutter.text.font = processing.mono,plain,11
#editor.gutter.text.color = #657d87
#editor.gutter.text.color = #587478
editor.gutter.text.color = #ffffff

# marker for breakpointed lines in left hand gutter (2 ascii characters)
#editor.gutter.breakpoint.marker = <>
#editor.gutter.breakpoint.marker.color = #4a545e

# marker for the current line in left hand gutter (2 ascii characters)
#editor.gutter.currentline.marker = ->
#editor.gutter.currentline.marker.color = #e27500

# bgcolor for the current (highlighted) line
editor.gutter.linehighlight.color=#9aa6c0

# left- and right-hand gutter color
editor.gutter.bgcolor = #2b52f6

# color of vertical separation line
#gutter.linecolor = #e9e9e9
# space (in px) added to left and right of gutter markers
editor.gutter.padding = 3

# squiggly line underneath errors in the editor
editor.error.underline.color = #f63943
# squiggly line underneath warnings
editor.warning.underline.color = #fed456
# lines next to the scrollbar showing where errors are located
editor.column.error.color = #ff5355
editor.column.warning.color = #fed456

# not in use?
#breakpoint.bgcolor = #f0f0f0
#currentline.bgcolor = #ffff96

errors.header.font = processing.sans,plain,12
errors.header.bgcolor = #131313
errors.header.fgcolor = #fff7d5
errors.row.font = processing.sans,plain,12
errors.row.bgcolor = #131313
errors.row.fgcolor = #fff7d5
errors.selection.bgcolor = #404040
errors.selection.fgcolor = #fff7d5
errors.selection.error.bgcolor = #e10c2f
errors.selection.warning.bgcolor = #FDF2E7
#errors.indicator.size = 3
errors.indicator.error.color = #9E0A0A
errors.indicator.warning.color = #EF8115

manager.tab.selected.color = #e6edfe
manager.tab.unselected.color = #2d4251
manager.tab.text.font = processing.sans,plain,14
manager.tab.text.selected.color = #000000
manager.tab.text.unselected.color = #ffffff
# orange circle for updates
manager.tab.update.color = #ed7f15
manager.tab.gradient.top = #132638
manager.tab.gradient.bottom = #122535
manager.tab.background = #132638

# tree for Examples and Sketchbook windows
tree.font = processing.sans,plain,12

# !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

# TEXT - KEYWORDS, LITERALS
# For an explanation of these tags, see Token.java:
# processing/app/src/processing/app/syntax/Token.java

editor.token.function1.style = #007fff,plain
editor.token.function2.style = #007fff,plain
editor.token.function3.style = #669900,plain
editor.token.function4.style = #007fff,plain

editor.token.keyword1.style = #00ff7f,plain
editor.token.keyword2.style = #00ff7f,plain
editor.token.keyword3.style = #669900,plain
editor.token.keyword4.style = #d94a7a,plain

# Primitive (int)
editor.token.keyword5.style = #ff7f00,plain
editor.token.keyword6.style = #00ff7f,plain

editor.token.literal1.style = #7D4793,plain
editor.token.literal2.style = #718a62,plain

editor.token.operator.style = #007fff,plain

editor.token.label.style = #666666,plain

editor.token.comment1.style = #666666,plain
editor.token.comment2.style = #666666,plain

editor.token.invalid.style = #666666,plain

[JSGauthier]

Thank you for this @behreajj . I Appreciate it. All in all the update is quite nice but something about that tone of blue gives me a headache.

[cansik]

This is great, thanks for the hint. I’ve just added a dark gradient…not a perfect match with the Processing accent color, but fine for now:

Here the additional settings, you can just paste them into the theme.txt file at the bottom to overwrite the default:

# custom adjustments for simple dark mode
# new tool bar colors
toolbar.gradient.top = #29323c
toolbar.gradient.bottom = #485563

# new tab bar (header) colors
header.gradient.top = #485563
header.gradient.bottom = #485563
header.tab.arrow.color = #ffffff

# new side bar colors
editor.gradient.top = #485563
editor.gradient.bottom = #485563

# new footer colors
footer.gradient.top = #485563
footer.gradient.bottom = #29323c

[glv]

Some other tweaks here:

"Welcome to Processing 4" window always launches

Hello, First off, congrats on Processing 4! It looks great! Yet, once the application launches, there is no way to stop the launch of the “Welcome to Processing 4” window, despite the tiny check box on the bottom not being checked (ie, the “Show this message on startup”). I’ve tried it checking the box, as well as unchecking, and rebooting. Is there a specific line in the Processing preferences file in the ~/Library folder that I can tweak to stop this? I need to stop it for an exhibition and…

:)

[Math_Machine]

I ended up just replacing the entire theme.txt file with that of Processing 3. Or rather, everything before the line full of exclamation points. Because as it turns out, everything after that line contains the colors for highlighted text (such as void turning cyan, float or int in a declaration turning orange, or a string of text turning purple). So I left that as is.

As a result, what I got was an interface looking almost identical to that in Processing 3. With one admittedly very large difference. It turns out that Processing 4 decided to use a slightly different color scheme than Processing 3, which in some cases causes a contrast difference that makes certain text difficult to see. I don’t really know how to fix this. Or I guess I do, I just don’t really feel like it. The best idea I can think of here involves taking screenshots of code from Processing 3, sampling the text pixel by pixel to find the approximate color. Then fiddle around with the theme file until you properly implement all the colors. Which, yeah, that’s why I don’t really feel like doing this. Especially since someone else is bound to come up with a more elegant / less stupid solution to this.

[hamoid]

To copy the changes from theme.txt (Processing 3) to theme.txt (Processing 4) I used https://meldmerge.org/ which shows the changed lines side by side and lets you click on each change to copy the line over to the other file.

Thanks for the idea

[jeremydouglass]

@hamoid

I used https://meldmerge.org/ which shows the changed lines side by side

Nice. For anyone using macOS with XCode installed, it has the tool “FileMerge”, which also gives a visual diff.

[jeremydouglass]

Also, from https://github.com/processing/processing4/wiki/Themes:

Processing 4 will have a new set of colors and overall design. The 4.0 alpha 6 has a new set of colors that are not final, but like the rest of the code in the alpha releases, we’re testing things out as we go. You can track progress of the UI design and other theming improvements here.

If you’d like to change the colors, you can specify your own by making a copy of theme.txt and placing it in your sketchbook folder. To find theme.txt :

• On macOS, right-click Processing.app and select Show Package Contents . Then navigate to Contents → Java → lib, and copy the theme.txt file to your sketchbook.
• On Windows and Linux, theme.txt can be found in the lib folder that’s part of the Processing download.

Be sure to copy , not move the theme.txt file. After making changes, restart Processing.

Starting with 4.0 alpha 6, all colors (and most fonts) are specified in the theme.txt file. This is a shift from Processing 3, which had some entries stored in preferences.txt and others in theme.txt .

[JSGauthier]

Thank you all who answered my question and other contributors!

It appears the newest solution to my query is now part of Processing 4.0 beta 5 (February 3, 2022).

Download

Now one need only select Tools/Theme Selector/ from the menu tab and choose from the many options available!

Thanks to all who contribute to the Processing Foundation!