Light and dark themes for output

This forum is for all Flare issues related to styles, stylesheets and XML.

Light and dark themes for output

Postby Louise Bennett on Sun Aug 04, 2019 7:50 pm

Hi all,

Does anyone know of a way to provide an option for users of our HTML5 output (Side Nav, Flare 2019) to enable them to switch between light and dark themed versions of the content? I guess its sort of like enabling them to switch between skins.

Cheers, Louise.

Louise Bennett

Content Strategist
Honeywell Process Solutions
Sydney, Australia.
Louise Bennett
Propeller Head
 
Posts: 55
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Postby Psider on Sun Aug 04, 2019 9:46 pm

Perhaps runtime skins?
https://help.madcapsoftware.com/flare20 ... -Skins.htm

And there's this forum post asking about changing the content styles when you pick a different skins:
viewtopic.php?f=9&t=31713
Psider
Propellus Maximus
 
Posts: 581
Joined: Wed Jul 06, 2011 1:32 am

Re: Light and dark themes for output

Postby Louise Bennett on Sun Aug 04, 2019 9:49 pm

Awesome! This looks like just what I need.

Thanks :)
Louise Bennett
Propeller Head
 
Posts: 55
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Postby Louise Bennett on Sun Aug 04, 2019 11:12 pm

OK, stage 2.

I have created a new skin and enabled the Select Skin icon. Now I am working on the CSS for the new (dark) skin. The linked topic talked about changing the color of individual styles (eg H1), but how would I go about changing the background color of the whole topic area? I found some help on how to do this for tripane skin, but not side-nav.

Louise.
Louise Bennett
Propeller Head
 
Posts: 55
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Postby SKamprowski on Mon Aug 05, 2019 12:58 am

Hi,

you can choose background color for html in your css, e.g. styles.css to the color you want.
Kind regards,
Sabine Kamprowski
DocToHelp MVP
SKamprowski
Sr. Propeller Head
 
Posts: 251
Joined: Fri Feb 13, 2015 8:25 am
Location: Germany

Re: Light and dark themes for output

Postby Louise Bennett on Mon Aug 05, 2019 6:50 pm

OK. I have set my body background and my fonts and so my dark theme is working as I would like it to, but there are two items that I'm having trouble with.

1. Tables. The table styles are in a separate CSS, so how do I cater for them? In my light theme they are light/dark alternate rows. This doesn't look great on the dark background so I'd like to be able to specify a different table CSS for the dark background version of the site.

2. The drop-down from the Select Skin icon is picking up the styles from the Side-Nav toolbar component skin. Its easy enough to crate a dark toolbar skin, but when the user selects dark skin from the drop-down, how do I make sure the site is calling a dark toolbar skin?

Thanks.

Louise.
Louise Bennett
Propeller Head
 
Posts: 55
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Postby Louise Bennett on Tue Aug 06, 2019 11:23 pm

Update: I fixed item one (the alternate tables style), but still haven't been able to find a fix for item 2 (the drop down from the Select Skin icon in the toolbar). The problem is that whatever background and font colors I select in the SideNav Topic Toolbar skin apply to both my light and dark themed site. I'd really like to be able to set a different look for them but can't figure out how.

Any ideas?

Louise.
Louise Bennett
Propeller Head
 
Posts: 55
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Postby QPerch on Thu Aug 22, 2019 1:37 pm

Hi,

I've been toying with the idea of making a dark theme for my topnav help file too. Have you tried using CSS variables instead of hard-coded colors? I found that it works for topics, but I'm not sure if skins respect those variables, since I define them in the styles.css file and I don't know if skins even touch the stylesheet. I haven't tested that yet. I think tables respect CSS variables, but I haven't tested them exhaustively yet.

I found a pretty good link about making a light/dark switch using some CSS and Javascript here. I'm not sure how well it'll work in Flare, but I'm using the info here as a base for now.
https://dev.to/ananyaneogi/create-a-dar ... ables-34l8

Edit: I just did some testing, and I think skins respect CSS variables too.
QPerch
Jr. Propeller Head
 
Posts: 6
Joined: Fri May 24, 2019 12:58 pm

Re: Light and dark themes for output

Postby Dave Lee on Wed Aug 28, 2019 12:00 am

QPerch wrote:Edit: I just did some testing, and I think skins respect CSS variables too.


You can manually enter CSS variables in the skin, and although they don't look like they work in Flare's skin editor, they do work ok in the browser. (TopNav and SideNav work ok, but not Tripane.)

However, this will not work if you need to support IE 11, and want to use Resolve CSS variables. Flare does not convert any variables in the skin, and leaves them all blank.
Dave Lee
Master Propellus Maximus
 
Posts: 5641
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Light and dark themes for output

Postby rogersm on Thu Aug 29, 2019 2:51 am

Slightly off topic, but just curious. If a user switches their browser between light and dark themes and the HTML output is viewed from the browser, is there any way for the CSS/Javascript to automatically detect this and display the appropriate colour scheme?
rogersm
Propeller Head
 
Posts: 72
Joined: Fri Nov 07, 2014 4:29 am

Re: Light and dark themes for output

Postby Dave Lee on Thu Aug 29, 2019 3:36 am

rogersm wrote:Slightly off topic, but just curious. If a user switches their browser between light and dark themes and the HTML output is viewed from the browser, is there any way for the CSS/Javascript to automatically detect this and display the appropriate colour scheme?


Yep, see the topic that was mentioned earlier in the thread: viewtopic.php?f=9&t=31713
Dave Lee
Master Propellus Maximus
 
Posts: 5641
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Light and dark themes for output

Postby rogersm on Fri Aug 30, 2019 5:07 am

Thanks very much Dave. I had started reading about a CSS media query called prefers-color-scheme to detect a user's browser colour preference but not sure how it could be used and I am far from a CSS expert :)
rogersm
Propeller Head
 
Posts: 72
Joined: Fri Nov 07, 2014 4:29 am


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 3 guests