nginx-directory: add light/dark style #1394
Conversation
| </ul> | ||
| </body> | ||
|
|
||
| </html> |
There was a problem hiding this comment.
Can you fix the missing trailing newline here?
| } | ||
|
|
||
| body { | ||
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
There was a problem hiding this comment.
perhaps we could borrow Tailwind's default?
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| font-family: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; |
| } | ||
|
|
||
| ul { | ||
| list-style: none; |
There was a problem hiding this comment.
Can you say more about why you chose this?
| display: inline-block; | ||
| padding: 8px; | ||
| color: #424242; | ||
| text-decoration: none; |
There was a problem hiding this comment.
And this one... to me (just looked at the screenshots) it seems less obvious that it's a list of links now
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | ||
| margin: 0; | ||
| padding: 24px; | ||
| color: #424242; |
There was a problem hiding this comment.
could we consider using CSS variables to make the theme easier to grok / modify? could be a way to do the light/dark theme too.
| padding: 4px 12px; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: dark) { |
There was a problem hiding this comment.
as I understand this, it will always sync with the "system" setting, right?
no opinion on that right now - just wanted to call it out and see what others think. might be that if we did this we'd like a toggle that saves the preference in local storage, because not all folks will like that.
|
I'd personally argue not to style this page, the point is to keep the page dead simple. Adding styles opens the door for all kinds of personal preferences. There are plugins that can configure any page to dark-style: https://darkreader.org/ and there is also some browsers supporting user-stylesheets, if you must I'd suggest looking at that. |
Yep, that was one of my main considerations in doing this as a few lines of inline CSS (total page weighs in around 2.9K) instead of anything heavier.
Fair enough. I'll close the PR, thanks for the review 👍 |
Adds light/dark theme support to the nginx directory index.html page.
Adds some basic styling as well. Including making the help "tooltip" feature bigger since it's difficult to mouse over in its current size.
Dark mode:
Light mode:
