IDE Arduino com Tema Escuro




Neste esquema vamos trabalhar com a IDE Arduino e transformar o tema deste ambiente de programação de claro para escuro, a fim de melhorar a visibilidade do código fonte e, assim, deixar a nossa vista menos cansada.
Localizamos um arquivo do Jeff Thompson, que é professor de Arte e Tecnologia nos Estados Unidos, sobre o assunto. Então, com base nisso, vamos trocar os arquivos de configuração para possibilitar a mudança de cores na IDE Arduino.



Download

Aconselhamos que façam o download, no GITHUB, do arquivo do Jeff Thompson. Ele modificou determinados arquivos nos bitmaps e deixou disponível neste LINK

Também é possível baixar o Notepad++ (LINK), que é muito bom para editar o arquivo XML ou mesmo o arquivo de linguagem C.

Já no annystudio.com existe um software gratuito que chama Jcpicker. Ele faz a conversão de RGB para os valores hexadecimais.

Readme
O readme expõe que a última revisão que o Jeff Thompson fez foi na versão 1.6.6+ do Arduino, mas testamos na versão 1.84 e funcionou bem. 
Para mudar a cor da IDE Arduino você deve descompactar o arquivo DarkArduinoTheme.zip  que esta no Github e copiar na pasta theme do Arduino.
Recomendo fazer um backup da pasta theme caso queira restaurar as cores originais.
Para MAC OS ~/Applications/Arduino.app/Contents/Java/lib\theme
Para Windows `C:\Program Files (x86)\Arduino\lib\theme`.

###Criando suas próprias cores
Para criar temas personalizados é necessário editar o arquivo theme.txt, um arquivo XML dentro da pasta syntax e os arquivos do botão. Lembrando que, para escolher uma cor é preciso saber qual é o valor correspondente ao hexadecimal.
O próprio Jeff thompson criou um tema escuro, mas percebemos que a palavra Setup, em verde escuro, não estava com boa visibilidade. Então, trocamos por um verde claro, o que pode ser conferido em um arquivo theme.txt, que está disponível para download aqui no Blog, no fim do texto.

syntax

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE RSyntaxTheme SYSTEM "theme.dtd">

<!--
 Dark theme based off of Notepad++'s Obsidian theme.
 See theme.dtd and org.fife.ui.rsyntaxtextarea.Theme for more information.
-->
<RSyntaxTheme version="1.0">

   <!-- Omitting baseFont will use a system-appropriate monospaced. -->
   <!--<baseFont family="..." size="13"/>-->
   
   <!--  General editor colors. -->
   <background color="293134"/>
   <caret color="c1cbc2"/>
   <selection useFG="false" bg="404E51" roundedEdges="false"/>
   <currentLineHighlight color="2F393C" fade="false"/>
   <marginLine fg="394448"/>
   <markAllHighlight color="6b8189"/> <!-- TODO: Fix me -->
   <markOccurrencesHighlight color="5b7179" border="false"/>
   <matchedBracket fg="6A8088" bg="6b8189" highlightBoth="false" animate="false"/>
   <hyperlinks fg="a082bd"/>
   <secondaryLanguages>
      <language index="1" bg="333344"/>
      <language index="2" bg="223322"/>
      <language index="3" bg="332222"/>
   </secondaryLanguages>
   
   <!-- Gutter styling. -->
   <gutterBorder color="81969A"/>
   <lineNumbers fg="81969A"/>
   <foldIndicator fg="6A8088" iconBg="2f383c"/>
   <iconRowHeader activeLineRange="3399ff"/>
   
   <!-- Syntax tokens. -->
   <tokenStyles>
      <style token="IDENTIFIER" fg="E0E2E4"/>
      <style token="RESERVED_WORD" fg="93C763" bold="true"/>
      <style token="RESERVED_WORD_2" fg="93C763" bold="true"/>
      <style token="ANNOTATION" fg="E8E2B7"/>
      <style token="COMMENT_DOCUMENTATION" fg="6C788C"/>
      <style token="COMMENT_EOL" fg="66747B"/>
      <style token="COMMENT_MULTILINE" fg="66747B"/>
      <style token="COMMENT_KEYWORD" fg="ae9fbf"/>
      <style token="COMMENT_MARKUP" fg="ae9fbf"/>
      <style token="FUNCTION" fg="E0E2E4"/>
      <style token="DATA_TYPE" fg="678CB1" bold="true"/>
      <style token="LITERAL_BOOLEAN" fg="93C763" bold="true"/>
      <style token="LITERAL_NUMBER_DECIMAL_INT" fg="FFCD22"/>
      <style token="LITERAL_NUMBER_FLOAT" fg="FFCD22"/>
      <style token="LITERAL_NUMBER_HEXADECIMAL" fg="FFCD22"/>
      <style token="LITERAL_STRING_DOUBLE_QUOTE" fg="EC7600"/>
      <style token="LITERAL_CHAR" fg="EC7600"/>
      <style token="LITERAL_BACKQUOTE" fg="EC7600"/>
      <style token="MARKUP_TAG_DELIMITER" fg="678CB1"/>
      <style token="MARKUP_TAG_NAME" fg="ABBFD3" bold="true"/>
      <style token="MARKUP_TAG_ATTRIBUTE" fg="B3B689"/>
      <style token="MARKUP_TAG_ATTRIBUTE_VALUE" fg="e1e2cf"/>
      <style token="MARKUP_COMMENT" fg="66747B"/>
      <style token="MARKUP_DTD" fg="A082BD"/>
      <style token="MARKUP_PROCESSING_INSTRUCTION" fg="A082BD"/>
      <style token="MARKUP_CDATA" fg="d5e6f0"/>
      <style token="MARKUP_CDATA_DELIMITER" fg="ae9fbf"/>
      <style token="MARKUP_ENTITY_REFERENCE" fg="678CB1"/>
      <style token="OPERATOR" fg="E8E2B7"/>
      <style token="PREPROCESSOR" fg="A082BD"/>
      <style token="REGEX" fg="d39745"/>
      <style token="SEPARATOR" fg="E8E2B7"/>
      <style token="VARIABLE" fg="ae9fbf" bold="true"/>
      <style token="WHITESPACE" fg="E0E2E4"/>
      
      <style token="ERROR_IDENTIFIER" fg="E0E2E4" bg="04790e"/>
      <style token="ERROR_NUMBER_FORMAT" fg="E0E2E4" bg="04790e"/>
      <style token="ERROR_STRING_DOUBLE" fg="E0E2E4" bg="04790e"/>
      <style token="ERROR_CHAR" fg="E0E2E4" bg="04790e"/>
   </tokenStyles>

</RSyntaxTheme>

Arquivo theme.txt

#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

JCPICKER.exe e Notepad++

Em imagens do Jcpicker e do Notepad++ notamos que a cor escura favorece muito a programação. Na demonstração de fundo escuro mostro um exemplo de um arquivo default.xml que também pode ter as cores RGB alteradas.

Arquivos para download:



Um comentário:

  1. Tem como mudar a font "letra" para uma mais negrito mesmo com tela escura aqui ficou muito fininha as letras?

    ResponderExcluir

Tecnologia do Blogger.