hugo-theme-relearn theme: fix flash on non-default variant

          > One thing that I have noticed, is that when I click through the menu items of https://mcshelby.github.io/hugo-theme-relearn/ is that the site is "blinking" through a white background

This is a trade off of the theme switcher when you have selected a non default variant. The site first loads with the default variant and afterwards reapply the previous selected non-default variant. I tried to keep the switch as early as possible but there may be a recognisable flickering. Technically there is not much I can do about this - or at least I have no idea how to avoid this completly.

Btw: I really like the neonish style of the GoboLinux page! Really fun to read.

Hah thank you! I also find it makes is "fun" to read. Although I must say the heading colors are due to changes

I am really thinking about providing another neon variant in the showcase resembling your current style. Just for the fun :-)

Btw: I've "booked" a place in the showcase section of the exampleSite for the GoboLinux documentation.

Originally posted by @McShelby in https://github.com/McShelby/hugo-theme-relearn/issues/175#issuecomment-1042120177

Jan 19 '24 16:01 JohannOberdorfer

As of now and with the latest available source code this effect is still visible. I came up with a quick fix which solved the issue for server driven- and also in static- mode. The following

file: layouts\partials\header.html

 <body class="mobile-support
				{{ $outputFormat }}
				{{- if .Site.Params.disableInlineCopyToClipBoard }}	disableInlineCopyToClipboard {{ end }}
				{{- if .Site.Params.disableHoverBlockCopyToClipBoard }} disableHoverBlockCopyToClipBoard {{ end }}"
		data-url='{{ partial "relLangPrettyUglyURL.hugo" (dict "to" .) }}'>
	
	<!-- the following script code will fix flickering or blinking of a page
	     when a dark theme is currently set -->
 	<script>
		let stylesheet = window.localStorage.getItem( window.relearn.baseUriFull+'variant' );
		if (stylesheet == "dark") {
			document.documentElement.style.setProperty('--INTERNAL-MAIN-BG-color','rgba( 32, 32, 32, 1 )');
			document.documentElement.style.setProperty('--INTERNAL-BOX-BG-color','rgba( 20, 20, 20, 1 )');
		};
	</script>

This is no generic solution as the color codes are hard coded... Maybe a similar solution can be implemented in the repository?

Jan 19 '24 16:01 JohannOberdorfer

Because of the generator integration it is far more difficult and the reason why I layed off the fix initially.

Jan 19 '24 23:01 McShelby

Another, more generic way, to solve this is to rewrite some of the partial logic. Instead of storing each variant in its own CSS file in the resulting page, we could put them all together into one CSS and prefix each with a distinct class on the body element

See: https://alexandersandberg.com/articles/creating-a-website-theme-switcher-with-css-only/

The vaiant switch would only set the class on the body element, the rest is automatic. As all colors are already loaded, switch the colors should be much faster.

Apr 02 '24 18:04 McShelby

Note for myself:

The above works.

The idea is to change the code as follows:

merge all configured variants into one file by using Hugos resource functions each variant will be encapsulated eg. with
```
.theme-neon {
    &<..original content>
}
```
using CSS nesting
the html element will contain a class and/or data attribute containing the currently selected variant

By that, the variant switch will only need to set the class on the html element. As all variant styles are already loaded, the switch will happen instantly.

Care must be taken for the openapi shortcode. Either it needs to rebuild its iframe with the selected style (this is how it now works but is unpreferable as all expander boxes revert to their initial state after switching) or some script needs to change the iframes html element in the same way as the pages html element.

This may also require the variant stylesheets to move from static to assets which is preferable anyways.

For the temporary "custom variant" of the variant generator, there probably needs to be done some extra work.

Also it must be checked how hugo serve behaves if a variant stylesheet changes. If it doesn't work, we need a (configurable) way to achieve this as it otherwise slows down development on variant stylesheets unnessesarily.

As nested CSS selectors are not supported by IE11, this issue is postponed to theme version 6.0.0

Apr 03 '24 20:04 McShelby

hugo-theme-relearn hugo-theme-relearn copied to clipboard

theme: fix flash on non-default variant

hugo-theme-relearn
hugo-theme-relearn copied to clipboard