yet another dark theme

[Brad Lanam]

Code: https://gentoo.com/tcl/awdark.tcl (zlib/libpng license)

Pic: https://gentoo.com/tcl/img-awdark.png

(After feedback and adjustments, the code will be posted to the
wiki and the aforementioned links will be removed).

Comments, constructive criticism, ideas, wants, needs, etc. welcome.

- The focus box around notebook tabs is larger rather
than just outlining the label closely.
- The focus box around checkbutton and radiobuttons encloses
the entire button and label.
- Graphics for the checkbuttons and radiobuttons, so those are not
scalable (but they're a bit larger than normal). If you want
to play with those, I can make the .svg files available.
- Some graphics for notebook tab highlights.
- Focus rings and colors are in the blue color.

Questions:
Do you like dark themes? Is this too dark?

Not good at naming things. It was very loosely based on adwaita dark
so it became awdark.tcl. Ideas for a better name welcome.

-- Brad

[Luis Alejandro Muzzachiodi]

How this must be saved in order to see running with the demo widget.tcl ?

[Dave]

On 8/31/2018 4:45 PM, Brad Lanam wrote:
>
> Questions:
> Do you like dark themes? Is this too dark?
>

Maybe someone will find it useful, but how one can easily read dark grey
text on a darker grey background is a mystery to me. Valve's steam
client uses this. I have to get close to the monitor at times to read
it. There's a reason that paper is white and printed text is most
commonly black.

--
computerjock AT mail DOT com

[Brad Lanam]

On Friday, August 31, 2018 at 4:10:56 PM UTC-7, Dave wrote:
> Maybe someone will find it useful, but how one can easily read dark grey
> text on a darker grey background is a mystery to me. Valve's steam
> client uses this. I have to get close to the monitor at times to read
> it. There's a reason that paper is white and printed text is most
> commonly black.

Your rant might have been meaningful if the text were dark grey.
As it is, the text is white.

This website: https://contrastchecker.com/
gives white on #33393b an excellent score with a contrast ratio of 11.74
(e.g. labels on the frame background).
and white on #252a2c is even better, with a contrast ratio of 14.52
(e.g. entry boxes, spinboxes, comboboxes).

I heartily dislike the dim grey on white (there's a forum I read with
a contrast ratio of 3.something -- I hate it) and dark or light grey on grey.

But when you just rant without giving some empirical evidence, without bothering
to check that your rant is applicable to the subject matter, it just destroys your credibility.

[Brad Lanam]

On Friday, August 31, 2018 at 3:53:32 PM UTC-7, Luis Alejandro Muzzachiodi wrote:
> How this must be saved in order to see running with the demo widget.tcl ?

That's an interesting question.
Unfortunately, it looks like much of the demo does not use ttk widgets.
And all of those toplevel frames are going to have the wrong background color
(since they are not ttk frames).

[This is rather out-of-date. The demo must not look very good on windows.]

I did:
bll-tecra:bll$ rlwrap tclsh
% source /home/bll/s/ballroomdj/code/themes/awdark.tcl
% ttk::style theme use awdark
% source widget

And some of the widgets do show up with the new theme, but not that many,
and it certainly doesn't present a clear picture of what the theme looks like.

Try the code below. If you are not on windows, the #! line will need to
be changed. If there's something more you want to see in this demo code, you
can change it, or let me know, and I can add it in. Just put the theme
name on the command line. I know it does not exercise all the possibilities,
and those do need to be added in before I can truly say the theme is ready.

#!/home/bll/local/bin/tclsh

package require Tk

if { [llength $::argv] != 1 } {
puts "Usage: dttk.tcl <theme>"
exit 1
}

set theme [lindex $::argv 0]

if { [file exists $theme.tcl] } {
source $theme.tcl
}

ttk::style theme use $theme
set tbg [ttk::style lookup TFrame -background]
lassign [winfo rgb . $tbg] bg_r bg_g bg_b
set tbg [format {#%02x%02x%02x} \
[expr {$bg_r / 256}] \
[expr {$bg_g / 256}] \
[expr {$bg_b / 256}]]

set val 55
set valb $theme
set off 0
set on 1

. configure -background $tbg

ttk::notebook .nb
pack .nb -side left -fill both -expand true
ttk::labelframe .lf -text " $theme "
.nb add .lf -text $theme
ttk::frame .two
.nb add .two -text [join [lreverse [split $theme {}]] {}]
ttk::frame .three
.nb add .three -text Another
ttk::frame .four
.nb add .four -text {Another Really Long Name}
ttk::frame .bf
ttk::label .lb -text $theme
ttk::button .b -text $theme
pack .lb .b -in .bf -side left -padx 3p
ttk::combobox .combo -values [list aaa bbb ccc] -textvariable valb -width 15
ttk::frame .cbf
ttk::checkbutton .cboff -text off -variable off
ttk::checkbutton .cboffd -text off -variable off -state disabled
ttk::checkbutton .cbon -text on -variable on
ttk::checkbutton .cbond -text on -variable on -state disabled
pack .cboff .cboffd .cbon .cbond -in .cbf -side left -padx 3p
ttk::separator .sep
ttk::frame .rbf
ttk::radiobutton .rboffd -text off -variable off -value 0 -state disabled
ttk::radiobutton .rbond -text on -variable off -value 1 -state disabled
pack .rboffd .rbond -in .rbf -side left -padx 3p
ttk::radiobutton .rboff -text off -variable on -value 0
ttk::radiobutton .rbon -text on -variable on -value 1
pack .rboff .rbon -in .rbf -side left -padx 3p
ttk::scale .sc -from 0 -to 100 -variable val
ttk::progressbar .pb -mode determinate -length 100 -variable val
ttk::entry .ent -textvariable valb -width 15
ttk::spinbox .sbox -textvariable val -width 5 \
-from 1 -to 100 -increment 0.1
ttk::scrollbar .sb
ttk::sizegrip .sg
pack .sb -side right -fill y -expand false
pack .bf .combo .cbf .sep .rbf .sc .pb .ent .sbox \
-in .lf -side top -anchor w -padx 3p -pady 3p
pack configure .sep -fill x -expand true
pack .sg -in .lf -side right -anchor s

[Dave]

I'm not referring to the white text. The img-awdark.png clearly shows
the tabs with dark grey text on a darker grey background. All I said was
that I find dark grey text one a darker grey background difficult to
read. As I mentioned, Valve's steam client uses these greys and,
combined with a small font, makes it difficult to read. You asked for
opinions and I gave you mine. Take it or leave it.

[Brad Lanam]

On Saturday, September 1, 2018 at 7:14:29 AM UTC-7, Dave wrote:
> I'm not referring to the white text. The img-awdark.png clearly shows
> the tabs with dark grey text on a darker grey background. All I said was
> that I find dark grey text one a darker grey background difficult to
> read. As I mentioned, Valve's steam client uses these greys and,
> combined with a small font, makes it difficult to read. You asked for
> opinions and I gave you mine. Take it or leave it.

Thank you for being specific.
I will fix that.

[Brad Lanam]

Ok, same URLs:

Code: https://gentoo.com/tcl/awdark.tcl
Pic: https://gentoo.com/tcl/img-awdark.png

I got my notebook tabs with close buttons re-coded to adjust the notebook
tab layout dynamically, so it works with this new theme:
https://gentoo.com/tcl/img-awdark-tabs.png

# 0.2
# - reduced height of widgets
# - labelframe styling
# - treeview styling
# - remove extra outline color on notebook tabs
# - fix non-selected color of notebook tabs
# - added setMenuColors helper routine
# - cleaned up the radiobutton image
# - resized checkbutton and radiobutton images.

Still to do:
- review: scrollbar, paned window, menubutton,
- write a helper routine to set listbox widget colors
- write a helper routine to set text widget colors

Almost there.

Thanks Dave for your feedback.
Getting people to give feedback is so difficult.

I will work on the above and get the rest cleaned up.

[Luis Alejandro Muzzachiodi]

I could run your code and it's really good. That remember me all the stuff about css/html when i was trying to combinate colors for a site (finally i used the ThemeRoller of JQuery).
My notes:
* The hover of button (too dark)
* Hover of radio/check buttons ? (not on Windows but seems other themes have it)
* The grip of the scale (too dark)
* The scrollbar seems too "small".

I hope this help you.
Saludos,

[jda...@gmail.com]

I like dark themes, this looks pretty nice to me.

The general background seems rather light. It looks like this is necessary to get contrast for the black vertical slider and up/down arrows. If those were lighter instead of darker than background, the backgrounds in general could be even darker.

I find the horizontal slider contrast low as well.

The disabled radio button indicator off state is pretty bright compared to the on state. Something like a gray border and background colored fill for the indicator might be more clear for the radio button indicator "off and disabled" state.

The highlighted unselected tabs appear brighter than the selected tab, which I find confusing at first glance. I'm not sure if brightening the selected tab's highlighted color or darkening the unselected tabs highlighted color would work better.


Why not use the the style lookup color directly in the demo script . window configuration?

. configure -background [ttk::style lookup TFrame -background]

Is there some problem with color naming that does not show up in this particular case?

Dave Bruchie

[Brad Lanam]

On Saturday, September 1, 2018 at 11:56:33 AM UTC-7, jda...@gmail.com wrote:
> I like dark themes, this looks pretty nice to me.
>
> The general background seems rather light. It looks like this is necessary to get contrast for the black vertical slider and up/down arrows. If those were lighter instead of darker than background, the backgrounds in general could be even darker.

I started with the colors from the adwaita dark theme. Whoever wrote it is much
better with colors than I am. I think for the time being I will stick with
these colors (with some minor changes). Perhaps if I find a darker theme
later, I can make an alternate version.

> The disabled radio button indicator off state is pretty bright compared to the on state. Something like a gray border and background colored fill for the indicator might be more clear for the radio button indicator "off and disabled" state.

I need to try and find a disabled radio button and checkbutton somewhere
in Linux so I can see what colors they used in adwaita dark.

Found one. So that's fixed.

> The highlighted unselected tabs appear brighter than the selected tab, which I find confusing at first glance. I'm not sure if brightening the selected tab's highlighted color or darkening the unselected tabs highlighted color would work better.

Not sure what you mean here.
The selected tab's color bar is the blue color.
An unselected tab's color bar is the frame color.

The hover color for the tab's color bar is quite bright. And unfortunately,
all the unselected tabs get the hover color, not the individual tab the
mouse is over.

All tab text is white now. I had originally used the grey color from the
adwaita dark theme for the unselected tabs. But as the other Dave pointed out, those need to be readable (whereas disabled text does not really need to be readable).

Oh, the image with the tabs/close buttons and the orange text was from my
application, and though my application is the theme, the orange text
is not part of the theme.

> Why not use the the style lookup color directly in the demo script . window configuration?
>
> . configure -background [ttk::style lookup TFrame -background]
>
> Is there some problem with color naming that does not show up in this particular case?

I think that was a copy-paste thing from some other code I had where the
color naming did matter.


New pics: https://gentoo.com/tcl/img-awdark.png
https://gentoo.com/tcl/img-awdark-text.png

[Brad Lanam]

Everything helps. I have change the scale grip and scrollbar grip colors.

I'm trying to avoid adding too many graphics, so, for the moment, I will leave
the scale and scrollbars as-is. I don't think I can do anything about the
width without using graphics. I can change it later if it is a problem.

[Brad Lanam]

On Saturday, September 1, 2018 at 9:07:06 AM UTC-7, Luis Alejandro Muzzachiodi wrote:

> My notes:

> * Hover of radio/check buttons ? (not on Windows but seems other themes have it)

I neglected to answer this.
Not sure what color to make the radio/check buttons on hover.
(I'm not a graphic designer -- I can take something and copy/adjust it).
This might be easier now that I have found the proper disabled colors.

Let me play around with that and see if I can come up with a decent color.

[Brad Lanam]

Four pictures with new demo code.

https://gentoo.com/tcl/img-awdark.png
https://gentoo.com/tcl/img-awdark-text.png
https://gentoo.com/tcl/img-awdark-paned.png
https://gentoo.com/tcl/img-awdark-treeview.png

Source:
https://gentoo.com/tcl/awdark.tcl
https://gentoo.com/tcl/demottk.tcl

I believe I have all of the ttk widgets styled now except for menubutton.
There are helper routines setting the colors on menu, text and listbox widgets.

To do:
- menubutton
- try and see if I can come up with decent hover colors
for radiobuttons and checkbuttons as requested.

Please feel free to comment on issues and reiterate issues if I have not
addressed them.

[Brad Lanam]

menubutton and hover colors for radio/check buttons are done.
Code is uploaded.

[Brad Lanam]

0.6 is up

# 0.6
# - fixed hover color over notebook tabs

[Alexandru]

Thanks Brad for sharing your work.
I use it to build a nice login/register frame that looks like HTML/CSS:
https://www.meshparts.de/download/software/loginsplash.zip
I have attached the awdesk package witch minor changes.

[Brad Lanam]

# 0.7
# - add option to text helper routine to set the darker background color.
# - fix listbox helper routine

https://gentoo.com/tcl/awdark.tcl

[Brad Lanam]

# 0.8
# - set disabled field background color for entry, spinbox, combobox.
# - set disabled border color

https://gentoo.com/tcl/awdark.tcl

[Brad Lanam]

On Mac OS X, to override the aqua styled scrollbars, use:

ttk::scrollbar .sb -style Vertical.TScrollbar
ttk::scrollbar .sb -style Horizontal.TScrollbar

0.9: Fixes for Mac OS X.

https://gentoo.com/tcl/awdark.tcl

[two...@gmail.com]

On Friday, August 31, 2018 at 2:45:04 PM UTC-7, Brad Lanam wrote:


>
> Not good at naming things. It was very loosely based on adwaita dark
> so it became awdark.tcl. Ideas for a better name welcome.

Unless there's some other reason, I would suggest changing the package name to NOT include the leading :: in the name. Here's why:

I was able to use it in an androwish program I wrote a while back. It creates a menu with all the themes so I can select one (default is droid).

For some reason, I use the code:

set themes [ttk::themes]

instead of using

ttk::style theme names

The code for ttk::themes is as below, and because the search assumes package names do not start with ::, as yours does, this proc does not find them. Also, when sorting the package names, yours does not appear with the others, but shows up first.

I just removed the leading :: from the namespace eval and the package provide statements and that fixed it for me. Maybe ttk::themes is depreciated now, I don't know.



proc ::ttk::themes {{ptn *}} {
set themes [list]

foreach pkg [lsearch -inline -all -glob [package names] ttk::theme::$ptn] {
lappend themes [namespace tail $pkg]
}

return $themes
}

[Brad Lanam]

That's not a supported routine.
I will change the package name to be without the leading :: .

[two...@gmail.com]

On Tuesday, September 4, 2018 at 10:07:15 PM UTC-7, Brad Lanam wrote:

> That's not a supported routine.
> I will change the package name to be without the leading :: .

I figured as much. I must have copied an example way back when and been using it all along.

The other theme namespaces or package names don't begin with :: so you will be consistent now.

One thing I find, on buttons, the text is getting left justified, even an image ends up on the left. Is this intended? With the other built in themes, it is centered.

[Brad Lanam]

I do not specifically change any of the anchors.
You're right, most, but not all of themes default to a center anchor
for buttons.
I can change that to be more like the default of the majority.

Thanks so much for the feedback.

[onem...@gmail.com]

I've downloaded both of your themes, and tried them with my current TTK application. My app doesn't look good as awdark (better in awlight), but it did show one missing piece: I use ttk::separator, and that still shows as unchanged from the prior style. (It's unchanged in awlight as well, but because the background colors are very close one has to look very closely to see the mismatch.)

Not sure why some components need to be poked individually; that seems like a flaw in the style mechanism.

Thanks for the work, and for a good demo of a functional reskin. Next time I'm between projects, I'll see what I can do on my own.

--Erik

[Brad Lanam]

On Thursday, September 6, 2018 at 1:55:18 PM UTC-7, onem...@gmail.com wrote:
> I've downloaded both of your themes, and tried them with my current TTK application. My app doesn't look good as awdark (better in awlight), but it did show one missing piece: I use ttk::separator, and that still shows as unchanged from the prior style. (It's unchanged in awlight as well, but because the background colors are very close one has to look very closely to see the mismatch.)
>
> Not sure why some components need to be poked individually; that seems like a flaw in the style mechanism.
>
> Thanks for the work, and for a good demo of a functional reskin. Next time I'm between projects, I'll see what I can do on my own.

Actually, the separator is picking up the proper color.

The problem with it and some other widgets is that they automatically
calculate the lighter and darker colors on their own and use those
to create the relief. And generally the calculated lighter color is
too light.

With some of the widgets I can choose the light and dark colors and the
relief turns out better.

Lots of various flaws in the style mechanism.

[onem...@gmail.com]

Are you sure it's getting the right color? Here's a screen shot, with all the project-specific text blurred to protect the... well, me.

https://imgur.com/a/WGrEfvO

The separator is doing an epicly bad job of choosing a background color if this is what it chose.

Hope this is of interest,

--Erik

[Brad Lanam]

It looks like you need a

. configure -background [ttk::style lookup TFrame -background]

There are helper routines to set the menu colors and the text widget colors.

See: http://wiki.tcl-lang.org/55511

[Brad Lanam]

The root (.) and toplevel frames are not ttk frames and their background
must be configured separately. The menu, listbox and text widgets also
must be configured on a per widget basis.

So I have something similar to:

proc configureMenuColors { w } {
set theme [ttk::style theme use]
if { [info commands ::ttk::theme::${theme}::setMenuColors] ne {} } {
::ttk::theme::${theme}::setMenuColors $w
} else {
# configure menu colors the manual way
}
}

And of course similar things can be done for text and listbox widgets.

[onem...@gmail.com]

Aha! That makes perfect sense, that the separator is picking up the background non-ttk frame and matching it instead of the adjacent frames. I'll collect a list of the non-ttk elements in the design and use the idiom you suggest to update their backgrounds to match the chosen style.

Thanks for the suggestion!

--Erik

[Alexandru]

I'm using the awedark theme but I also need to change back to vista unter Windows 10:

ttk::style theme use vista

It's not a big issue, but after switching back to vista, the drop down menu of ttk::combobox still have the dark colors.

How can this behavior be explained?

Thanks
Alexandru

[Brad Lanam]

The awdark theme sets the combobox's listbox background colors:
option add *TCombobox*Listbox.background $colors(curr.dark)
&etc.
Since the listbox is not a ttk widget, it will retain the colors that were
set when switching themes.

All other themes use a light colored background for entry, and leave
the listbox colors alone, or don't change the listbox colors.

When switching themes, I just require the user to exit and restart my
application. It is just really difficult to reset all the colors for
the various widgets and megawidgets.

Any use of a non-ttk widget, menus, listboxes and text areas just make
life difficult when switching themes.

I just now thinking of a way the particular issue with the combobox's
listbox might be resolved for the awdark theme. I'll have to do some
research.

[Brad Lanam]

There's no good way to reset the combobox listbox colors.
I can reset the colors in the option database, but the combobox's listbox
has already been instantiated, and will not reset its colors automatically
(its not a ttk widget).

[Alexandru]

> ... and will not reset its colors automatically

> (its not a ttk widget).

I'm actually talking about ttk::combobox, which is a ttk widget, right?

[Alexandru]

> When switching themes, I just require the user to exit and restart my
> application. It is just really difficult to reset all the colors for
> the various widgets and megawidgets.

In my case, restarting the app is not an option. I'm using the dark theme only for the splash window, while the app is loaded in the background. Then I close the splash window, switch to vista theme and show the actual UI. I hope it's clear now, why restarting the app makes no sense.

[Brad Lanam]

Sure, that makes sense.

The popdown listbox used by the ttk::combobox is not a ttk widget.

If it doesn't bother you to have the popdown listbox in a different style,
you can just comment out the 'option add' lines in awdark.tcl. This would
only matter if you have a combobox in your splash screen.

I can put in the code to reset the combobox's listbox colors upon the
change of theme. This should work ok for you, because the combobox listboxes
in your main program have not yet been instantiated.

[Brad Lanam]

Ok, I have re-coded the theme(s) to not change the option database, and
I use a different method to set the combobox's listbox colors.

I have also merged the awdark and awlight themes into a single package.

Version 2.0:
- Add setBackground(), setHighlight() routines.
If wanted, these require the colorutils package.
- Remove the 'option add' statements and use a bind
to set the combobox's listbox colors.
- Merge awdark and awlight themes into a single package.
- More color cleanup.
- Make notebook top bar use dynamic colors.

https://gentoo.com/tcl/awthemes.tcl

Demo program
https://gentoo.com/tcl/demottk.tcl

If you want to use the setBackground or setHightlight routines, you will
need the color utilities:
https://gentoo.com/tcl/colorutils.tcl

[Brad Lanam]

On Tuesday, September 11, 2018 at 3:03:03 PM UTC-7, Brad Lanam wrote:
> If you want to use the setBackground or setHightlight routines, you will
> need the color utilities:
> https://gentoo.com/tcl/colorutils.tcl

Had a few bugs in the colorutils.tcl package.
If you grabbed this early, make sure you have the 4.3 version,
download it again if you need to.

[Alexandru]

One more incompability discovered: My old customization for white ttk::frames does not work anymore after switching back from darktheme to vista:
ttk::style configure White.TFrame -background white

[Brad Lanam]

Did you switch the main frame back also?
. configure -background white

[Alexandru]

No, I didn't. I thought the style definition

ttk::style configure White.TFrame -background white

is persistent like a CSS definition.

No I packed this into a proc and execute the proc after setting the vista style.
Problem solved.
Many thanks!

[Brad Lanam]

White.TFrame should be = current TFrame +
whatever changes are made to White.TFrame.
The changes made should be persistent.

Not sure what happened in your case.

% ttk::style configure TFrame -background blue
% ttk::style configure White.TFrame -background white
% ttk::style lookup TFrame -background
blue
% ttk::style lookup White.TFrame -background
white
% ttk::style configure TFrame -background green
% ttk::style lookup TFrame -background
green
% ttk::style lookup White.TFrame -background
white
%