Skip to content

Instantly share code, notes, and snippets.

@hamoid
Last active March 3, 2023 03:11
Show Gist options
  • Star 14 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save hamoid/10a6ba90af15fd3d4e80 to your computer and use it in GitHub Desktop.
Save hamoid/10a6ba90af15fd3d4e80 to your computer and use it in GitHub Desktop.
Processing 3.5.4 IDE dark theme. See thread for 4.0 version (haven't tested it, 4.0b4 crashes for me).
# Processing 3.5.4 IDE - dark theme
# Updated version by @RandomGuy3015
# File location: processing-3.5.4/lib/theme.txt
# Make a backup of the original theme.txt
# Then replace it with this code
# Code colors can be adjusted in the preferences.txt file
# STATUS
# Status messages (1 file added to sketch, errors, etc)
status.notice.fgcolor = #949494
status.notice.bgcolor = #505050
status.error.fgcolor = #ffffff
status.error.bgcolor = #9E0A0A
status.warning.bgcolor = #662000
status.warning.fgcolor = #000000
status.url.fgcolor = #cc9900
status.font = processing.sans,plain,13
# For the clipboard icon, needs to be a little larger on macOS
status.emoji.font = Dialog,plain,19
status.emoji.font.macosx = Dialog,plain,22
# HEADER TABS
# Settings for the tab area at the top.
header.text.font = processing.sans,bold,14
header.text.selected.color = #000000
header.text.unselected.color = #ffffff
header.tab.arrow.color = #ffffff
header.gradient.top = #132638
header.gradient.bottom = #122535
header.tab.selected.color = #949494
header.tab.unselected.color = #505050
header.tab.modified.color = #ef8115
# FOOTER TABS
footer.text.font = processing.sans,bold,12
footer.text.selected.color = #e0fffd
footer.text.unselected.color = #95adb0
footer.tab.arrow.color = #ffffff
footer.gradient.top = #132638
footer.gradient.bottom = #122535
footer.tab.selected.color = #949494
footer.tab.unselected.color = #505050
# updates orange #eb7f15
footer.updates.color = #ed7f15
# CONSOLE
# The font is handled by preferences, so its size/etc are modifiable.
console.color = #1C1C1C
console.output.color = #cccccc
# text color for errors printed in the console
console.error.color = #ff3000
# TOOLBAR BUTTONS
buttons.bgcolor = #1C1C1C
# for the debug and mode buttons
#reversed.gradient.top = #10212f
#reversed.gradient.bottom = #122637
## 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 = #CCCCCC
divider.dot.diameter = 3
divider.dot.color = #505050
# TOOLBAR BUTTON TEXT
toolbar.rollover.font = processing.sans,plain,12
toolbar.rollover.color = #ffffff
toolbar.gradient.top = #142a3e
toolbar.gradient.bottom = #132638
# MODE SELECTOR
#mode.title.font = processing.sans,bold,15
mode.title.font = processing.sans,plain,12
mode.title.color = #ffffff
# outline color of the mode button
#mode.button.color = #C6c6c6
#mode.button.gap = 13
#mode.arrow.width
#mode.background.color = #3D5362
# stolen from gradient bottom
mode.background.color = #132638
mode.outline.color = #3a505e
# EDITOR - DETAILS
# foreground and background colors, change fgcolor to change font color
editor.fgcolor = #d1d1d1
editor.bgcolor = #1C1C1C
editor.gradient.top = #122535
editor.gradient.bottom = #010305
# highlight for the current line
#editor.linehighlight.color=#e2e2e2
editor.linehighlight.color=#303030
# highlight for the current line
editor.linehighlight=true
editor.caret.color = #BABDB6
editor.selection.color = #5d4875
# area that's not in use by the text (replaced with tildes)
editor.invalid.style = #7e7e7e,bold
# 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 = #006699
editor.gutter.text.font = processing.mono,plain,11
#editor.gutter.text.color = #657d87
#editor.gutter.text.color = #587478
editor.gutter.text.color = #bbd6d5
# 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=#587478
# left- and right-hand gutter color
editor.gutter.bgcolor = #122535
# 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 = #C40E0E
# squiggly line underneath warnings
editor.warning.underline.color = #ffc30e
# lines next to the scrollbar showing where errors are located
editor.column.error.color = #9F1613
editor.column.warning.color = #ffc30e
# not in use?
#breakpoint.bgcolor = #f0f0f0
#currentline.bgcolor = #ffff96
errors.header.font = processing.sans,plain,12
errors.header.bgcolor = #EBEBEB
errors.header.fgcolor = #484848
errors.row.font = processing.sans,plain,12
errors.row.fgcolor = #484848
errors.row.bgcolor = #FFFFFF
errors.selection.fgcolor = #242424
errors.selection.bgcolor = #E5E5E5
errors.selection.error.bgcolor = #F5E6E6
errors.selection.warning.bgcolor = #FDF2E7
#errors.indicator.size = 3
errors.indicator.error.color = #9E0A0A
errors.indicator.warning.color = #EF8115
manager.tab.selected.color = #e0fffd
manager.tab.unselected.color = #2d4251
manager.tab.text.font = processing.sans,bold,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
@hackingmath
Copy link

Worked like a charm! Great job!
Peter Farrell
California
farrellpolymath.com

@CanadianBlaze34
Copy link

Sorry, but can I ask what language this is written in?

@tbart239
Copy link

tbart239 commented Sep 19, 2018

Sorry, but can I ask what language this is written in?

@CanadianBlaze34 this is just a plain-text file. It's nothing other than plain English that gets parsed by the Processing PDE.

@RandomGuy3015
Copy link

This doesn't work anymore, here is an updated version for Processing 3.5.4:

# STATUS
# Status messages (1 file added to sketch, errors, etc)
status.notice.fgcolor = #949494
status.notice.bgcolor = #505050
status.error.fgcolor = #ffffff
status.error.bgcolor = #9E0A0A
status.warning.bgcolor = #662000
status.warning.fgcolor = #000000
status.url.fgcolor = #cc9900
status.font = processing.sans,plain,13
# For the clipboard icon, needs to be a little larger on macOS
status.emoji.font = Dialog,plain,19
status.emoji.font.macosx = Dialog,plain,22

# HEADER TABS
# Settings for the tab area at the top.
header.text.font = processing.sans,bold,14
header.text.selected.color = #000000
header.text.unselected.color = #ffffff
header.tab.arrow.color = #ffffff
header.gradient.top = #132638
header.gradient.bottom = #122535
header.tab.selected.color = #949494
header.tab.unselected.color = #505050
header.tab.modified.color = #ef8115

# FOOTER TABS
footer.text.font = processing.sans,bold,12
footer.text.selected.color = #e0fffd
footer.text.unselected.color = #95adb0
footer.tab.arrow.color = #ffffff
footer.gradient.top = #132638
footer.gradient.bottom = #122535
footer.tab.selected.color = #949494
footer.tab.unselected.color = #505050
# updates orange #eb7f15
footer.updates.color = #ed7f15

# CONSOLE
# The font is handled by preferences, so its size/etc are modifiable.
console.color = #1C1C1C
console.output.color = #cccccc
# text color for errors printed in the console
console.error.color = #ff3000

# TOOLBAR BUTTONS
buttons.bgcolor = #1C1C1C

# for the debug and mode buttons
#reversed.gradient.top = #10212f
#reversed.gradient.bottom = #122637

## 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 = #CCCCCC
divider.dot.diameter = 3
divider.dot.color = #505050

# TOOLBAR BUTTON TEXT
toolbar.rollover.font = processing.sans,plain,12
toolbar.rollover.color = #ffffff
toolbar.gradient.top = #142a3e
toolbar.gradient.bottom = #132638

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


# EDITOR - DETAILS

# foreground and background colors, change fgcolor to change font color
editor.fgcolor = #d1d1d1
editor.bgcolor = #1C1C1C

editor.gradient.top = #122535
editor.gradient.bottom = #010305

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

editor.caret.color = #BABDB6
editor.selection.color = #5d4875

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

# 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 = #006699

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

# 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=#587478

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

# 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 = #C40E0E
# squiggly line underneath warnings
editor.warning.underline.color = #ffc30e
# lines next to the scrollbar showing where errors are located
editor.column.error.color = #9F1613
editor.column.warning.color = #ffc30e

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

errors.header.font = processing.sans,plain,12
errors.header.bgcolor = #EBEBEB
errors.header.fgcolor = #484848
errors.row.font = processing.sans,plain,12
errors.row.fgcolor = #484848
errors.row.bgcolor = #FFFFFF
errors.selection.fgcolor = #242424
errors.selection.bgcolor = #E5E5E5
errors.selection.error.bgcolor = #F5E6E6
errors.selection.warning.bgcolor = #FDF2E7
#errors.indicator.size = 3
errors.indicator.error.color = #9E0A0A
errors.indicator.warning.color = #EF8115

manager.tab.selected.color = #e0fffd
manager.tab.unselected.color = #2d4251
manager.tab.text.font = processing.sans,bold,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

@hamoid
Copy link
Author

hamoid commented Nov 19, 2020

Thank you @RandomGuy3015 ! :)

