[tw] [TW5] Fixing snow white theme for vieweing in systems with dark themes

[Lorenzo]

Hi,

I'm trying to fix some glitches (see the attached file
*original_on_dark.png*) with buttons and input boxes I observed when I
switched to a dark theme for my system.

While selecting the input boxes its very easy because it seems they all
have a specific class or are placed in a specific container, selecting some
button seems a bit difficult, because most of them have no class and I
don't know how easily distinguish them from some other.

For example, look at the attachment "*fixing_on_dark.png*" where I applied
a style to the input boxes and the buttons of the edit view.
Selecting the button "*add*" tag is easy because it's inside a *span* with
the class "*tc-add-tag-button*", but how can I apply the new style only to
the button "*show preview*" without affecting the buttons of the edit
tiddler toolbar?

I don't want to specify the full path to the button, so I added a class to
some of these buttons, but wouldn't be preferable to add some specific
classes directly into the source?

Bye,
Lorenzo

[Jeremy Ruston]

Hi Lorenzo

Post by Lorenzo
I'm trying to fix some glitches (see the attached file

original_on_dark.png) with buttons and input boxes I observed when I
switched to a dark theme for my system.

An interesting problem. Which operating system do you use?

I'm guessing that your browser is aware of the dark theme, and is switching
the built in stylesheet so that text is white on a black background. The
glitches are the places that TiddlyWiki is not overriding the built-in
browser styles.

So, it ought to be fixable by adding a few explicit rules. Try creating a
tiddler $:/myStylesheet and the tag $:/tags/Stylesheet and the following
content:

textarea, input, button {
color: <<colour foreground>>;
background-color: <<colour background>>;
}

The trouble with that is that I think it will disrupt the display of
buttons on other systems, where the built-in browser styles actually apply
the platform look and feel to the buttons. But anyhow, let me know if it
works.

Post by Lorenzo
I don't want to specify the full path to the button, so I added a class

to some of these buttons, but wouldn't be preferable to add some specific
classes directly into the source?

I think there are a few places where we could do with adding some further
classes to aid subsequent theming.

Best wishes

Jeremy

Post by Lorenzo
Hi,
I'm trying to fix some glitches (see the attached file
*original_on_dark.png*) with buttons and input boxes I observed when I
switched to a dark theme for my system.
While selecting the input boxes its very easy because it seems they all
have a specific class or are placed in a specific container, selecting some
button seems a bit difficult, because most of them have no class and I
don't know how easily distinguish them from some other.
For example, look at the attachment "*fixing_on_dark.png*" where I
applied a style to the input boxes and the buttons of the edit view.
Selecting the button "*add*" tag is easy because it's inside a *span*
with the class "*tc-add-tag-button*", but how can I apply the new style
only to the button "*show preview*" without affecting the buttons of the
edit tiddler toolbar?
I don't want to specify the full path to the button, so I added a class to
some of these buttons, but wouldn't be preferable to add some specific
classes directly into the source?
Bye,
Lorenzo
--
You received this message because you are subscribed to the Google Groups
"TiddlyWiki" group.
To unsubscribe from this group and stop receiving emails from it, send an
Visit this group at http://groups.google.com/group/tiddlywiki.
For more options, visit https://groups.google.com/d/optout.

--
Jeremy Ruston
mailto:***@gmail.com

[Lorenzo]

Hi Jeremy,

thanks for the reply.

My O.S. is Linux with KDE, and my browser is Firefox. Firefox can handle
well dark themes on "bare components", obviously, when the system theme is
well made...

I already tried your suggestion before to post my question, sorry for not
to mention it, but I did not think it was useful. Indeed it works, but it
seems to reset the "default controls theme", if I can call so, giving the
ugly result you can see in the attachment "*fixing_on_dark_02.png*". Due to
that result, I decided to write a complete theme for the form controls to
make the wiki theme independent from the system one.
Testing this theme brought me to to start this thread.

I thought of two solutions: one is about to introduce some new classes for
the "bare controls", presented in my firs post, the second is about to try
to style the components before the snow white theme is applied, but
probably this solution requires some style reset buttons like the hidden
ones.
In the last case, it's probably better to write a complete new theme and
this is what I'm thinking to do. In any case, if it's possible to add a
class like ".tc-bare-<control>" on buttons or inputs without a class, it
could simplify the work.

Just in case, I tested how the browser renders these controls on a very
simple page without any style. The result in the attachment "
*simple_page.png*" (the code of the page is in the textbox). Due to the
appearance of the simple page, I think there is something that change the
(system) default color of the text for button and input boxes.

Bye,
Lorenzo

[Jeremy Ruston]

Hi Lorenzo

I already tried your suggestion before to post my question, sorry for not

