IDE Arduino With Dark Theme

171

9

Posted

Introduction: 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.

Step 1: Download

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.

Step 2: Readme

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`.

Step 3: ### Creating Your Own Colors

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.

Step 4: Syntax

Step 5: Theme.txt File

#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

Step 6: JCPICKER.exe and Notepad ++

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.

Share

    Recommendations

    • Science of Cooking

      Science of Cooking
    • Pocket-Sized Contest

      Pocket-Sized Contest
    • Microcontroller Contest

      Microcontroller Contest
    user

    We have a be nice policy.
    Please be positive and constructive.

    Tips

    Questions

    Comments