@john7-bit
Copy link

It works Great for the latest version - Processing 3.5.4. Thank you RandomGuy3015

@prakharraj1302
Copy link

Where is the theme.txt folder in Mac OS X ?

@hamoid
Copy link
Author

hamoid commented Nov 5, 2021

Hi @pete1302 , the folder location for Mac is described at https://github.com/jeffThompson/DarkProcessingTheme_3.0

@onionSoap
Copy link

onionSoap commented Jan 28, 2022

Thanks, this really saved my eyes! For anyone else using this, here's an updated version for Processing 4.0:

# STATUS
# Status messages (1 file added to sketch, errors, etc)
status.notice.fgcolor = #161e3f
status.notice.bgcolor = #505050
status.error.fgcolor = #ffffff
status.error.bgcolor = #9E0A0A
status.warning.bgcolor = #662000
status.warning.fgcolor = #000000
status.url.fgcolor = #cc9900
status.font = processing.sans,plain,13
# For the clipboard icon, needs to be a little larger on macOS
status.emoji.font = Dialog,plain,19
status.emoji.font.macosx = Dialog,plain,22

# HEADER TABS
# Settings for the tab area at the top.
header.text.font = processing.sans,bold,14
header.text.selected.color = #000000
header.text.unselected.color = #adbcd6
header.tab.arrow.color = #ffffff
header.gradient.top = #132638
header.gradient.bottom = #122535
header.tab.selected.color = #949494
header.tab.unselected.color = #505050
header.tab.modified.color = #ef8115

