Dark mode support

[chrisgleissner]

Hi,

I tried to enable dark mode in C64 Studio since the current setup hurts my eyes. In the last few years, most IDEs started offering dark mode support.

I see that a few releases ago, C64 Studio added the ability to define custom element foregrounds and backgrounds (Menu / Preferences / Colors). However, even after spending quite some time, I was unable to achieve a satisfactory setup. Basically, some parts of the IDE still show a bright background.

I see that there is an "Export here" and "Import here" button in that dialog. Would it be possible to define dark mode settings and then export them for download via GitHub? This could then be expanded to offer an "Enable Dark Mode" button to the left of the "Set Defaults" button on the Colors panel.

Just a thought. I would really love to use C64 Studio as it is such a great tool, but the lack of a workable dark mode forces me to use Visual Studio Code instead.

Thanks Christian

[GeorgRottensteiner]

Everything's possible. Which are the parts that still are bright?
I late fix added the left margin background for the BASIC code editor.

[chrisgleissner]

Hi Georg,

thanks for your fast reply.

I have been playing around a bit more with the colors and achieved something that is fairly workable. The only part that still looks wrong is the menu colors. Both text and background color of the main menu items are bright, making them hard to read.

Here is the dark mode XML config I came up with. It would be great if something like this could be offered as a "one stop" solution that is activated with a "Enable Dark Mode" button in the color menu. I optimized these colors for the assembly view. Main code is white, labels are golden, operands are turquoise and comments are green. Background is not black but rather a dark gray, as is customary with modern dark modes as complete black would result in a high contrast which again can be painful on the eye after a while.

Just a baseline for further improvements, thought I would share in case you are interested or if anyone else runs into a similar problem and is looking for workable colors.

<?xml version="1.0"?>
<C64StudioSettings>
  <EditorColors>
    <Color Element="NONE" FGColor="FFFFFFFF" BGColor="FF1F1F1F"/>
    <Color Element="CODE" FGColor="FFFFFFFF" BGColor="FF202020"/>
    <Color Element="LITERAL_STRING" FGColor="FF008000" BGColor="FF202020"/>
    <Color Element="LITERAL_NUMBER" FGColor="FF80FFFF" BGColor="FF202020"/>
    <Color Element="LABEL" FGColor="FFF9DF91" BGColor="FF202020"/>
    <Color Element="COMMENT" FGColor="FF80FF80" BGColor="FF202020"/>
    <Color Element="PSEUDO_OP" FGColor="FFFF8000" BGColor="FF202020"/>
    <Color Element="CURRENT_DEBUG_LINE" FGColor="FFFFFFFF" BGColor="FF8C8C00"/>
    <Color Element="EMPTY_SPACE" FGColor="FFFFFFFF" BGColor="FF272727"/>
    <Color Element="OPERATOR" FGColor="FF80FFFF" BGColor="FF202020"/>
    <Color Element="HIGHLIGHTED_SEARCH_RESULTS" FGColor="FF80FFFF" BGColor="FF202020"/>
    <Color Element="ERROR_UNDERLINE" FGColor="FFFF0000" BGColor="FF202020"/>
    <Color Element="SELECTED_TEXT" FGColor="FFFF8080" BGColor="FF202020"/>
    <Color Element="CONTROL_TEXT" FGColor="FFFFFFFF" BGColor="FF008000"/>
    <Color Element="BACKGROUND_CONTROL" FGColor="FFFFFFFF" BGColor="FF202020"/>
    <Color Element="CHANGED_DEBUG_ELEMENT" FGColor="FFFF0000" BGColor="FF202020"/>
    <Color Element="SELECTION_FRAME" FGColor="FF80FF80" BGColor="FF202020"/>
    <Color Element="BACKGROUND_BUTTON" FGColor="FFFFFFFF" BGColor="FF202020"/>
  </EditorColors>
</C64StudioSettings>

Thanks Christian

[GeorgRottensteiner]

Thanks, I'll look into it! Just FYI, in the release there's a folder named "themes", there is a "Dark.xml", which could also be a base. However when menu items are still bright, I need to adjust the code anyway.

[chrisgleissner]

That's great, thanks for letting me know. I had a look at what's included and looks like "Dark.xml" actually uses a pretty bright background (much lighter than the dark mode of Windows 11, IDEA, Visual Studio Code etc.) and meanwhile "MidnightCoder.xml" is very dark (i.e. completely black background).

Both are decent options, and of course it's a bit of a subjective choice, but it may make sense to add a third intermediate option with a dark (but not completely black) background - something like I posted above - as it's more in line with what other IDEs are doing.

I don't know how hard it would be from a dev perspective, but adding a drop-down to select among the included profiles in the "themes" folder would have been a very intuitive way to change the color setup as I didn't know there was such a folder. It may already be described in some document, of course, but this would have made the IDE self-explanatory and even better than it already is.

Thanks for the great work creating this excellent IDE, btw.

[GeorgRottensteiner]

Regarding the bright colors, you're referring to the highlighted menu items, tab headers and optionally the list control headers? Anything I've missed?

[chrisgleissner]

I think you got it. That's all the places I noticed.

[GeorgRottensteiner]

I haven't fixed every little part of it, but you can check out the webmisc link (where I usually place the WIP versions): https://www.georg-rottensteiner.de/webmisc/C64StudioRelease.zip

The theme choice sounds like a really good idea, something that I should've noticed before :)

[chrisgleissner]

Thanks a lot, this looks much better. The color of the highlighted main menu item is now improved and the text remains readable even in dark mode.

On a side note, when I first tried the ZIP you published above, I thought that you somehow extended the IDE to respect the system-wide dark mode that can now be enabled in Windows 11. I later realized that the dark mode I had enabled before was also used by the new version you published here.

But this makes me wonder - how hard is it to create a Windows application that respects the Windows 11 theme, so it "just works" without the user having to select a custom theme? May be quite hard, but I just wanted to put it out there as an idea. When I start the Windows File Explorer or the Notepad, for example, they automatically respects the system-wide dark theme. Not sure whether a third-party app can just be compiled in such a way to automatically, transparently support it, as well.

Having said that, the version you just published is a big improvement and having the user select a custom theme in the application is definitely a good idea, as well.

[GeorgRottensteiner]

Respecting the system wide settings would be default. But once you go after theming, it's kinda all or nothing. Anything in between will always be wrong in a different config. There could be an option overriding the color settings only for non system-control types.