Skip to content

Add dark mode#82

Open
1Git2Clone wants to merge 7 commits intoVulpelo:masterfrom
1Git2Clone:master
Open

Add dark mode#82
1Git2Clone wants to merge 7 commits intoVulpelo:masterfrom
1Git2Clone:master

Conversation

@1Git2Clone
Copy link
Copy Markdown

Why

A small UX gain, when I tried the theme out the bright white caught me off guard so I figured adding a default based on your browser settings would be a nice to have.

Features

  1. Defaults with your @media prefers-color-scheme variable.
  2. Adds a button with a Moon and Sun SVG alongside basic JS (using localStorage and the data-theme attribute) to toggle between the color schemes.

Notable changes

Do note that in 37511ba I also change the ID attribute for the logo from ghicon to logo in order to have uniqueness as defined by the HTML standards and to also ensure I can change the GitHub Icon dynamically with the filter: invert(100%); CSS.

Formatting in f9d18ee and 948bfcc was done with prettier. Feel free to review code at 37511ba...948bfcc separately from 948bfcc...8bb8625.

End Result

Google Chrome

Base Dark Tooltip Dark
Base Light Tooltip Light

Firefox

Base Dark Tooltip Dark
Base Light Tooltip Light

This is for semantics (there should be 1 element with any ID)

https://html.spec.whatwg.org/multipage/dom.html#global-attributes
I meant to do something like #eeeeee to begin with because #fefefe is
just 254 instead of 255 rbg values (not a lot dimmer).
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant