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

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

theme: fix flash on non-default variant #757

JohannOberdorfer opened this issue Jan 19, 2024 · 4 comments
Labels
bug Something isn't working change Introduces changes with existing installations
Milestone
7.2.0

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
@McShelby McShelby added this to the 7.2.0 milestone Nov 30, 2024
@McShelby McShelby removed the idea A valuable idea that's currently not worked on label Dec 1, 2024
McShelby added a commit that referenced this issue Dec 7, 2024
@McShelby
theme: fix flash of non-default variant, part I #757
0505b36 
implements the first part, working for configured variants;

for that, loading of stylesheets was overhauled by now
merging all configured variants into one big stylesheet for
each output format and loading this instead of one stylesheet
per configured variant;

previously @media print styles were applied on top of @media screen
styles; this is now strictly isolated, which doesn't require styles
like neon to revert styles for print anymore;

this change was also used to implement the minify parameter, to shrink
those generated stylesheets, making them shrink to 66% of their
unminified size for the exampleSite;

the theme switcher functionality is now completely independend of
variant.js; the switch is now handled by in-page javascript which
avoids waiting for external scripts to load, so switching can happen
as early as possible;

switching of themes is now implemented by just setting a data attribute
to the html element, were previously a complex mechanism of dynamically
loading of variant CSS files was implemented;

the call for variant.js was removed in this changeset, making the
generator broken and useless; this will be fixed with the next patch;
McShelby added a commit that referenced this issue Dec 7, 2024
@McShelby
theme: fix flash of non-default variant, part II #757
deee4ae 
adapt the variant generator to previous changes;
interestingly, the new mechanism caused the variant generator
to be greatly simplified; something, I didn't expect beforehand
@McShelby McShelby closed this as completed Dec 7, 2024
@McShelby McShelby added the change Introduces changes with existing installations label Dec 7, 2024
McShelby added a commit that referenced this issue Dec 7, 2024
@McShelby
docs: honing #757
d159c08
McShelby added a commit that referenced this issue Dec 8, 2024
@McShelby
variantgenerator: avoid accidently overwriting of existing changes #757
5208766
McShelby added a commit that referenced this issue Dec 8, 2024
@McShelby
variantgenerator: always download the selected variant #757
b6ba7c2
@Ynn Ynn mentioned this issue Jan 25, 2025
Closed
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 change Introduces changes with existing installations
Projects
None yet
Milestone
7.2.0
Development

No branches or pull requests
2 participants
@McShelby @JohannOberdorfer