{"id":24023,"date":"2021-11-18T08:45:40","date_gmt":"2021-11-17T23:45:40","guid":{"rendered":"https:\/\/www.souichi.club\/?p=24023"},"modified":"2022-03-19T17:19:09","modified_gmt":"2022-03-19T08:19:09","slug":"arduino-ide-dark-mode","status":"publish","type":"post","link":"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/","title":{"rendered":"How to set the Arduino IDE to dark mode"},"content":{"rendered":"<ul class=\"bogo-language-switcher list-view\"><li class=\"en-US en current first\"><span class=\"bogoflags bogoflags-us\"><\/span> <span class=\"bogo-language-name\"><a rel=\"alternate\" hreflang=\"en-US\" href=\"https:\/\/www.souichi.club\/en\/wp-json\/wp\/v2\/posts\/24023\/\" title=\"English\" class=\"current\" aria-current=\"page\">English<\/a><\/span><\/li>\n<li class=\"ja last\"><span class=\"bogoflags bogoflags-jp\"><\/span> <span class=\"bogo-language-name\"><a rel=\"alternate\" hreflang=\"ja\" href=\"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/posts\/24023\/\" title=\"Japanese\">\u65e5\u672c\u8a9e<\/a><\/span><\/li>\n<\/ul>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_79_2 counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-69f4112d1ca12\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #454e5c;color:#454e5c\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #454e5c;color:#454e5c\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-69f4112d1ca12\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Dark_Mode\" >Dark Mode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Environment\" >Environment<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Default_setting\" >Default setting<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#How_to_change\" >How to change<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Get_the_dark_theme\" >Get the dark theme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Unzip_it\" >Unzip it<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Replacing_the_theme\" >Replacing the theme<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Restarting_the_Arduino_IDE\" >Restarting the Arduino IDE<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#More_color_changes\" >More color changes<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Correction_point\" >Correction point<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/www.souichi.club\/en\/m5stack\/arduino-ide-dark-mode\/#Comparison_before_and_after_change\" >Comparison before and after change<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Dark_Mode\"><\/span>Dark Mode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>This is a memorandum of how I changed the Arduino IDE to dark mode (dark background color).<\/p>\n\n\n\n<p>Please <a href=\"https:\/\/www.souichi.club\/en\/technology\/spyder-dark-color\/\" target=\"_blank\" rel=\"noreferrer noopener\">refer to the article<\/a> on changing the Spyder to dark colors in the Python integrated development environment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Environment\"><\/span>Environment<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The environment we tried is as follows.<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\">\n<table class=\"r_table01\">\n<tbody>\n<tr>\n<td class=\"r_td30\">\n<p>OS<\/p>\n<\/td>\n<td>\n<p>Windows 10 Home\uff0864 Bit\uff09<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>Arduino IDE<\/p>\n<\/td>\n<td>\n<p>1.8.13<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Default_setting\"><\/span>Default setting<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>By default, the background color is black text on a white background.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a class=\"r_image\" href=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-01.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-01.png?resize=768%2C715&#038;ssl=1\" alt=\"default color\" class=\"wp-image-24059\" width=\"768\" height=\"715\" srcset=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-01.png?resize=1024%2C953&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-01.png?resize=300%2C279&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-01.png?resize=768%2C715&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-01.png?w=1088&amp;ssl=1 1088w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_change\"><\/span>How to change<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Get_the_dark_theme\"><\/span>Get the dark theme<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Go to <a href=\"https:\/\/github.com\/jeffThompson\/DarkArduinoTheme\" target=\"_blank\" rel=\"noreferrer noopener\">jeffThompson&#8217;s Github<\/a> here and download the dark theme using Code -&gt; Download ZIP.<\/p>\n\n\n\n<p>The file name is &#8220;DarkArduinoTheme-master.zip&#8221;.<\/p>\n\n\n\n<p>As mentioned in README.md, Jeff Thompson no longer maintains this theme, so use it with understanding.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a class=\"r_image\" href=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-02.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-02.png?resize=768%2C339&#038;ssl=1\" alt=\"Get the Arduino IDE dark theme\" class=\"wp-image-23992\" width=\"768\" height=\"339\" srcset=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-02.png?resize=1024%2C452&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-02.png?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-02.png?resize=768%2C339&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-02.png?resize=1536%2C678&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-02.png?w=1870&amp;ssl=1 1870w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Unzip_it\"><\/span>Unzip it<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>When you unzip the downloaded DarkArduinoTheme-master.zip, you will see the following folder structure.<\/p>\n\n\n<pre><code class=\"lang-shell\">\u251c\u2500DarkArduinoTheme-master\n\u2502  \u2502      \n\u2502  \u251c\u2500DarkArduinoTheme-master\n\u2502  \u2502  \u2502\n\u2502  \u2502  \u251c\u2500\u2500theme\u3000\u30fb\u30fb\u30fb Use the folder here\n\u2502  \u2502  \u2502  \u2502<\/code><\/pre>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Replacing_the_theme\"><\/span>Replacing the theme<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>Replacing the theme<\/p>\n\n\n\n<p>Overwrite the theme folder in the folder where Arduino IDE is installed (C:\\Program Files (x86)\\Arduino\\lib\\theme by default) with the new theme folder, but rename and save the original theme before doing so.<\/p>\n\n\n\n<p>Before you do this, rename the original theme and save it.<\/p>\n\n\n\n<p>Copy the theme by folder.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a class=\"r_image\" href=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-04.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-04.png?resize=768%2C341&#038;ssl=1\" alt=\"Copy the theme by folder\" class=\"wp-image-23995\" width=\"768\" height=\"341\" srcset=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-04.png?resize=1024%2C455&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-04.png?resize=300%2C133&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-04.png?resize=768%2C341&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-04.png?resize=1536%2C682&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-04.png?w=1714&amp;ssl=1 1714w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Restarting_the_Arduino_IDE\"><\/span>Restarting the Arduino IDE<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If you quit and restart the Arduino IDE, it has changed to a dark theme.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a class=\"r_image\" href=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-02.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-02.png?resize=768%2C715&#038;ssl=1\" alt=\"Dark Color theme\" class=\"wp-image-24064\" width=\"768\" height=\"715\" srcset=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-02.png?resize=1024%2C953&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-02.png?resize=300%2C279&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-02.png?resize=768%2C715&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-02.png?w=1088&amp;ssl=1 1088w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"More_color_changes\"><\/span>More color changes<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Change the background color, function names, comments, etc. to the color you want.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Correction_point\"><\/span>Correction point<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>C:\\Program Files (x86)\\Arduino\\lib\u00a5theme\\theme.txt<\/p>\n\n\n<figure class=\"wp-block-table is-style-regular\">\n<table class=\"r_table01\">\n<tbody>\n<tr>\n<td class=\"r_td35\">\n<p>editor.bgcolor<\/p>\n<\/td>\n<td>\n<p>Change background color<\/p>\n<p>#202020\u3000\u2192\u3000#2a2b24<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>editor.reserved_word.style<\/p>\n<\/td>\n<td>\n<p>Change the function name<\/p>\n<p>#5E6D03,plain\u3000\u2192\u3000#a6e22e,plain<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>editor.reserved_word_2.style<\/p>\n<\/td>\n<td>\n<p>Change reserved characters<\/p>\n<p>#00979C,plain\u3000\u2192\u3000#f92672,plain<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>editor.comment1.style<\/p>\n<\/td>\n<td>\n<p>Changing comments(\/\/ comment)<\/p>\n<p>#aaaaaa,plain\u3000\u2192\u3000#75715e,plain<\/p>\n<\/td>\n<\/tr>\n<tr>\n<td>\n<p>editor.comment2.style<\/p>\n<\/td>\n<td>\n<p>Changing comments(\/* comment *\/)<\/p>\n<p>#aaaaaa,plain\u3000\u2192\u3000#75715e,plain<\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/figure>\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Comparison_before_and_after_change\"><\/span>Comparison before and after change<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>The color on the left is before modification, and the color on the right is after modification.<\/p>\n\n\n\n<p>I was able to change the color to the one I generally like.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><a class=\"r_image\" href=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?ssl=1\"><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?resize=768%2C401&#038;ssl=1\" alt=\"Before\/after comparison\" class=\"wp-image-24067\" width=\"768\" height=\"401\" srcset=\"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?resize=1024%2C534&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?resize=300%2C157&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?resize=768%2C401&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?resize=1536%2C802&amp;ssl=1 1536w, https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?w=1920&amp;ssl=1 1920w\" sizes=\"auto, (max-width: 768px) 100vw, 768px\" \/><\/a><\/figure>\n\n\n\n<p>That concludes this article.<\/p>\n\n\n<div class=\"postscript_balloon\">Finally.<\/div>\n\n\n<p>I hope this article will be useful to someone somewhere.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This article describes how to change the Arduino IDE, the integrated development environment for the ESP32 and Arduino, to dark mode. <\/p>\n","protected":false},"author":5,"featured_media":24067,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_locale":"en_US","_original_post":"https:\/\/www.souichi.club\/?p=23985","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[238],"tags":[],"class_list":["post-24023","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-m5stack","en-US"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.souichi.club\/wp-content\/uploads\/arduino-ide-dark-mode-en-03.png?fit=1920%2C1002&ssl=1","jetpack-related-posts":[],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/posts\/24023","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/comments?post=24023"}],"version-history":[{"count":1,"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/posts\/24023\/revisions"}],"predecessor-version":[{"id":24526,"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/posts\/24023\/revisions\/24526"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/media\/24067"}],"wp:attachment":[{"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/media?parent=24023"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/categories?post=24023"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.souichi.club\/wp-json\/wp\/v2\/tags?post=24023"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}