-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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
Add adaptive skin: solarized
#594
Conversation
I think this would be awesome to have for the default skins as well, since there's now a light and a dark skin. Is this something you'd be able to do in a follow up PR? |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about renaming solarized
to solarized-light
and then renaming solarized-auto
to solarized
so that the prefers-color-scheme
query is used by default?
I like making
Sounds like fun! Would that mean adding a |
Awesome! Thanks!
Yes, exactly. Looking forward to seeing that when you're able to make some time for it. 🙂 |
Setting the skin to 'solarized' now determines light or dark automatically. The always light and always dark skins are named 'solarized-light' and 'solarized-dark' respectively.
I made the changes to the skin names so that |
There is another thing to consider before merging this PR: do you still need to support Internet Explorer? This implementation makes use of CSS variables, which IE does not support. So if you'd now test this new All other browsers have been supporting CSS variables for years, and IE is going end of life in five months, but it might still be an unexpected result for users. Of course there are possible workarounds, but they would require some tinkering with the rest of the minima skin mechanism. Normally, when you want to use CSS variables and also support IE, you just use the standard CSS fallback mechanism, i.e.: .foo {
color: black; /* fallback for Internet Explorer */
color: var(--my-color); /* supported by all other browsers */
} But of course we cannot wrap all that into a single Sass variable that is being assigned to a color attribute only once. There are different ways to solve this: load a different stylesheet if IE is detected, or rewrite the theme to use Sass mixins that allow fallback rules. But if supporting IE is not a requirement then I think sticking to the current implementation would be the most elegant. |
@sandervoerman Please update the PR title and opening comment as well. |
My take on this is that IE support is no longer a priority. |
solarized
@jekyllbot: merge +major |
Thank you @sandervoerman and @mattr- for making this happen! Now that this is in master, how do we get this into our own Jekyll apps? will this be part of a specific version of minima? Just looking for some guidance on how to update my Jekyll minima theme to include these updates. |
The best way is to use the jekyll-remote-theme plugin and configure it to use minima and i believe (not 100% sure) that it'll pull the latest from GitHub and you'll have it. |
Thanks @mattr- I updated my _config.yml file to look like: ...
minima:
skin: solarized
social_links:
github: rrevi
linkedin: rafaelrevi
remote_theme: jekyll/minima
plugins:
- jekyll-feed
- jekyll-seo-tag
- jekyll-remote-theme and when I run
Which leads to me believe all is fine. However, when I run Do you or @sandervoerman have any thoughts what might be going on? Thanks in advance |
With the use of the jekyll-remote-theme plugin, you want to make sure to remove any skin directory/files in the _sass/minima path. |
Hi all,
This PR changes the
solarized
skin so that it uses the prefers-color-scheme media query to detect whether the visitor's operating system is using dark mode:solarized-dark
;solarized-light
;solarized-light
skin behaves like thesolarized
skin before this PR.Additional notes:
solarized-light
andsolarized-dark
skins produce the exact same CSS as thesolarized
andsolarized-dark
skins before this PR.solarized
skin setting is a bit different however, because it makes use of CSS custom properties to select the appropriate colors depending on the media query (see comment on IE support below).