Dark Theme for Arduino IDE

In this tutorial, I will show you how to install the dark theme for your Arduino IDE for the reason of overexposure to the screen light.

Aug 27, 2018

373818 views

299 respects

Components and supplies

1

Arduino UNO

Apps and platforms

1

Arduino IDE

Project description

Code

Github

Comments

Only logged in users can leave comments

liam4905

a year ago

Lovely.... thanks

rahulkhanna

9 months ago

Thank you!

PRASS

2 years ago

Thank you

Anonymous user

2 years ago

Excellent...exactly what I was looking for.....perfect dark theme. Thank you for your efforts...appreciated..

Anonymous user

2 years ago

Gracias por este trabajo, amigo. Siempre me resultó fatigante para la vista la pantalla blanca , a partir de ahora será mucho mas placentero trabajar con el IDE de Arduino. Felcitaciones !!

Anonymous user

2 years ago

Hello friend, I have a macbook with macOS Mojave and I want to know, there is some way to use this on macOS?

Anonymous user

2 years ago

This is really nice. My only question is ... how can I make it so that brackets, curly braces, and parenthesis do not make the background white when one is selected? For example, when the mouse cursor is on a parenthesis for someFunction(), I can't see the mouse cursor because the background is white.

Anonymous user

2 years ago

The Jeff Thomson's theme sets in the default.xml file placed in the syntax folder: <matchedBracket fg="ffffff" bg="aaaaaa" highlightBoth="true" animate="true"/> (see https://forum.arduino.cc/index.php?topic=564331.msg4364446#msg4364446 to know the meaning). Well, you just need to remove the bg="aaaaaa". Then both parenthesis are still indicated but without highlighting them. In my case the path is C:\\Program Files (x86)\\Arduino\\lib\ heme\\syntax\\default.xml. You can set the default.xml file in order to indicate the opposite parenthesis only by changing highlightBoth from true to false in the same line. You can also delete all settings for matchedBracket except fg (it is mandatory).

Anonymous user

2 years ago

I installed this theme but I would like to make the numbers, (currently yellow) a different color. Where in the theme.txt file are the number's color set? Also, is there somewhere where I can find a definition of the commands in that file? Thank you.

rahulkhanna

2 years ago

Hi! To change the color of the numbers, Open the default.xml file. There you can find the following lines: <style token="LITERAL_NUMBER_DECIMAL_INT" fg="FFCD22"/> <style token="LITERAL_NUMBER_FLOAT" fg="FFCD22"/> <style token="LITERAL_NUMBER_HEXADECIMAL" fg="FFCD22"/> You can change the color by replacing 'FFCD22' in the above lines with the respective hex values of the color. Do try and let me know the feedback. Cheers!

Anonymous user

2 years ago

i just say IT WORKS THANK YOU!!! looks wery good

Anonymous user

2 years ago

Why is this line colored green ? I found that whenever " and ) or ( come with each other, the green line will show. Can anyone help me ? Image: https://scontent.fvca1-3.fna.fbcdn.net/v/t1.15752-9/279520197_605225507218906_1845962854030174379_n.png?_nc_cat=103&ccb=1-7&_nc_sid=ae9488&_nc_ohc=iH84Yi6Dl90AX8712mh&_nc_ht=scontent.fvca1-3.fna&oh=03_AVI8NERpHDp6NCQvQjmSs1Q_qp8xJqFjidnXIg8BxKozOg&oe=62BF2739

Anonymous user

2 years ago

If you have downloaded the arduino app via Microsoft store you won't be able to find the arduino installed folder. That's because its located at "WindowsApps" which is located in :C:\\Program Files\\WindowsApps" and it's hidden. But it can be unlocked.See how its done : https://www.youtube.com/watch?v=lEB9_JCaqFY or From : https://www.maketecheasier.com/access-windowsapps-folder-windows-10/

Anonymous user

2 years ago

