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

skins don't work as intended when OS theme is set to dark #379

Closed
welpo opened this issue Sep 12, 2024 · 3 comments · Fixed by #380
Closed

skins don't work as intended when OS theme is set to dark #379

welpo opened this issue Sep 12, 2024 · 3 comments · Fixed by #380
Labels
bug Something isn't working

Comments

@welpo
Copy link
Owner

welpo commented Sep 12, 2024 •
edited
Loading

Reported in #378. Most likely the bug was introduced in #357.

To reproduce:

  1. Set OS theme to dark
  2. Clone https://github.com/welpo/tabi.git
  3. Set skin = "red" in config.toml
  4. Run zola serve --open at the root of clone.

image

Originally posted by @JVimes in #378 (reply in thread)
@welpo welpo added the bug Something isn't working label Sep 12, 2024
@welpo
Copy link
Owner Author

welpo commented Sep 12, 2024 •
edited
Loading

Confirmed it was introduced with #357.

This line causes the issue. By including @include theme-variables('dark'); within the media query, we're applying the dark theme variables globally when the OS is in dark mode, unless the website theme is explicitly set to 'light'. This overrides the skin-specific styles because the :root selector has higher specificity than the skin's [data-theme='dark'] selector.

Adding !important to skin variables serves as a workaround.

welpo added a commit that referenced this issue Sep 12, 2024
@welpo
🐛 fix: improve dark mode and OS theme handling
bea9f15 
- Ensure dark theme applies when explicitly set or by OS preference.
- Fixes issues with admonition styling, skins, and social icons (footer).

Resolves #379.
@welpo welpo mentioned this issue Sep 12, 2024
Merged
16 tasks
welpo added a commit that referenced this issue Sep 12, 2024
@welpo
🐛 fix: improve dark mode and OS theme handling
f311ede 
- Ensure dark theme applies when explicitly set or by OS preference.
- Fixes issues with admonition styling, skins, and social icons (footer).

Resolves #379.
welpo added a commit that referenced this issue Sep 12, 2024
@welpo
🐛 fix: improve dark mode and OS theme handling
a9f6c23 
- Ensure dark theme applies when explicitly set or by OS preference.
- Fixes issues with admonition styling, skins, and social icons (footer).

Resolves #379.
@welpo
Copy link
Owner Author

welpo commented Sep 12, 2024

@JVimes should be fixed with #380. Let me know if you encounter any issues!

Thanks for reporting this and for using tabi~

@JVimes
Copy link
Contributor

JVimes commented Sep 12, 2024

Worked for me! Thank you, @welpo!

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
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

🐛 fix: improve dark mode and OS theme handling welpo/tabi
2 participants
@JVimes @welpo