Live data from Hacker News

Dark mode in a website with CSS

tombrow.com

101–110 of 191 posts

Re: Dark mode in a website with CSS

#101
post #50

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

In the case of the Chrome web browser the Chrome UI is the UI Chrome though? What other UI elements are there not included in the dark theme?

Re: Dark mode in a website with CSS

#102
post #67
post #61

Earlier 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…

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 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

#105

I 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: use CSS filter:invert for images

> 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

#106
post #102
post #67

Earlier 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…

Heh, I should be clear: I consider the aforementioned Tweet/RT issue a UI/UX thing, it's otherwise working as designed.

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

#107

The 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…

To me it seems like now that all browsers support the prefers-color-scheme media query, it’s no longer a best practice to allow/force users to toggle between light and dark theme separately from the OS. Centralization of config is a good thing, freeing people from rote work.

Re: Dark mode in a website with CSS

#108
post #100

Earlier 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…

There's a number of end users who would like to avoid JS on non-app sites.

Re: Dark mode in a website with CSS

#109

I 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.

It’s easier to add a background later than remove one after, so I think transparent bg is a good solution

Re: Dark mode in a website with CSS

#110

The 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?

Yes, you can use an html checkbox and monitor its state with pure css.
Post reply on HN