Hi. I just installed your dark theme on my Arch Linux PC. Works fine. Thank you. Since I updated my JDK to OpenJDK 11 (jre-openjdk 11.0.3.u4-1) I have a small problem with menus and the debug window (bottom). Both: with the original theme and your dark theme. In the debug window there is not a black but a light gray background making strange looking compiler and run time messages with black background. In the menus there are missing borders from check boxes. I think, this is a Java problem, but I don't understand, where to configure.

rahulkhanna

2 years ago

I'll check once on a Linux PC and try to rectify your issue. Thanks for your interest.

Anonymous user

2 years ago

How do you make a post like this........ I just knew this website Pls tell me!!

rahulkhanna

2 years ago

First, make a project that you were longing for. Then try to write an article about how you made it and what are the difficulties you faced while doing the project. Give a hit. All the best!

Anonymous user

2 years ago

Dude...It's just awesome. Thanks for the dark theme. It reduces stress on my eyes and the ide looks cool.

Anonymous user

2 years ago

Queria saber como fazer para deixar a IDE em modo escuro no linux, ai foi explicado para o windows, se alguem souber.

Anonymous user

2 years ago

Thanks for sharing this super easy way to put a dark theme into Arduino IDE! It worked perfectly on arduino 1.8.9!

Anonymous user

2 years ago

Confirmed this works under macOS with IDE 1.8.13. Need to ensure the *contents* of the theme folder are zipped and not the theme folder itself.

william74370

2 years ago

thanks

Anonymous user

2 years ago

Absolutely loving it! Thank you!

Anonymous user

2 years ago

Hello, how do you install the theme using the Windows App? The theme folder is protected and cannot be changed.

Anonymous user

2 years ago

Hi, You can make a "theme" folder in the sketchbook (Documents/Arduino for me) and put theme into a zip file. When you open the .zip file you should see files, not a single folder called "theme"

Anonymous user

2 years ago

The orange highlight colour when selecting text is terrible. So I went into the theme.txt file and changed this line, " # selection color editor.selection.color = #4f4f4f " #4f4f4f is light gray but you can make it whatever you want.

Anonymous user

2 years ago

The orange text highlight colour makes the text almost unreadable, change the highlight section from theme.txt with this. # selection color editor.selection.color = #4a4845

Anonymous user

2 years ago

Amazing! Thank you so much!

Anonymous user

2 years ago

Current installation is not user friendly. I'm improving installation in this pull request: https://github.com/arduino/Arduino/pull/10202 Now to enable a true Dark Mode, is need a mod on IDE , i done in this: https://github.com/arduino/Arduino/pull/10203 I made the build with these and other improvements and made available the link below, who can test it would be cool. https://github.com/ricardojlrufino/Arduino/releases

Anonymous user

2 years ago

It worked perfectly!! thank u so much !! easy to install and easy to download

Anonymous user

2 years ago

Heads up that Arduino folder in Windows 10 is located in "C:\\Program Files\\WindowsApps\\". By default you have no access to the folder so if somebody want to install the dark theme first google how you can access the folder. Here is the link I used to learn how to do that https://www.maketecheasier.com/access-windowsapps-folder-windows-10/. Hope the info is useful.

Anonymous user

2 years ago

Thank you, it was exactly what I was looking for to have some comfort while using Arduino. =D

Anonymous user

2 years ago

Is there a way to extend the theme to the Serial monitor and plotter?

Anonymous user

2 years ago

this tutorial doesn't seem to work anymore for **Arduino IDE 1.8.13** The repo [DarkArduinoTheme](https://github.com/jeffThompson/DarkArduinoTheme) was archived by JeffThomson.

Anonymous user

2 years ago

Hi there, I discovered an easier way to don't need to replace anything and the new theme dark will come on the theme list on Arduino Preferences. https://youtu.be/puuOu03p__0

Anonymous user

2 years ago

Thank you!!!

rahulkhanna

2 years ago

Thank you for your support!

Anonymous user

2 years ago

Tried this, fantastic, so restful on the eyes. find it easier to find any code errors. 5*****

rahulkhanna

