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.

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

✨ feat: follow user OS theme with JS disabled #357

Merged
merged 1 commit into from
Jul 24, 2024
Merged

Conversation

welpo
Copy link
Owner

@welpo welpo commented Jul 23, 2024

Summary

Uses CSS variables to follow user OS settings even with JavaScript off. Now the atom feed preview follows the default_theme, defaulting to user OS preference.

Related issue

Idea from #330.

Changes

Updates CSS (adds 2KB), atom feed and feed styling xsl transformation.

Accessibility

No changes.

Type of change

  • Bug fix (fixes an issue without altering functionality)
  • New feature (adds non-breaking functionality)
  • Breaking change (alters existing functionality)
  • UI/UX improvement (enhances user interface without altering functionality)
  • Refactor (improves code quality without altering functionality)
  • Documentation update
  • Other (please describe below)

Checklist

  • I have verified the accessibility of my changes
  • I have tested all possible scenarios for this change
  • I have updated theme.toml with a sane default for the feature
  • I have made corresponding changes to the documentation:
    • Updated config.toml comments
    • Updated theme.toml comments
    • Updated "Mastering tabi" post in English
    • (Optional) Updated "Mastering tabi" post in Spanish
    • (Optional) Updated "Mastering tabi" post in Catalan

@welpo welpo added the enhancement New feature or request label Jul 23, 2024
Copy link

netlify bot commented Jul 23, 2024

Deploy Preview for tabi-demo ready!

Name Link
🔨 Latest commit 1028d1a
🔍 Latest deploy log https://app.netlify.com/sites/tabi-demo/deploys/66a03937d553db00085f5393
😎 Deploy Preview https://deploy-preview-357--tabi-demo.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@sam9032
Copy link
Contributor

sam9032 commented Jul 24, 2024

Nice!! Thank you 👍😊

@welpo welpo merged commit c7b7955 into main Jul 24, 2024
7 checks passed
@welpo welpo deleted the feat/css-os-theme branch July 24, 2024 17:14
@@ -107,6 +113,20 @@
}
}

@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
@include theme-variables('dark');
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Causes #378.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants