search

bitcrowd / tickety-tick

A browser extension that helps you name branches and write better commit messages
MIT License
57 stars 10 forks source link

[#261] Support "dark mode" #264

Closed pmeinhardt closed 4 years ago

pmeinhardt commented 4 years ago

Closes #261.

popup

To do:

pmeinhardt commented 4 years ago

Unfortunately Bootstrap does not support customization through CSS variables. It exports theme info (colors…) as CSS variables, but does not read variables to allow adjusting styling. The current solution therefore instead of tweaking variables based on media queries, adjusts the CSS classes.

An alternative solution could be to build 2 CSS files with complete versions of Bootstrap - just with different theming - and to include those via <link href="…" rel="stylesheet" media="(prefers-color-scheme: …)">.

klappradla commented 4 years ago

The current solution therefore instead of tweaking variables based on media queries, adjusts the CSS classes.

Given the bootstrap-circumstances, this is still pretty close to the approach suggested in https://codeguide.co/#css-media-queries and perfectly fine in my opinion 👌

pmeinhardt commented 4 years ago

Switched the logo on the help page to use the SVG and style it based on theme colors:

logo

pmeinhardt commented 4 years ago

I ended up creating 2 themed versions of (a trimmed-down) Bootstrap, one of which is nested under .dark to conditionally apply these more specific styles if (prefers-color-scheme: dark) matches.

This makes it easier to configure the two themes and to keep them consistent (see src/popup/styles/settings/{_default,_dark}.scss).

Of course this about doubles the size of the CSS and adds a lot of duplication, but - hey 🤷 - it's about 186K now and it's not like we're transferring this over the network anyways.

klappradla commented 4 years ago

popup

Currently in the middle of my review, but I don't see the right place to ask this 🙈: why does the menu bar icon not change for you? This is a behavior for Firefox I already added in #227 🤔

See here ⏬ Kapture 2020-08-05 at 10 08 12

pmeinhardt commented 4 years ago

Currently in the middle of my review, but I don't see the right place to ask this 🙈: why does the menu bar icon not change for you? This is a behavior for Firefox I already added in #227 🤔

The screenshot was taken in Chrome. In Firefox, the icon behaves as expected. The changes here don't touch the manifest. ✌️

klappradla commented 4 years ago

The screenshot was taken in Chrome. In Firefox, the icon behaves as expected. The changes here don't touch the manifest. ✌️

On my 🙈 Time for holidays and sorry for the noise 🕳️