Light and dark themes for output

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Louise Bennett
Propeller Head
Posts: 81
Joined: Mon Apr 04, 2016 7:53 pm

Light and dark themes for output

Post by Louise Bennett »

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.
Psider
Propellus Maximus
Posts: 811
Joined: Wed Jul 06, 2011 1:32 am

Re: Light and dark themes for output

Post by Psider »

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
Louise Bennett
Propeller Head
Posts: 81
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Post by Louise Bennett »

Awesome! This looks like just what I need.

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

Re: Light and dark themes for output

Post by Louise Bennett »

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.
SKamprowski
Sr. Propeller Head
Posts: 277
Joined: Fri Feb 13, 2015 8:25 am
Location: Germany

Re: Light and dark themes for output

Post by SKamprowski »

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 (by ComponentOne)
Louise Bennett
Propeller Head
Posts: 81
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Post by Louise Bennett »

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: 81
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Post by Louise Bennett »

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.
QPerch
Jr. Propeller Head
Posts: 6
Joined: Fri May 24, 2019 12:58 pm

Re: Light and dark themes for output

Post by QPerch »

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.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Light and dark themes for output

Post by NorthEast »

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.
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Re: Light and dark themes for output

Post by rogersm »

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?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Light and dark themes for output

Post by NorthEast »

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
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Re: Light and dark themes for output

Post by rogersm »

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 :)
IUseItAsACrash
Propeller Head
Posts: 22
Joined: Wed Jan 30, 2019 2:37 am

Re: Light and dark themes for output

Post by IUseItAsACrash »

I'm reviving this thread because I'm trying to create a dark theme for my topnav output.

I have enabled the dark mode skin in the target, but still have questions...

- Do I need a separate stylesheet?
- How do I associate this stylesheet with the dark mode skin?

Any help is appreciated.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Light and dark themes for output

Post by NorthEast »

IUseItAsACrash wrote:I'm reviving this thread because I'm trying to create a dark theme for my topnav output.

I have enabled the dark mode skin in the target, but still have questions...

- Do I need a separate stylesheet?
- How do I associate this stylesheet with the dark mode skin?

Any help is appreciated.
You don't need a separate stylesheet - you can write CSS that's specific for the skin.

See the topic that was mentioned earlier in the thread: viewtopic.php?f=9&t=31713
IUseItAsACrash
Propeller Head
Posts: 22
Joined: Wed Jan 30, 2019 2:37 am

Re: Light and dark themes for output

Post by IUseItAsACrash »

Thanks for the reply!

I just tried it but I must be doing something wrong.

The skin's name is Dark Mode. The end URL is .htm?skinName=Dark_Mode

I added the following to my stylesheet:

html.Dark_Mode h1
{
font-size: 1.5em;
font-weight: normal;
margin-bottom: 8px;
padding-bottom: 8px;
margin-top: 30px;
font-family: Roboto Black, Arial, Avenir, Myriad;
font-color: #FFFFFF;
mc-hyphenate: never;
}

This seems to be incorrect.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Light and dark themes for output

Post by NorthEast »

IUseItAsACrash wrote:The end URL is .htm?skinName=Dark_Mode
It isn't the name in the URL. I explain in the other post that you use the class name that Flare uses on the html tag, which is usually _Skins_<YourSkinName>.
Dave Lee wrote:Yep, it should be fairly easy to do.

The skin's name is included as a class on the html tag, such as "_Skins_YourSkinName" (at least when using a HTML5 top nav skin).
You can see this if you press F12 in your browser (to open developer tools), and look at the html tag.

So that means you could set up your CSS based on the skin's class name.

For example, to make the h1 red with a particular skin, you could use something like:

Code: Select all

html._Skins_YourSkinName h1 
{ 
   color: red; 
}
IUseItAsACrash
Propeller Head
Posts: 22
Joined: Wed Jan 30, 2019 2:37 am

Re: Light and dark themes for output

Post by IUseItAsACrash »

Thank you.

I just took a look at the HTML after switching to dark mode from the menu. All the changes made in the skin are displayed but the HTML tag still says "class="_Skins_Light_Mode".
Louise Bennett
Propeller Head
Posts: 81
Joined: Mon Apr 04, 2016 7:53 pm

Re: Light and dark themes for output

Post by Louise Bennett »

I thought people might be interested in my experience in dark/light themes now that we have had ours implemented for a number of months and undergone some usability testing.

We found that when users were switching between light and dark themes, some were experiencing a flicker in their browser screen. I had a conversation with MadCap and they said that this was a known issue and they were trying to implement a more smooth transition between the themes as a future enhancement. As a result we dropped out dark theme as we didn't want to risk a poor experience for some of our customers. We plan to revisit it when the feature has been improved.

Louise.
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Light and dark themes for output

Post by NorthEast »

IUseItAsACrash wrote:Thank you.

I just took a look at the HTML after switching to dark mode from the menu. All the changes made in the skin are displayed but the HTML tag still says "class="_Skins_Light_Mode".
It definitely does change the html tag class.

You won't see it change if you're looking at the HTML using "view page source" in the browser, or opening the htm file in a text editor.

You need to inspect the live HTML by pressing F12 in your browser, as the HTML tag class is changed by javascript when you use a different skin.

Anyway, have you actually tried using the skin name in your CSS?

Code: Select all

html._Skins_Dark_Mode h1
{
   color: red;
}
IUseItAsACrash
Propeller Head
Posts: 22
Joined: Wed Jan 30, 2019 2:37 am

Re: Light and dark themes for output

Post by IUseItAsACrash »

Thank you again.

I finally got it to work, but I still don't know how to set the dark mode styles for the side menu. Do I create a dark mode side menu skin? If so, how do I connect it to the dark mode skin?
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Light and dark themes for output

Post by NorthEast »

If you're using a skin for the menu proxy, then that isn't connected to the Top Nav skin (that you specify in the CSH call). So you can't link the two skins together.

I think the only way to do it is to set styles manually in your CSS using the same sort of technique. To do this you'll need to inspect the ouput HTML and work out what tags and classes are used in the menu proxy in the output. For example:

Code: Select all

html._Skins_YourSkinName ul._Skins_YourMenuSkinName
{
   background-color: red;
}
Post Reply