Add dark mode #65
Merged
Add dark mode #65
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
added 19 commits
March 25, 2022 04:09
It can be enabled using the `toc: true` field in the frontmatter. It auto-expands on hover. If JS is enabled, the expansion is animated. The animation is apparently impossible to implement without JS :( On mobile, expands and unexpands on tap instead of hover.
Why this works is a mystery, but it sure does.
That means: a little HTML template, a JS file plus some CSS to make the icon appear roughly properly.
Except in _syntax.scss. That will be annoying. Eventually, I I should also figure out what that file is for.
Implement nice transitions, add first version of dark color scheme, merge with other transitions properly.
Also a few minor tweaks,
This is ugly, but the RGB values are generated server side so some workaround had to be found.
Only when the toggle button is actually clicked.
This makes the default background color not flash for a split second after the page is loaded.
The relationship of `z-index:` and `filter:` is complicated.
This required a little refactoring of the code, but it hopefully became more robust this way.
|
(friendly ping) |
Closed
cloudlena
pushed a commit
to cloudlena/tale-hugo
that referenced
this pull request
Feb 10, 2024
Add dark mode See EmielH#65
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Saves state in local storage, integrates with the OS level dark mode preference (I think), is nicely animated, I even took care that syntax highlighting results in more subdued colors.
This branch is currently on top of the table of contents one because that one defines an extra color, so I found it convenient to work on top of it. There were also a number of undesirable interactions between the two, so I feel vindicated in my decision to test the two together.