2 years ago

Thank you for your support!

Anonymous user

2 years ago

Thanks for this. The Dark Theme is easier for me to see and will help others with a visual impairment as, I have found out, it is not possible to change the font to bold etc. in the editor preferences. This theme makes it much easier for me. Thank you :-)

e-harvest

2 years ago

I have an issue where i can not open the Arduino file location on drive c where it is installed. How can i be able to change the theme?

Anonymous user

2 years ago

Arduino IDE 1.8.6 and newer allows you to place the theme in a .zip inside the sketchbook. * Support selectable user-defined themes. User's theme are zip files inside the sketchbook "theme" folder

Anonymous user

2 years ago

Cool, I didn' know that.

Anonymous user

2 years ago

Thanks, I just updated my IDE and wanted the dark theme again. Sorry that you are not actively working on this project anymore. What are you up to now? I will check out your GitHub repository for more great items. Thanks again, MT.

rahulkhanna

2 years ago

You're welcome! I'm glad you were able to find the dark theme again. As for what I'm up to now, I am currently working with robotics & automation products and couldn't actively work on projects. However, feel free to check out my GitHub repository for other projects that may be of interest to you. We try to make new projects consistanty. Thank you for your kind words and support!

rahulkhanna

2 years ago

You're welcome! I'm glad you were able to find the dark theme again. As for what I'm up to now, I am currently working with robotics & automation products and couldn't actively work on projects. However, feel free to check out my GitHub repository for other projects that may be of interest to you. We try to make new projects consistanty. Thank you for your kind words and support!

Anonymous user

2 years ago

It also works fine on Kali Linux, just extract the .zip file and copy "theme" folder to .../Arduino/

Anonymous user

2 years ago

But, the color of //... and /*...*/ look like the "{}" it can make confuse!

Anonymous user

2 years ago

it works also with 1.6.5 It's a little too dark for me, so I've to play around with some colors. Thanks for the theme

Anonymous user

2 years ago

I love this theme. I only change the dark green to a very light grey. Thx

Anonymous user

2 years ago

Sorry. How did you do that ? I want to change some text colors. Thanks

Anonymous user

2 years ago

Use a color picker to find which color to change, then find the hex number in the xml and replace it with yours. Make a copy before modifying anything.

Anonymous user

2 years ago

On a Mac, this is the green I used in theme.txt. It looks much better. #STRUCTURE COLORS #7ed119 - GREEN You can find this file here: /Applications/Arduino.app/Contents/Java/lib/theme/theme.txt

Anonymous user

2 years ago

Why is this line colored green ? I found that whenever " and ) or ( come with each other, the green line will show. Can anyone help me ? Image: https://scontent.fvca1-3.fna.fbcdn.net/v/t1.15752-9/279520197_605225507218906_1845962854030174379_n.png?_nc_cat=103&ccb=1-7&_nc_sid=ae9488&_nc_ohc=iH84Yi6Dl90AX8712mh&_nc_ht=scontent.fvca1-3.fna&oh=03_AVI8NERpHDp6NCQvQjmSs1Q_qp8xJqFjidnXIg8BxKozOg&oe=62BF2739

Anonymous user

3 years ago

The orange text highlight colour makes the text almost unreadable, change the highlight section from theme.txt with this. # selection color editor.selection.color = #4a4845

Un4gvn

3 years ago

Thanks, I just updated my IDE and wanted the dark theme again. Sorry that you are not actively working on this project anymore. What are you up to now? I will check out your GitHub repository for more great items. Thanks again, MT.

projectempty

3 years ago

But, the color of //... and /*...*/ look like the "{}" it can make confuse!

projectempty

3 years ago

It also works fine on Kali Linux, just extract the .zip file and copy "theme" folder to .../Arduino/

andre_barros

4 years ago

Thank you, it was exactly what I was looking for to have some comfort while using Arduino. =D

Anonymous user

4 years ago

If you have downloaded the arduino app via Microsoft store you won't be able to find the arduino installed folder. That's because its located at "WindowsApps" which is located in :C:\\Program Files\\WindowsApps" and it's hidden. But it can be unlocked.See how its done : https://www.youtube.com/watch?v=lEB9_JCaqFY or From : https://www.maketecheasier.com/access-windowsapps-folder-windows-10/

Anonymous user

4 years ago

Gracias por este trabajo, amigo. Siempre me resultó fatigante para la vista la pantalla blanca , a partir de ahora será mucho mas placentero trabajar con el IDE de Arduino. Felcitaciones !!

e-harvest

4 years ago

I have an issue where i can not open the Arduino file location on drive c where it is installed. How can i be able to change the theme?

Un4gvn

2 years ago

Cool, I didn' know that.

Anonymous user

2 years ago

Arduino IDE 1.8.6 and newer allows you to place the theme in a .zip inside the sketchbook. * Support selectable user-defined themes. User's theme are zip files inside the sketchbook "theme" folder

Anonymous user

4 years ago

Thanks for sharing this super easy way to put a dark theme into Arduino IDE! It worked perfectly on arduino 1.8.9!

Anonymous user

4 years ago

Confirmed this works under macOS with IDE 1.8.13. Need to ensure the *contents* of the theme folder are zipped and not the theme folder itself.

Anonymous user

4 years ago

this tutorial doesn't seem to work anymore for **Arduino IDE 1.8.13** The repo [DarkArduinoTheme](https://github.com/jeffThompson/DarkArduinoTheme) was archived by JeffThomson.

Anonymous user

4 years ago

Queria saber como fazer para deixar a IDE em modo escuro no linux, ai foi explicado para o windows, se alguem souber.

Anonymous user

4 years ago

i just say IT WORKS THANK YOU!!! looks wery good

rahulkhanna

2 years ago

Thank you for your support!

Anonymous user

4 years ago

Hi there, I discovered an easier way to don't need to replace anything and the new theme dark will come on the theme list on Arduino Preferences. https://youtu.be/puuOu03p__0

Anonymous user

4 years ago

Amazing! Thank you so much!

Anonymous user

4 years ago

Heads up that Arduino folder in Windows 10 is located in "C:\\Program Files\\WindowsApps\\". By default you have no access to the folder so if somebody want to install the dark theme first google how you can access the folder. Here is the link I used to learn how to do that https://www.maketecheasier.com/access-windowsapps-folder-windows-10/. Hope the info is useful.

Anonymous user

5 years ago

The orange highlight colour when selecting text is terrible. So I went into the theme.txt file and changed this line, " # selection color editor.selection.color = #4f4f4f " #4f4f4f is light gray but you can make it whatever you want.

Anonymous user

5 years ago

Current installation is not user friendly. I'm improving installation in this pull request: https://github.com/arduino/Arduino/pull/10202 Now to enable a true Dark Mode, is need a mod on IDE , i done in this: https://github.com/arduino/Arduino/pull/10203 I made the build with these and other improvements and made available the link below, who can test it would be cool. https://github.com/ricardojlrufino/Arduino/releases

JRUSCH

5 years ago

Is there a way to extend the theme to the Serial monitor and plotter?

JRUSCH

5 years ago

Is there a way to extend the theme to the Serial monitor and plotter?

Anonymous user

5 years ago

Hello, how do you install the theme using the Windows App? The theme folder is protected and cannot be changed.

Anonymous user

2 years ago

Hi, You can make a "theme" folder in the sketchbook (Documents/Arduino for me) and put theme into a zip file. When you open the .zip file you should see files, not a single folder called "theme"

homebrew_ham

5 years ago

Thanks for this. The Dark Theme is easier for me to see and will help others with a visual impairment as, I have found out, it is not possible to change the font to bold etc. in the editor preferences. This theme makes it much easier for me. Thank you :-)

Anonymous user

5 years ago

Excellent...exactly what I was looking for.....perfect dark theme. Thank you for your efforts...appreciated..

rahulkhanna

2 years ago

Thank you for your support!

