[DONE] Dark theme for Anvil IDE - code editors

I’m not sure if it has already been requested but in case it has not, it would be wonderful to have a dark theme for the Anvil IDE code editors.

After working for a while in other dark IDEs/GUIs, moving back to the bright Anvil IDE feels hard on my retina.

Related to other workarounds folks are using:

4 Likes

As long as the GUI layout shows the same colors as the end-user will see, I’m all for it.

I’ve run into problems when I am in dark mode, but the end-user is not, and vice versa. Things that I’ve colored/shaded (for my own visibility) can end up being nearly invisible for the end-user.

Perhaps I can clarify that I mean the code editors.

I’m not as concerned with having more built-in themes for the designer/GUI (but I wouldn’t mind if that were possible as well).

1 Like

Adding to this request. spending hours a day in anvil is killing my eyes.

1 Like

/agree this is needed

I have 4 different computers for work/home, multiple IDE’s all using vibrant ink and the exception of anvil is making my eyes twitch!

You can always check out dark mode add ons since it’s a browser based ide. Chrome webstore has plenty.

I use dark reader and with the shortcut alt-shift-d you can toggle to dark mode.

I found a few colours were off so I adapted them using stylus which allows some edits of to the css of a page

/* adjusted highlighting for dark reader */
.CodeMirror-focused .CodeMirror-selected { background: #3aa3fe40 !important; }
.CodeMirror-activeline-background{background-color: #5a9bff47 !important;}
.cm-matchhighlight{border-bottom: 2px solid rgba(143, 180, 238, 0.9);background: #008dff66;}

1 Like

cool I will check out dark reader, the last time I installed a dark mode extension to chrome (years ago) it started some… ‘aberrant behavior’. Since there are so many to chose from a suggestion is welcome.
thanks

1 Like

I would like to add my voice to this feature request, I prefer to use anvil based dark reader mode. I don’t feel safe using browser extensions, as many of you may have heard about the major privacy and security issues with these extensions.

I know dark reader is open source and maybe the safest option available, however, the it is not that great with anvil editor.
@stucork suggestion is brilliant, however it is kinda hard to keep adding this code to each app your working on.

I am looking forward to see this feature added to Anvil. :star_struck:

you dont need to type this code every time you creat app or something.
just click on stylus extension then hover on anvil.works down the “write style for:”
paste the code from stucork reply
click save
enable the theme
DONE!

You no longer need to do any of these steps. This is an old topic. Nowadays, there is a force dark mode available for Chrome and Edge.

It’s a matter of preference, but there is a difference between @stucork 's solution and force dark mode, his custom coded solution can be toggled on and off easily using the dark reader extension, and using stylus, has the ability to continue to let you see the anvil app as others would see it while designing.

Anvil IDE Example screenshots:

Force Dark Mode (enabled, with no specifics)

@stucork Method:

I see. Thanks for letting me know. But still waiting for a default Dark Mode in Anvil.

You wanted it – you got it!

The new beta Anvil Editor supports Dark Mode:

Learn more about the new Beta Editor:

1 Like

Not sure if there’s an option for customising colours but something I’m noticing with the new Dark Mode is that comments (grey) are very difficult to read with the highlighted row background being brown: