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

390771 views

301 respects

Immagine

Components and supplies

1

Arduino UNO

Apps and platforms

1

Arduino IDE

Project description

Code

Github

Comments

Only logged in users can leave comments

Immagine
Immagine

liam4905

a year ago

Lovely.... thanks

Immagine
Immagine

rahulkhanna

a year ago

Thank you!

Immagine
Immagine

PRASS

2 years ago

Thank you

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

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 !!

Immagine
Immagine

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?

Immagine
Immagine

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.

Immagine
Immagine

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

Immagine
Immagine

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.

Immagine
Immagine

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!

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

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

Immagine
Immagine

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/

Immagine
Immagine

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.

Immagine
Immagine

rahulkhanna

2 years ago

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

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

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!

Immagine
Immagine

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.

Immagine
Immagine

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.

Immagine
Immagine

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!

Immagine
Immagine

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.

Immagine
Immagine

william74370

2 years ago

thanks

Immagine
Immagine

Anonymous user

2 years ago

Absolutely loving it! Thank you!

Immagine
Immagine

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.

Immagine
Immagine

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"

Immagine
Immagine

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.

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

2 years ago

Amazing! Thank you so much!

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

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.

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

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.

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

2 years ago

Thank you!!!

Immagine
Immagine

rahulkhanna

2 years ago

Thank you for your support!

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

rahulkhanna

2 years ago

Thank you for your support!

Immagine
Immagine

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 :-)

Immagine
Immagine

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?

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

2 years ago

Cool, I didn' know that.

Immagine
Immagine

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.

Immagine
Immagine

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!

Immagine
Immagine

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!

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

Anonymous user

2 years ago

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

Immagine
Immagine

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.

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

3 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

Immagine
Immagine

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

Immagine
Immagine

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.

Immagine
Immagine

projectempty

4 years ago

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

Immagine
Immagine

projectempty

4 years ago

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

Immagine
Immagine

andre_barros

4 years ago

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

Immagine
Immagine

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/

Immagine
Immagine

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 !!

Immagine
Immagine

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?

Immagine
Immagine

Un4gvn

2 years ago

Cool, I didn' know that.

Immagine
Immagine

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

Immagine
Immagine

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!

Immagine
Immagine

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.

Immagine
Immagine

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.

Immagine
Immagine

Anonymous user

5 years ago

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

Immagine
Immagine

Anonymous user

5 years ago

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

Immagine
Immagine

rahulkhanna

2 years ago

Thank you for your support!

Immagine
Immagine

Anonymous user

5 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

Immagine
Immagine

Anonymous user

5 years ago

Amazing! Thank you so much!

Immagine
Immagine

Anonymous user

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

Immagine
Immagine

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.

Immagine
Immagine

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

Immagine
Immagine

JRUSCH

5 years ago

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

Immagine
Immagine

JRUSCH

5 years ago

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

Immagine
Immagine

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.

Immagine
Immagine

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"

Immagine
Immagine

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 :-)

Immagine
Immagine

Anonymous user

5 years ago

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

Immagine
Immagine

rahulkhanna

2 years ago

Thank you for your support!

Immagine
Immagine

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.

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

6 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?

Immagine
Immagine

Anonymous user

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

Immagine
Immagine

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!

Immagine
Immagine

Anonymous user

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

Immagine
Immagine

rahulkhanna

2 years ago

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

Immagine
Immagine

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.

Immagine
Immagine

rahulkhanna

2 years ago

Thank you for your support!

Immagine
Immagine

Nick_Ayca

7 years ago

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

Immagine
Immagine

Anonymous user

7 years ago

Thank you!!!

Immagine
Immagine

Anonymous user

7 years ago

Absolutely loving it! Thank you!

Immagine
Immagine

Anonymous user

7 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

Immagine
Immagine

Anonymous user

7 years ago

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

Immagine
Immagine

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.

Immagine
Immagine

Pablo_Lucini

2 years ago

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

Immagine
Immagine

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

Immagine
Immagine

Anonymous user

7 years ago

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

Immagine
Immagine

Anonymous user

7 years ago

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

Immagine
Immagine

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!