# FOOTER TABS
footer.text.font = processing.sans,bold,12
footer.text.selected.color = #e0fffd
footer.text.unselected.color = #95adb0
footer.tab.arrow.color = #ffffff
footer.gradient.top = #132638
footer.gradient.bottom = #122535
footer.tab.selected.color = #949494
footer.tab.unselected.color = #505050
# updates orange #eb7f15
footer.updates.color = #ed7f15

# CONSOLE
# The font is handled by preferences, so its size/etc are modifiable.
console.color = #1C1C1C
console.output.color = #cccccc
# text color for errors printed in the console
console.error.color = #ff3000

# TOOLBAR BUTTONS
buttons.bgcolor = #1C1C1C

# for the debug and mode buttons
#reversed.gradient.top = #10212f
#reversed.gradient.bottom = #122637

## 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 = #CCCCCC
divider.dot.diameter = 3
divider.dot.color = #505050

# TOOLBAR BUTTON TEXT
toolbar.rollover.font = processing.sans,plain,12
toolbar.rollover.color = #ffffff
toolbar.gradient.top = #142a3e
toolbar.gradient.bottom = #132638

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


# EDITOR - DETAILS

# foreground and background colors, change fgcolor to change font color
editor.fgcolor = #d1d1d1
editor.bgcolor = #1C1C1C

editor.gradient.top = #122535
editor.gradient.bottom = #010305

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

editor.caret.color = #BABDB6
editor.selection.color = #5d4875

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

# 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 = #006699

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

# 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=#587478

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

# 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 = #C40E0E
# squiggly line underneath warnings
editor.warning.underline.color = #ffc30e
# lines next to the scrollbar showing where errors are located
editor.column.error.color = #9F1613
editor.column.warning.color = #ffc30e

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

errors.header.font = processing.sans,plain,12
errors.header.bgcolor = #EBEBEB
errors.header.fgcolor = #484848
errors.row.font = processing.sans,plain,12
errors.row.fgcolor = #484848
errors.row.bgcolor = #FFFFFF
errors.selection.fgcolor = #242424
errors.selection.bgcolor = #E5E5E5
errors.selection.error.bgcolor = #F5E6E6
errors.selection.warning.bgcolor = #FDF2E7
#errors.indicator.size = 3
errors.indicator.error.color = #9E0A0A
errors.indicator.warning.color = #EF8115

manager.tab.selected.color = #e0fffd
manager.tab.unselected.color = #2d4251
manager.tab.text.font = processing.sans,bold,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 = #006699,plain
editor.token.function2.style = #006699,plain
editor.token.function3.style = #669900,plain
editor.token.function4.style = #006699,bold

editor.token.keyword1.style = #33997e,plain
editor.token.keyword2.style = #33997e,plain
editor.token.keyword3.style = #669900,plain
editor.token.keyword4.style = #d94a7a,plain
editor.token.keyword5.style = #e2661a,plain
editor.token.keyword6.style = #33997e,plain

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

editor.token.operator.style = #006699,plain

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

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

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

(it's just RandomGuy3015's version, but with everything past the !!!! added)

@FakeFrenchGuy
Copy link

maybe im doing something wrong but this doesnt seem to do anything for me? can anyone give me a hand?

@hamoid
Copy link
Author

hamoid commented May 17, 2022

What did you try @FakeFrenchGuy ?

@gogimaschiso1
Copy link

hallo everything is working great! but do someone know how to get this white boxes also in dark mode ?

Screenshot 2022-07-17 143449

@biomurph
Copy link

Yo,
I'm on a mac, and in processing 4.0b8 there is a folder in the app called lib where all this happens.
Contents > Java > lib
The theme.txt is under lib but also there is a folder called themes
It looks like a future feature, but in there are 16 different TXT files that can be copy-pasta or moved and renamed theme.txt in the parent folder to change. Super sweet! There's even an image that shows the available theme colors, but it is out of order from the file list (? is it? have not correlated). I am running with the pyrite.txt and it hasn't crashed yet...

Enjoy a nice dark theme!

4x4

@SteelAtlas
Copy link

hey i changed my current theme.txt with pyrite and then named it to theme.txt but its not working

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment