New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dark theme for nightly coding sessions #8

Closed
RAYs3T opened this Issue Nov 9, 2017 · 23 comments

Comments

Projects
None yet
7 participants
@RAYs3T

RAYs3T commented Nov 9, 2017

Adding a "dark theme" would be super nice. The white skin is pretty eye straining in some conditions.

You know, for the night operators. ;)

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Nov 10, 2017

Theming is normally done in Windows design settings. And I guess just making background colors dark would make HeidiSQL really ugly. That also implies light font colors, different grey scales in borders and disabled buttons etc.

Did you try to set a dark theme in your Windows settings?

See this forum thread: https://www.heidisql.com/forum.php?t=23756

@ansgarbecker ansgarbecker changed the title from [Feature Request] Dark theme for nightly coding sessions to Dark theme for nightly coding sessions Nov 10, 2017

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Nov 11, 2017

See attached screeny from a quick color assignment. Ugly. I guess real theming needs some dedicated theming component.
grafik

@oliveru

This comment has been minimized.

oliveru commented Nov 13, 2017

Right - like the Jetbrains IDEs, e.g. PHPStorm and so on.

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Nov 13, 2017

PHPStorm is Java-based, while HeidiSQL uses the Windows API for painting dialogs and other controls.

What about changing colors in your Windows design settings?

@oliveru

This comment has been minimized.

oliveru commented Nov 21, 2017

For me no problem, don't know about the thread creator, just wanted to give some input.

@draknyte1

This comment has been minimized.

draknyte1 commented Dec 11, 2017

What about changing colors in your Windows design settings?

Is never really a valid solution.
While I've never had an issue with the colour scheme in Heidi, a simple solution to implement that gives users freedom isn't too hard.

New UI screen in settings, Have maybe 10 boxes which contain the default colours for certain components, allow changing them. Then just have BG/Borders/etc get their colours from there. Simple reset to default button and you're done. While I am not familiar with Delphi, I'd assume that it lets you do styling of windows to some basic extent.

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Dec 11, 2017

Of course with Delphi you can style some basic things, while it was never designed to implement its own style including border colors and some other minor things. You can see that in the screenshot above.

@rentalhost

This comment has been minimized.

Collaborator

rentalhost commented Feb 12, 2018

Seems very complex make it possible because the Windows API, and too that there are a lot of places that need attention to make it really a full dark theme (and not only changing the white backgrounds to dark). It need change colors scheme, borders, shadows, so on. I could understand the "night operators" but I think that we could use solutions like WindowBlinds to fix it.

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 18, 2018

This is a high-dpi screeny of a sample program created in Rad Studio 10 (trial), with an applied "carbon" theme. That's one from many, I guess 30 or 40, supported by RS10. Looks nice, doesn't it?
rx10-sample-program

@ansgarbecker ansgarbecker removed the question label Oct 18, 2018

@RAYs3T

This comment has been minimized.

RAYs3T commented Oct 19, 2018

@ansgarbecker Looks for sure better then the white skin. But the icons seems to be a little bit too large? (Like the icon in the title-bar).

What about tables?

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 19, 2018

The icons are large because my Windows was in 150% mode. That was another thing I wanted to test with the new Rad Studio.
I will try to load Heidi's sources into that trial version, compile and make a screenshot to see how many new issues I have then :)

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 19, 2018

Here we go: HeidiSQL compiled with Rad Studio 10.2 and Carbon Style selected.

Glitches I can most probably fix easily:

  • white SQL editors
  • lightgrey column on listings

Issues which I have no idea about yet:

  • broken main menu items - nothing visible, but space reserved
  • white background / non transparent icons on buttoned edit controls

tokyo-carbon-data
tokyo-carbon-database
tokyo-carbon-export
tokyo-carbon-gridexport
tokyo-carbon-mainmenu
tokyo-carbon-query
tokyo-carbon-rightclickmenu
tokyo-carbon-sessions
tokyo-carbon-table

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 26, 2018

Some code hints for myself:

Adding styles is doable via .rc file:
Carbon VCLSTYLE "Redist\Styles\Vcl\Carbon.vsf"

Listing included styles via style manager:
TStyleManager.StyleNames

Apply style to application:
TStyleManager.TrySetStyle('Carbon');

ansgarbecker added a commit that referenced this issue Oct 26, 2018

Issue #8: Add 39 themes from Redist\Styles\vcl\ directory, and suppor…
…t themes with a new setting in the "General" options tab
@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 26, 2018

Tada, here we go: The newest HeidiSQL build has 39 selectable style themes. You can set it in Tools > Preferences > General, at the very bottom.

Though there are a few new issues with this now. So be warned! We are still in the nightly builds here.

  • all themes I tested lead to empty text in first level of main menu
  • all themes show just empty or broken items in the context menu of table designer, view editor, routine editor, etc.
  • some listings have a light grey background in one or two columns, which is quite unreadable if the theme's font color is white (only a problem in dark themes)
  • SQL editors always have a hardcoded white background
  • two text memo's on SQL help dialog need another kick in the butt to show themed colors
  • various colored text does not work well with dark themes, e.g. the data types (numbers=blue, text=green, etc.) => solution: providing a dark and a light color preset, in preferences now
  • heidisql.exe file has grown from ~5MB to 8MB. But who cares?
  • new theme colors are applied to SynMemo's after Heidi restart
  • graphical glitches right besides main menu, showing random parts of SQL log
  • size grip in the bottom right corner of resizable dialogs shows unthemed colors, and does not seem to work anymore for the mouse
  • minor: status bar panels with icons show unique background color, not a potential wanted color gradient
  • main toolbar shows broken buttons now that I moved it out of a TCoolBar -> solution: put it into a TControlBar
  • white background / non transparent icons on buttoned edit controls
  • unthemed file open/save dialogs, task dialogs and message dialogs
  • empty leading space on main menu items (left side has 21px space, right side has normal looking 7px)
  • crash when closing (cancel or ok) any grid editor per buttonclick (e.g. the default value editor on the table editor's, or the grid value SET editor)
@cookieguru

This comment has been minimized.

cookieguru commented Oct 26, 2018

New Dark theme looks amazing! I think you alluded it to it with the other issues you noted, but is it possible to change the font colors and row background colors in lock step with the theme?

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 26, 2018

Not yet. But that should probably be the way to go? But that would mean I have to go through 39 themes and watch out for fitting foreground/background colors. That sounds quite unsexy.

@cookieguru

This comment has been minimized.

cookieguru commented Oct 27, 2018

Is there an easier way to open the vsf files besides the RAD trial?

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 27, 2018

.vsf styles can be created and edited with the integrated BitmapStyleDesigner.exe. Not sure if that's available separately from Delphi or RAD Studio.

ansgarbecker added a commit that referenced this issue Oct 27, 2018

Issue #8: add missing resource compiler command for the new styles.rc…
… to build-res.bat, in case anyone uses that batch file
@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 27, 2018

Various foreground/background colors are now "locked" to the active theme, so we don't have a light background on dark themes any more.

Though the SQL editors are still hardcoded white. They have many different font colors which are quite incompatible to dark themes, so it's not optimal to just adapt the background to the active theme. But I'll start over doing exactly that. Selecting better fitting SQL font colors may be left up to the user then.

ansgarbecker added a commit that referenced this issue Oct 27, 2018

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 27, 2018

This is how it looks like, with some issues fixed:

grafik

ansgarbecker added a commit that referenced this issue Oct 27, 2018

Issue #8: let first column on table designer use the parent's backgro…
…und color, as a custom one seems to be ignored by the theme manager

ansgarbecker added a commit that referenced this issue Oct 28, 2018

Issue #8: Convert Coolbar with menu and buttons back to a normal TMai…
…nMenu + TToolBar. Fixes empty first level menu items. Removes update and donate buttons from the top right corner. We don't need them.

ansgarbecker added a commit that referenced this issue Oct 28, 2018

@chrysler5798

This comment has been minimized.

chrysler5798 commented Oct 29, 2018

Hi,

A little display issue related to this new theme feature I think, there is an empty space on the left of main menu buttons for the default theme (Windows) :
2018-10-29_09-16-56

EDIT : Another issue, buttons between "SQL help" and "Load a SQL file" are transparents when you select another theme than Windows (default one).
image
EDIT 2 : it actually takes this transparent apparence when a button is disabled, so maybe you wanted to make it look like that ?

HeidiSQL version : 9.5.0.5314
Language : french

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Oct 29, 2018

A little display issue related to this new theme feature I think, there is an empty space on the left of main menu buttons for the default theme (Windows) :

Yes, I can confirm that, although sporadically only. I have no clue about the reason, and no clue how to fix that.

EDIT : Another issue, buttons between "SQL help" and "Load a SQL file" are transparents when you select another theme than Windows (default one).

Yes, these are disabled buttons. This is intentionally done by the underlying library. Ok, they could look more stylish, yes, but I have very few to no influence on that look.

ansgarbecker added a commit that referenced this issue Oct 29, 2018

Issue #8: fix broken popup menus on object editors, and give various …
…system dialogs style (task dialog, file dialogs, message dialogs)

ansgarbecker added a commit that referenced this issue Oct 31, 2018

Issue #8: Remove wide empty space from the left of all main menu item…
…s, by removing the image list from the menu. Icons are still displayed, as the action components still have them.

@ansgarbecker ansgarbecker added this to the v9.6 milestone Oct 31, 2018

ansgarbecker added a commit that referenced this issue Nov 5, 2018

Issue #8: provide two color presets for SQL editors in preferences di…
…alog per dropdown, one for dark themes and one for light ones

ansgarbecker added a commit that referenced this issue Nov 8, 2018

Issue #8: apply 3 hardcoded default values for colors which are not p…
…art of the highlighter's attributes (active line bg, matching brace fg + bg)

ansgarbecker added a commit that referenced this issue Nov 9, 2018

ansgarbecker added a commit that referenced this issue Nov 9, 2018

Issue #8: give the info text memo a 1px border, so its background col…
…or does not mix with the underlying panels or whatever is behind it.

ansgarbecker added a commit that referenced this issue Nov 9, 2018

ansgarbecker added a commit that referenced this issue Nov 13, 2018

@ansgarbecker

This comment has been minimized.

Collaborator

ansgarbecker commented Nov 15, 2018

I think we are complete at this point with themes. At least for the obvious stuff. So I'll close this issue now.

If anyone finds more issues with theming, then please report that in a new issue. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment