Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Introduce Dark Mode (WIP) #3028

Closed
wants to merge 6 commits into from
Closed

Introduce Dark Mode (WIP) #3028

wants to merge 6 commits into from

Commits on Jan 1, 2021

  1. Moved all CSS color literals into parameters.scss variable definitions

    @migurski
    migurski committed Jan 1, 2021
    Copy the full SHA
    25be297 View commit details
    Browse the repository at this point in the history

  2. Moved remaining CSS color names into parameters.scss variable definit… 

    …ions
    @migurski
    migurski committed Jan 1, 2021
    Copy the full SHA
    89cf978 View commit details
    Browse the repository at this point in the history

  3. Renamed remaining color variables to include "-color" suffix

    @migurski
    migurski committed Jan 1, 2021
    Copy the full SHA
    dbaa3b8 View commit details
    Browse the repository at this point in the history

  4. Added media queries with in -invcolor usage for dark mode

    @migurski
    migurski committed Jan 1, 2021
    Copy the full SHA
    42823e1 View commit details
    Browse the repository at this point in the history

  5. Defined all -invcolor variables 

    Used Chroma-js with simple inverted luminance:

    function inv(s) { var c1 = Chroma(s); c2 = c1.set('lch.l', 100 - c1.get('lch.l')); return c2 }
    @migurski
    migurski committed Jan 1, 2021
    Copy the full SHA
    c15e81f View commit details
    Browse the repository at this point in the history

  6. Redefined all -invcolor variables 

    Used Chroma-js with adjusted inverted luminance:

    function inv(str)
    {
      var c = Chroma(str);
      // sqrt bends the luminance curve to improve light-on-dark contrast
      c2 = c.set('lch.l', 100 * Math.sqrt((100 - c.get('lch.l')) / 100));
      return c2
    }
    @migurski
    migurski committed Jan 1, 2021
    Copy the full SHA
    17874fd View commit details
    Browse the repository at this point in the history