2

I would like to know if there is any possibility to change the configuration in Code App to set a Dark Theme instead of "Solarized Dark" or if there is any plugin to set a dark theme in Code App. Thanks a lot

5

So, I managed to hack Code a bit in order to set a different theme. I like to have a consistent theme when using various editors, so I tried to make them look as close as possible. At the same time, I did not yet invest too much time into this.

So, this is what I did:

  1. I used GtkSourceView style schemes to find a theme close to my needs. I liked VSCode's dark style, so I chose VSDark.

  2. Create a new file in /usr/share/gtksourceview-3.0/styles/ with the contents of the xml file chosen above:

sudo nano /usr/share/gtksourceview-3.0/styles/vsdark.xml

<?xml version="1.0" encoding="UTF-8"?>

<style-scheme id="vsdark" _name="VSDark" version="1.0">
    <author>Daapii</author>
    <_description>Inspired by the Visual Studio 2012 dark theme</_description>

<!-- COLORS -->
    <color name="comment_color" value="#608b4e"/>
    <color name="number_color" value="#b5cea8"/>
    <color name="string_color" value="#d69d62"/>
    <color name="boolean_color" value="#d69d62"/>
    <color name="keyword_color" value="#4c9cd6"/>
    <color name="error_color" value="#ff3333"/>
    <color name="text_fg" value="#ffffff"/>
    <color name="text_bg" value="#1e1e1e"/>
    <color name="line_highlight" value="#0f0f0f"/>
    <color name="line_numbers" value="#2b91af"/>
    <color name="selection_color" value="#264f78"/>


<!-- Global Settings -->
    <style name="text" foreground="text_fg" background="text_bg"/>
    <style name="cursor" foreground="text_fg"/>
    <style name="current-line" background="line_highlight"/>
    <style name="line-numbers" foreground="line_numbers" background="text_bg"/>
    <style name="selection" background="selection_color"/>

<!-- Bracket Matching -->
    <style name="bracket-match" foreground="text_bg" background="keyword_color"/>
    <style name="bracket-mismatch" background="error_color"/>
    <style name="search-match" foreground="comment_color" background="text_fg"/>

<!-- Base syntax colors

Languages: plain, python, ruby, xml, html, ada, asp, awk, boo, c,
changelog, chdr, cmake, cpp, csharp, css, d, def, desktop, diff,
docbook, dosbatch, dot, dpatch, dtd, eiffel, erlang, forth, fortran,
gap, gtkrc, haddock, haskell, haskell-literate, idl, ini, java,
javascript, latex, libtool, lua, m4, makefile, msil, nermele, nsis,
objc, ocaml, ocl, octave, pascal, perl, php, pkgconfig, po, prolog,
R, rpmspec, scheme, sh, sql, t2t, tcl, texinfo, vala, vbnet, verilog,
vhdl, xslt, yacc

-->

    <style name="def:string" foreground="string_color"/>
    <style name="def:character" foreground="string_color"/>
    <style name="def:special-char" foreground="string_color"/>
    <style name="def:number" foreground="number_color"/>
    <style name="def:decimal" foreground="number_color"/>
    <style name="def:floating-point" foreground="number_color"/>
    <style name="def:complex" foreground="number_color"/>
    <style name="def:base-n-integer" foreground="number_color"/>
    <style name="def:boolean" foreground="boolean_color"/>

    <style name="def:builtin" foreground="keyword_color"/>
    <style name="def:keyword" foreground="keyword_color"/>
    <style name="def:function" foreground="keyword_color"/>
    <style name="def:type" foreground="keyword_color"/>
    <style name="def:preprocessor" foreground="keyword_color"/>
    <style name="def:identifier" foreground="keyword_color"/>
    <style name="def:operator" foreground="keyword_color"/>
    <style name="def:statement" foreground="keyword_color"/>

    <style name="def:constant" foreground="keyword_color"/>
    <style name="def:special-constant" foreground="keyword_color"/>
    <style name="def:error" foreground="text_bg" background="error_color"/>

<!-- Comments -->

    <style name="def:comment" foreground="comment_color"/>
    <style name="def:shebang" foreground="comment_color"/>
    <style name="def:doc-comment-element" foreground="comment_color"/>
    <style name="def:note" foreground="comment_color"/>

</style-scheme>

If using nano editor, use Ctrl + O to save the file, and Ctrl + X to exit nano.

  1. Set Code to use the new theme:

gsettings set io.elementary.code.settings style-scheme 'vsdark'

  1. Enjoy your new dark theme!

Code using Solarized Dark: Code using solarized-dark Code using VSDark: Code using vsdark

  1. (Optional) If you want to, you can edit the new theme to customize it even further. In the .xml file you can change the values of the colors.

IMPORTANT: for this to work, the value in the gsettings command must be the same as the style-scheme id in the .xml file (vsdark in the example above). Code's style picker will NOT reflect the change: it still shows 'Solarized Dark' as selected.

|improve this answer|||||
  • Thank so much for your complete and fast answer , i have choseen "darkmate" to my Code App. – NijoSan Dec 11 '19 at 15:12
  • You're welcome! I did not try darkmate yet, might give it a try. Now please upvote and accept the answer. Happy Code-ing! – Vlad Pop Dec 11 '19 at 15:31

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.