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: 65
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: 626
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: 65
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: 65
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 (by ComponentOne)
SKamprowski
Sr. Propeller Head
 
Posts: 258
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: 65
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: 65
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: 5790
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: 82
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: 5790
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: 82
Joined: Fri Nov 07, 2014 4:29 am

Re: Light and dark themes for output

Postby IUseItAsACrash on Fri Jan 31, 2020 6:22 am

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

Re: Light and dark themes for output

Postby Dave Lee on Fri Jan 31, 2020 6:39 am

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
Dave Lee
Master Propellus Maximus
 
Posts: 5790
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Light and dark themes for output

Postby IUseItAsACrash on Fri Jan 31, 2020 7:07 am

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

Re: Light and dark themes for output

Postby Dave Lee on Fri Jan 31, 2020 7:51 am

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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5790
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Light and dark themes for output

Postby IUseItAsACrash on Fri Jan 31, 2020 9:37 am

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

Re: Light and dark themes for output

Postby Louise Bennett on Sun Feb 02, 2020 4:24 pm

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

Re: Light and dark themes for output

Postby Dave Lee on Mon Feb 03, 2020 1:16 am

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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5790
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Light and dark themes for output

Postby IUseItAsACrash on Mon Feb 03, 2020 6:11 am

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

Re: Light and dark themes for output

Postby Dave Lee on Mon Feb 03, 2020 6:43 am

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;
}
Dave Lee
Master Propellus Maximus
 
Posts: 5790
Joined: Mon Mar 05, 2007 8:33 am
Location: UK


Return to Styles, Stylesheets and XML

Who is online

Users browsing this forum: No registered users and 2 guests