Here is what I did on the core component’s input to support dark mode properly using Tailwind’s dark:selector
Here is the code diff.
If you think the added code is small enough, I can open a PR on Phoenix to update core_component’s generators.
Before:
After:
given Chris’s post above, is the status of this “I, cblavier, got this” or would you like any assist?
note: my goal is not just core components but also:
Hi Cort, I apologize for any confusion!
I intended to show that implementing dark mode support for core components can be manageable.
However, I believe your approach is more valuable, and I appreciate that it allows for opting out. Please go ahead and open a PR!"
will do!
@cblavier and @cortfritz I just found this and was curious how far you’ve gotten on the dark mode support? I came looking to see if anyone was working on it before I jumped in and started work myself, and I’m happy to see someone is talking about it. Let me know who’s doing what and if you need any help.
My 2c on styling core components is this: I agree with Jose and Chris about minimizing the cognitive load of a new user - to a point. My thought is that dark mode variants in Tailwind are very common and wouldn’t add too much noise that would be hard to grok. Additionally, the Heex construct of class={["class1 class2", "class3 class4"]} allows for nice multiline class lists and the ability to break classes up by what they do in a much easier fashion. So adding that and taking the time to split out what classes are for sizing, what are for colors, what are for other utilities, etc. could make things easier to read IMO.
i had paused this waiting for confirmation. Got that confirmation! About to pick it back up. Happy to share a draft, or work together, or talk offline about approaches - some good ideas were shared above about different ways to tackle it. What I built so far was very straightforward, but was showing up successfully after a mix phx.new, phx.gen.live, and phx.gen.auth. Ideally I could just finish a draft nitaand share with the community but I don’t mind revisiting approach with you or anyone passionate about doing it a certain way.
I wouldn’t mind looking over a draft. If you have a repo I can look at I’ll clone it, build the archive, and point mix at it to test the generators. Chances are high that you’ve already touched everything I would tweak, and you likely have done a better job than I would.
As for things being straightforward, I like things simple myself. I tend to prefer having a site detect my theme preference and just play along, and if I want light mode I can change it at the browser level and all my websites that support dark mode change along with it. Others may feel otherwise and have valid reasons for that though.
Does this topic include the compilation error page? If not, can it?
All it takes is one mistyped line and I get blinded and have to tab away.
I don’t see why not, and I agree with you as well. Hitting that page after I have the rest of the app in dark mode is near insulting 
100%. I hadn’t thought of it but wince on your behalf. That is the killer application for this feature. Elixir gets adopted much faster when we stop blinding our enthusiasts.
come to think of it, who is going to ship dark mode to elixirforum?
So… its been a few weeks. Any forward motion? Anywhere i can help?
I have been slllooowwww.
I’m sorry!
I will get a PR up this weekend(1). Happy to collab.
(1) from the modern Ambrose:
weekend
noun
pronounced: /riːl suːn naʊ/
Definition:
In the software engineer’s lexicon, a “weekend” is not a time free of work but rather an arbitrarily infinite interval—a temporal sandbox where estimates expand to absorb any conceivable amount of work.
Etymology:
The English word “week” has come through the reverse of this pipeline |> Old English {[wice, wicu], :cycle)
|> Proto-Germanic {*wikōn, :recurring}
|> Indo-European {*wek‑, :following}
Clearly a prescient civilization knew that some day software engineers would be caught in a recurring cycle of following the bad instincts of thinking a weekend is an infinite amount of time.
© Copyright Elixir Forum | Terms | Privacy & Cookies
