Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

theme: fix flash on non-default variant #757

Open
JohannOberdorfer opened this issue Jan 19, 2024 · 4 comments
Open

theme: fix flash on non-default variant #757

JohannOberdorfer opened this issue Jan 19, 2024 · 4 comments
Labels
bug Something isn't working idea A valuable idea that's currently not worked on

Comments

@JohannOberdorfer
Copy link 

          > 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 #175 (comment)
@JohannOberdorfer
Copy link
Author

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 <script> tag needs to be added directly behind the tag to eliminate blinking of a page for dark mode:

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?

@McShelby McShelby changed the title > 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 theme: fix flash on non-default variant Jan 19, 2024
@McShelby McShelby added bug Something isn't working idea A valuable idea that's currently not worked on labels Jan 19, 2024
@McShelby
Copy link
Owner

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

@McShelby
Copy link
Owner

McShelby commented Apr 2, 2024

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.

@McShelby McShelby added this to the 6.0.0 milestone Apr 3, 2024
@McShelby
Copy link
Owner

McShelby commented Apr 3, 2024 •
edited
Loading

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

@McShelby McShelby removed this from the 6.0.0 milestone Apr 18, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working idea A valuable idea that's currently not worked on
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@McShelby @JohannOberdorfer