Post by Lorenzo
to mention it, but I did not think it was useful. Indeed it works, but it
seems to reset the "default controls theme", if I can call so, giving the
ugly result you can see in the attachment "*fixing_on_dark_02.png*". Due
to that result, I decided to write a complete theme for the form controls
to make the wiki theme independent from the system one.
Testing this theme brought me to to start this thread.

I'm not sure that I'm seeing the problem with fixing_on_dark_02.png; is it
just that some of the controls have an overly dark border?

But in any case, creating a new theme seems like a good way to go.

Post by Lorenzo
I thought of two solutions: one is about to introduce some new classes for
the "bare controls", presented in my firs post, the second is about to
try to style the components before the snow white theme is applied, but
probably this solution requires some style reset buttons like the hidden
ones.
In the last case, it's probably better to write a complete new theme and
this is what I'm thinking to do. In any case, if it's possible to add a
class like ".tc-bare-<control>" on buttons or inputs without a class, it
could simplify the work.

In terms of styling the bare controls, I don't think adding classes to the
underlying widgets will help because that won't help you distinguish
between different buttons. Presumably the better answer is to add the
classes to the appropriate widget invocations. I'll happily accept pull
requests for those.

Post by Lorenzo
Selecting the button "add" tag is easy because it's inside a span with

the class "tc-add-tag-button", but how can I apply the new style only to
the button "show preview" without affecting the buttons of the edit tiddler
toolbar?

Possibly a CSS3 selector could be used to target buttons that do not have
the class tc-btn-invisible?

Post by Lorenzo
Just in case, I tested how the browser renders these controls on a very
simple page without any style. The result in the attachment "
*simple_page.png*" (the code of the page is in the textbox). Due to the
appearance of the simple page, I think there is something that change the
(system) default color of the text for button and input boxes.

Yes, that's consistent with my suggestion that Firefox changes the user
agent stylesheet when the dark theme is selected.

Best wishes

Jeremy

Post by Lorenzo
Bye,
Lorenzo

--
Jeremy Ruston
mailto:***@gmail.com

[Lorenzo]

Hi Jeremy,

I'm not sure that I'm seeing the problem with fixing_on_dark_02.png; is it

Post by Jeremy Ruston
just that some of the controls have an overly dark border?

the problem is simply aesthetic: the buttons lose the system theme and
represented as a square 3D button.

Post by Jeremy Ruston
In terms of styling the bare controls, I don't think adding classes to the
underlying widgets will help because that won't help you distinguish
between different buttons. Presumably the better answer is to add the
classes to the appropriate widget invocations. I'll happily accept pull
requests for those.

Adding classes helps giving the possibility to select those controls after
the tw-theme is applied, so I need only to write the CSS for a few controls
instead of duplicate/rewrite the theme with the directive in the correct
order - mainly because I'm lazy :P, but also because sometimes I want to
apply some changes "on the fly", wherever I am... -.

Anyway I know that it's better to derive the theme, even more now that I
decided to customize the buttons to make them appear the same on every
browser (well... at least the ones with CSS3 support, I think) in every
system.

Post by Jeremy Ruston
Just in case, I tested how the browser renders these controls on a very

Post by Lorenzo
simple page without any style. The result in the attachment "
*simple_page.png*" (the code of the page is in the textbox). Due to the
appearance of the simple page, I think there is something that change the
(system) default color of the text for button and input boxes.

Yes, that's consistent with my suggestion that Firefox changes the user
agent stylesheet when the dark theme is selected.

Mh... what I said here, I think, it's a bit confused: what I meant to say
was that something in the theme changes the system color for the text.

The last time I was looking for strings that look like a color code
inspecting the components with Firebug. A very stupid mistake!
This evening I finally decided to seriously spend some time to check where
the tw-theme changes the color of the text, this time, searching for "
*color*" as I should have done before... 2 seconds after I found my
response:

# $:/themes/tiddlywiki/vanilla/reset

button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}



"*color: inherit*" refers to the "*foreground*" color. In Snow White this
color is *#333333*. So Snow White changes the foreground color of the
system theme with a darker one, but does not change the background color
because in bright themes there is no need to do so.

Now I can think of two possible solutions:
1. to apply a bright background to the input controls (at least text boxes
and textareas) like "*<<color background>>*"
2. to remove the declaration "*color: inherit*" from the input controls to
leave the system color

The first point is more coherent with the theme.

There are other points where the foreground color is changed:

# $:/themes/tiddlywiki/vanilla/base

