Giter Site home page Giter Site logo

Dark mode support about c64studio HOT 11 CLOSED

chrisgleissner avatar chrisgleissner commented on September 21, 2024
Dark mode support

from c64studio.

Comments (11)

GeorgRottensteiner avatar GeorgRottensteiner commented on September 21, 2024 1

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.

from c64studio.

GeorgRottensteiner avatar GeorgRottensteiner commented on September 21, 2024 1

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 :)

from c64studio.

GeorgRottensteiner avatar GeorgRottensteiner commented on September 21, 2024

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

from c64studio.

chrisgleissner avatar chrisgleissner commented on September 21, 2024

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

from c64studio.

chrisgleissner avatar chrisgleissner commented on September 21, 2024

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.

from c64studio.

GeorgRottensteiner avatar GeorgRottensteiner commented on September 21, 2024

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

from c64studio.

chrisgleissner avatar chrisgleissner commented on September 21, 2024

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

from c64studio.

chrisgleissner avatar chrisgleissner commented on September 21, 2024

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.

from c64studio.

GeorgRottensteiner avatar GeorgRottensteiner commented on September 21, 2024

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.

from c64studio.

GeorgRottensteiner avatar GeorgRottensteiner commented on September 21, 2024

Closing this for now, as respecting system wide settings is a different issue

from c64studio.

chrisgleissner avatar chrisgleissner commented on September 21, 2024

Thanks Georg, your help on this was much appreciated.

from c64studio.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.