Dark theme on Elementary Code instead of "Solarized Dark"

Question

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

Answer 1

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-4/styles with the contents of the xml file chosen above:

sudo nano /usr/share/gtksourceview-4/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.

3. Set Code to use the new theme:

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

4. Enjoy your new dark theme!

Code using Solarized Dark: Code using VSDark:

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