Comments (5)
Just wanted to share a few themes I found yesterday that do this:
https://themes.gohugo.io/theme/anatole/ (top right)
https://themes.gohugo.io/theme/hugo-coder/ (bottom right)
https://cupper-hugo-theme.netlify.app/ (scroll down)
from hugo-prose.
The README says this is work-in-progress. I'm not ready for feedback yet. The colors are kind of arbitrarily chosen. Thanks!
from hugo-prose.
Hi @yihui,
I'm playing with this today, and finding it really tricky to use/customize with the this inversion (even if the colors were changed). I think you could disable altogether (I did this on my personal site), as doing any kind of browser accessibility checks may be an endless vortex very time-consuming, as you'd have to ensure that both light and dark schemes meet minimum accessibility requirements.
If you want to keep, I do like having actual control over this setting within the browser window itself, as the academic theme does with the button in the top navbar:
https://academic-demo.netlify.app/
Without icons like feather or fontawesome (which I think eventually we'll need to make the theme more usable for people and teams, because folks need to link out to all the various things like GitHub, Twitter, Instagram, ImpactStory, ORCID, Patreon, Twitch, etc.), I can imagine you could do a CSS version of this kind of thing:
But I don't believe I've stumbled upon a site that uses this CSS trick, so it makes it surprisingly hard to work with. Also, as I am imagining teaching, it would be a nightmare to have screenshots, and to have different people sitting next to each other seeing drastically different websites locally, based on a setting they probably don't even realize they have on their own workstation.
At the least, I think we should move that bit of CSS to a partial layout file so you can turn it on/off with a setting in the configuration file. There may be a better way that I'm not familiar with too, but the main idea being that we make it a very clear "knob" in the main config file. I can offer a PR to do this, but wanted to open up the discussion first. But again, I'm not certain this is an actually important feature. As in, I think some users like to be able to switch between light/dark modes (that they can control), but I don't think it is the deciding factor for site authors between one theme vs another for most (vs say, search :))
from hugo-prose.
Ah hooray! Sorry for the pedantic issue then 😉
from hugo-prose.
@apreshill Rest assured that the dark mode will be both improved and configurable eventually. The simple inverse trick was there only as a proof of concept in the four-day old project, and definitely not meant to be delivered in the final product. Sorry I should have clarified that earlier, so you wouldn't need to spend the time trying to convince me. Thank you!
from hugo-prose.
Related Issues (20)
- Create & support author taxonomy HOT 1
- Consider a project archetype/layout
- Consider enabling panelsets/tabsets with R content HOT 2
- Visual editor mode snafus
- Consider grouping home page listing content by section + highlight listing pages better
- Allow disabling of author names on listing pages
- Chroma vs. highlight.js for syntax highlighting HOT 2
- Make footer stick to bottom
- add global sticky navbar option
- Support utterances in addition to disqus HOT 4
- GDPR compliance: cookie consent
- Allow setting levels for TOC globally
- Mobile home page is squashed to left.
- Enable scroll_highlight in TOC HOT 2
- Generation of repository name twice in URL HOT 2
- Consider an alternative of vertical side title? HOT 1
- 表格过宽溢出屏幕外怎么办 HOT 3
- Bug: hovering footnote <sup> also pulls all footnote after it within same <p> HOT 2
- Place TOC to the top when screen is too narrow to display it HOT 1
- Does hugo-prose support multiple level header menu? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hugo-prose.