Earlier quoted context omitted.
If you just want chrome to be dark, you can install a dark theme such as: https://chrome.google.com/webstore/detail/just-black/aghfnjk...
I think you misread > UI chrome Versus > Chrome UI
Dark mode in a website with CSS
101–110 of 191 posts
Re: Dark mode in a website with CSS
#102Earlier quoted context omitted.
Nice site, it works well on mobile, which is a bit of a pleasant surprise when it happens from personal blogs etc.! FWIW the Twitter feed from, I assume, people you follow is a little odd though - it's not immediately clear that it's not you, nor about the article being viewed, which it doesn't necessarily have anything to do with, and it includes replies to threads. At the time of writing the top one is recommended…
Yeah, it bleeds a bit too much on mobile - younger brother passed away recently and I shoved the site out the door before heading back home to be with him. Desktop view has it more marked as separate content - e.g, that tweet is actually a Retweet with a comment, which is kind of a pain in the ass to handle from Twitter's API. Should find time to clear it up a bit I guess. Site works well on mobile because I cannot s…
The GitHub activity feed is pulling in every comment you make, see if you can filter that to only show pull requests you've created to showcase your work. Maybe also include commits to your own projects if the commit length is more than a certain number of characters to filter out the small updates.
Re: Dark mode in a website with CSS
#103yes yes there's browser plugins, but I'd rather not have some rando plugin potentially reading every site I visit to load a dark mode plugin on the ones it recognizes.
Re: Dark mode in a website with CSS
#104Re: Dark mode in a website with CSS
#105I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ... * Some diagrams had white backgrounds Solution: remove the backgrounds so they are transparent * Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds Solution: use CSS filter:invert for images * Some images are photos not di…
> Solution: filter: invert(1) hue-rotate(180deg);
This might be nominally acceptable, but it’s going to be pretty mediocre. Both of these methods dramatically distort color relationships from the original.
Getting someone to explicitly pick colors that work in dark mode will yield much better results. (Of course, takes a lot more manual work by an expert, instead of a few automatic text replacements.)
Re: Dark mode in a website with CSS
#106Earlier quoted context omitted.
Yeah, it bleeds a bit too much on mobile - younger brother passed away recently and I shoved the site out the door before heading back home to be with him. Desktop view has it more marked as separate content - e.g, that tweet is actually a Retweet with a comment, which is kind of a pain in the ass to handle from Twitter's API. Should find time to clear it up a bit I guess. Site works well on mobile because I cannot s…
Looking at the feed you should see if it's possible to exclude any tweets that begin with "RT" (retweets) or the "@" (replies). This way only posts you write should show in the feed, would make it much cleaner as without the full conversation contexts those other messages make no sense. The GitHub activity feed is pulling in every comment you make, see if you can filter that to only show pull requests you've created…
I'm perfectly happy showing my @replies, rando GitHub activity, etc. Nobody is actually reading that sidebar, short of a select few - I like having that junk indexed in search engines attributed to my own domain.
It's free real estate. :)
Re: Dark mode in a website with CSS
#107The problem is that this doesn't let the user toggle dark mode on/off. If you want the user to be able to toggle dark mode on your site without changing their Operating System preferences, then you'll need to implement your dark theme as a class (eg. body.theme-dark) since there's no way to dynamically set the media query. const darkMode = window.matchMedia('(prefers-color-scheme: dark)') if (darkMode) { document.bod…
Re: Dark mode in a website with CSS
#108Earlier quoted context omitted.
Is there anything which allows user choice (i.e. state) that doesn't involve JS?
Yes, although doing things without JS is old school web. I think you'd be hard pressed to find any clients that don't support JS in this era. Anyway, to accomplish this you would split your styles into seperate CSS files and then have a drop-down that does an HTTP POST/GET to a server side script that will then set a cookie on your browser with your preferred choice. Each time a request comes in from the client you j…
Re: Dark mode in a website with CSS
#109I recently added dark-mode support to a few sites. It took way more time then I thought it would. At first I thought "oh just add a few lines off CSS" but then ... * Some diagrams had white backgrounds Solution: remove the backgrounds so they are transparent * Most diagrams had black lines/arrows which didn't look good on dark gray backgrounds Solution: use CSS filter:invert for images * Some images are photos not di…
>Solution: remove the backgrounds so they are transparent This sucks when you want then share the diagram with someone, on certain platforms the diagram will be unreadable due to the lack of contrasting background.
Re: Dark mode in a website with CSS
#110The problem is that this doesn't let the user toggle dark mode on/off. If you want the user to be able to toggle dark mode on your site without changing their Operating System preferences, then you'll need to implement your dark theme as a class (eg. body.theme-dark) since there's no way to dynamically set the media query. const darkMode = window.matchMedia('(prefers-color-scheme: dark)') if (darkMode) { document.bod…
Is there anything which allows user choice (i.e. state) that doesn't involve JS?