.tc-sidebar-lists input { color: #333333; }

.tc-sidebar-lists button { color: #333333; fill: #333333; }


Putting all together in the CSS below, the Snow White theme becomes more
system-aware, like in the last attachment.


button, input, optgroup, select, textarea {
background: inherit;
font: inherit;
}

/* ** trying to select "Tag manager" button ** */
.tc-sidebar-lists button:not(.tc-btn-invisible, .tc.tabs-buttons) {
background: <<color background>>;
color: <<color foreground>>;
fill: <<color foreground>>;
}

.tc-sidebar-lists input {
background: <<color background>>;
color: <<color foreground>>;
}



As you should be able to see, the old 3D style button problem still exists,
also I don't knew how to select the "Tag manager" button (I mean, without
changing the theme directly) and radiobuttons and checkboxes aren't
affected (but I'm planning to find a way to change them using only the CSS,
like the buttons in "*fixing_on_dark.png*", ehm... and maybe with a better
look...).

I wrote my conclusions so far in case you want to make the embedded themes
more "portable" over different systems.


Sorry for the long post ._.


Bye,
Lorenzo

[Jeremy Ruston]

Hi Lorenzo

Apologies for the delayed response.

I tried the changes you suggested and maddeningly, they cause problems in
Chrome and perhaps other browsers. It causes the sidebar buttons to be
rendered as old-style CSS buttons, instead of the native buttons that
browsers will use if the defaults are not modified. (Hopefully you'll see
the difference with the attached screenshots).

So I think the best approach might be a new "dark" theme that makes the
necessary adjustments.

Can you perhaps target the "tag manager" button with:

.tc-more-sidebar .tc-tab-content button

Best wishes

Jeremy.


Best wishes

Jeremy.

Post by Lorenzo
Hi Jeremy,
I'm not sure that I'm seeing the problem with fixing_on_dark_02.png; is it

Post by Jeremy Ruston
just that some of the controls have an overly dark border?

the problem is simply aesthetic: the buttons lose the system theme and
represented as a square 3D button.

Post by Jeremy Ruston
In terms of styling the bare controls, I don't think adding classes to
the underlying widgets will help because that won't help you distinguish
between different buttons. Presumably the better answer is to add the
classes to the appropriate widget invocations. I'll happily accept pull
requests for those.

Adding classes helps giving the possibility to select those controls after
the tw-theme is applied, so I need only to write the CSS for a few controls
instead of duplicate/rewrite the theme with the directive in the correct
order - mainly because I'm lazy :P, but also because sometimes I want to
apply some changes "on the fly", wherever I am... -.
Anyway I know that it's better to derive the theme, even more now that I
decided to customize the buttons to make them appear the same on every
browser (well... at least the ones with CSS3 support, I think) in every
system.

Post by Jeremy Ruston
Just in case, I tested how the browser renders these controls on a very

Post by Lorenzo
simple page without any style. The result in the attachment "
*simple_page.png*" (the code of the page is in the textbox). Due to the
appearance of the simple page, I think there is something that change the
(system) default color of the text for button and input boxes.

Yes, that's consistent with my suggestion that Firefox changes the user
agent stylesheet when the dark theme is selected.

Mh... what I said here, I think, it's a bit confused: what I meant to say
was that something in the theme changes the system color for the text.
The last time I was looking for strings that look like a color code
inspecting the components with Firebug. A very stupid mistake!
This evening I finally decided to seriously spend some time to check where
the tw-theme changes the color of the text, this time, searching for "
*color*" as I should have done before... 2 seconds after I found my
# $:/themes/tiddlywiki/vanilla/reset
button, input, optgroup, select, textarea {
color: inherit;
font: inherit;
margin: 0;
}
"*color: inherit*" refers to the "*foreground*" color. In Snow White this
color is *#333333*. So Snow White changes the foreground color of the
system theme with a darker one, but does not change the background color
because in bright themes there is no need to do so.
1. to apply a bright background to the input controls (at least text boxes
and textareas) like "*<<color background>>*"
2. to remove the declaration "*color: inherit*" from the input controls
to leave the system color
The first point is more coherent with the theme.
# $:/themes/tiddlywiki/vanilla/base
.tc-sidebar-lists input { color: #333333; }
.tc-sidebar-lists button { color: #333333; fill: #333333; }
Putting all together in the CSS below, the Snow White theme becomes more
system-aware, like in the last attachment.
button, input, optgroup, select, textarea {
background: inherit;
font: inherit;
}
/* ** trying to select "Tag manager" button ** */
.tc-sidebar-lists button:not(.tc-btn-invisible, .tc.tabs-buttons) {
background: <<color background>>;
color: <<color foreground>>;
fill: <<color foreground>>;
}
.tc-sidebar-lists input {
background: <<color background>>;
color: <<color foreground>>;
}
As you should be able to see, the old 3D style button problem still
exists, also I don't knew how to select the "Tag manager" button (I mean,
without changing the theme directly) and radiobuttons and checkboxes aren't
affected (but I'm planning to find a way to change them using only the CSS,
like the buttons in "*fixing_on_dark.png*", ehm... and maybe with a
better look...).
I wrote my conclusions so far in case you want to make the embedded themes
more "portable" over different systems.
Sorry for the long post ._.
Bye,
Lorenzo

--
Jeremy Ruston
mailto:***@gmail.com