IDE Arduino With Dark Theme

In this scheme, we will work with the IDE Arduino and transform the theme of this programming environment from light to dark to improve the visibility of the source code. This will permit a less tiresome viewing experience.

Concerning this subject, we have located a file made by Jeff Thompson, who is a professor of art and technology in the United States. With a base coming from this article, let's change the configuration files to enable the color change in the Arduino IDE.

We advise you to download the Jeff Thompson file from GITHUB. He has modified certain files in the bitmaps and made them accessible at https://github.com/jeffThompson/DarkArduinoTheme. You can also download Notepad ++, which is very good for editing the XML file, or even the C language file.

Also, at annystudio.com, there is a free software program called Jcpicker. It does the RGB conversion to the hexadecimal values.

The readme exposes that the last review that Jeff Thompson did was in version 1.6.6+ of the Arduino, but we tested in version 1.84. It worked well.

To change the color of the Arduino IDE you must unzip the file DarkArduinoTheme.zip that is in Github and copy in the folder of the Arduino.

I recommend making a backup of the theme folder if you want to restore the original colors.

For MAC OS ~ / Applications / Arduino.app / Contents / Java / lib \ theme

For Windows `C: \ Program Files (x86) \ Arduino \ lib \ theme`.

To create custom themes, you need to edit the theme.txt file (an XML file inside the syntax folder), and the button files. Remember that to choose a color, you need to know what value corresponds with the hexadecimal.

Jeff Thompson created a dark theme, but we noticed that the word Setup, in dark green, was not good for visibility. So, we changed it to a light green, which can be checked in a theme.txt file. This is available for download here in the blog, just below.

See de xml version on http://www.fernandok.com/2017/12/ide-arduino-com-tema-escuro.html

#FUNCTIONS COLOR    #D35400 - ORANGE   KEYWORD1
#FUNCTIONS COLOR   #D35400 - ORANGE   KEYWORD2
#STRUCTURE COLORS    #5E6D03 - GREEN   KEYWORD3
#VARIABLES COLOR     #00979C - BLUE    LITERAL1
 
#ERROR COLOR     #A61717 - RED
#COMMENTS // COLOR   #95A5A6 - LIGHT GREY
#COMMENTS /**/ COLOR  #434F54 - DARK GREY
 
 
# GUI - STATUS
status.notice.fgcolor = #002325
status.notice.bgcolor = #404040
status.error.fgcolor = #FFFFFF
status.error.bgcolor = #E34C00
status.edit.fgcolor = #000000
status.edit.bgcolor = #F1B500
status.font = SansSerif,plain,12
 
# GUI - TABS
# settings for the tabs at the top
# (tab images are stored in the lib/theme folder)
header.bgcolor = #404040
header.text.selected.color = #323232
header.text.unselected.color = #3C3C3C
header.text.font = SansSerif,plain,12
 
# GUI - CONSOLE
console.font = Monospaced,plain,11
console.font.macosx = Monaco,plain,10
console.color = #000000
console.output.color = #eeeeee
console.error.color = #E34C00
 
# GUI - BUTTONS
buttons.bgcolor = #505050
buttons.status.font = SansSerif,plain,12
buttons.status.color = #ffffff
 
# GUI - LINESTATUS
linestatus.color = #ffffff
linestatus.bgcolor = #404040
 
# EDITOR - DETAILS
 
# foreground and background colors
editor.fgcolor = #4661FF
editor.bgcolor = #202020
 
# highlight for the current line
editor.linehighlight.color=#333333
# highlight for the current line
editor.linehighlight=true
 
# caret blinking and caret color
editor.caret.color = #a0a0a0
 
# color to be used for background when 'external editor' enabled
editor.external.bgcolor = #c8d2dc
 
# selection color
editor.selection.color = #dd8800
 
# 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 = #006699
 
# bracket/brace highlighting
editor.brackethighlight = true
editor.brackethighlight.color = #006699
 
 
# TEXT - KEYWORDS
 
# FUNCTIONS
editor.keyword1.style = #4661FF,bold
editor.data_type.style = #BC3535,bold
 
# METHODS
editor.keyword2.style = #BC3535,plain
editor.function.style = #BC3535,plain
 
# STRUCTURES
editor.keyword3.style = #00D600,plain
editor.reserved_word.style = #00D600,plain
 
 
# TEXT - LITERALS
 
# constants & datatypes
editor.literal1.style = #006699,plain
 
# p5 built in variables: e.g. mouseX, width, pixels
editor.literal2.style = #00979C,plain
editor.variable.style = #00979C,plain
editor.reserved_word_2.style = #00979C,plain
editor.literal_boolean.style = #00979C,plain
editor.literal_char.style = #00979C,plain
editor.literal_string_double_quote.style = #00979C,plain
editor.preprocessor.style = #00d600,plain
 
# http://www.arduino.cc/ - GET RID OF UNDERLINE!
editor.url.style = #81A421,plain
 
# e.g. + - = /
editor.operator.style = #aaaaaa,plain
 
 
# ?? maybe this is for words followed by a colon
# like in case statements or goto
editor.label.style = #7e7e7e,bold
 
 
# TEXT - COMMENTS
editor.comment1.style = #aaaaaa,plain
editor.comment2.style = #aaaaaa,plain
 
 
# LINE STATUS - editor line number status bar at the bottom of the screen
linestatus.font    = SansSerif,plain,10
linestatus.height  = 20
 
# GUI - PLOTTING
# color cycle created via colorbrewer2.org
plotting.bgcolor = #ffffff
plotting.color = #ffffff
plotting.graphcolor.size = 4
plotting.graphcolor.00 = #2c7bb6
plotting.graphcolor.01 = #fdae61
plotting.graphcolor.02 = #d7191c
plotting.graphcolor.03 = #abd9e9

In Jcpicker and Notepad ++ images, we noticed that the dark color is good for programming. In this part, I show an example of a default.xml file that can also have its RGB colors changed.