Anonymous user

5 years ago

This is really nice. My only question is ... how can I make it so that brackets, curly braces, and parenthesis do not make the background white when one is selected? For example, when the mouse cursor is on a parenthesis for someFunction(), I can't see the mouse cursor because the background is white.

Anonymous user

2 years ago

The Jeff Thomson's theme sets in the default.xml file placed in the syntax folder: <matchedBracket fg="ffffff" bg="aaaaaa" highlightBoth="true" animate="true"/> (see https://forum.arduino.cc/index.php?topic=564331.msg4364446#msg4364446 to know the meaning). Well, you just need to remove the bg="aaaaaa". Then both parenthesis are still indicated but without highlighting them. In my case the path is C:\\Program Files (x86)\\Arduino\\lib\ heme\\syntax\\default.xml. You can set the default.xml file in order to indicate the opposite parenthesis only by changing highlightBoth from true to false in the same line. You can also delete all settings for matchedBracket except fg (it is mandatory).

Anonymous user

5 years ago

Hello friend, I have a macbook with macOS Mojave and I want to know, there is some way to use this on macOS?

Anonymous user

5 years ago

I installed this theme but I would like to make the numbers, (currently yellow) a different color. Where in the theme.txt file are the number's color set? Also, is there somewhere where I can find a definition of the commands in that file? Thank you.

rahulkhanna

2 years ago

Hi! To change the color of the numbers, Open the default.xml file. There you can find the following lines: <style token="LITERAL_NUMBER_DECIMAL_INT" fg="FFCD22"/> <style token="LITERAL_NUMBER_FLOAT" fg="FFCD22"/> <style token="LITERAL_NUMBER_HEXADECIMAL" fg="FFCD22"/> You can change the color by replacing 'FFCD22' in the above lines with the respective hex values of the color. Do try and let me know the feedback. Cheers!

Anonymous user

5 years ago

Hi. I just installed your dark theme on my Arch Linux PC. Works fine. Thank you. Since I updated my JDK to OpenJDK 11 (jre-openjdk 11.0.3.u4-1) I have a small problem with menus and the debug window (bottom). Both: with the original theme and your dark theme. In the debug window there is not a black but a light gray background making strange looking compiler and run time messages with black background. In the menus there are missing borders from check boxes. I think, this is a Java problem, but I don't understand, where to configure.

rahulkhanna

2 years ago

I'll check once on a Linux PC and try to rectify your issue. Thanks for your interest.

Anonymous user

6 years ago

Dude...It's just awesome. Thanks for the dark theme. It reduces stress on my eyes and the ide looks cool.

rahulkhanna

2 years ago

Thank you for your support!

Nick_Ayca

6 years ago

It worked perfectly!! thank u so much !! easy to install and easy to download

Anonymous user

6 years ago

Thank you!!!

Anonymous user

6 years ago

Absolutely loving it! Thank you!

Anonymous user

6 years ago

it works also with 1.6.5 It's a little too dark for me, so I've to play around with some colors. Thanks for the theme

Anonymous user

6 years ago

I love this theme. I only change the dark green to a very light grey. Thx

Anonymous user

2 years ago

Use a color picker to find which color to change, then find the hex number in the xml and replace it with yours. Make a copy before modifying anything.

Pablo_Lucini

2 years ago

Sorry. How did you do that ? I want to change some text colors. Thanks

Anonymous user

2 years ago

On a Mac, this is the green I used in theme.txt. It looks much better. #STRUCTURE COLORS #7ed119 - GREEN You can find this file here: /Applications/Arduino.app/Contents/Java/lib/theme/theme.txt

Anonymous user

6 years ago

Tried this, fantastic, so restful on the eyes. find it easier to find any code errors. 5*****

Anonymous user

6 years ago

How do you make a post like this........ I just knew this website Pls tell me!!

rahulkhanna

2 years ago

First, make a project that you were longing for. Then try to write an article about how you made it and what are the difficulties you faced while doing the project. Give a hit. All the best!