Uploaded image for project: 'Data Management'
  1. Data Management
  2. DM-29251

Squareone: add light/dark theming

    XMLWordPrintable

Details

    • Story
    • Status: Done
    • Resolution: Done
    • None
    • None
    • None

    Description

      Add light/dark theming to the squareone next.js application. Work has been done to implementing themed design tokens in the style dictionary (DM-28537), so this ticket can focus on theme implementation in the next.js app (including switching themes automatically or via user preference).

      Attachments

        Issue Links

          Activity

            https://github.com/pacocoursey/next-themes Next themes can toggle either a data attribute or a class name on "HTML" that toggles the theming. Should be styled-components compatible.

             

            There's also https://github.com/donavon/use-dark-mode

             

            The thing I like about next-themes is that it considers "system" to be a state, rather than an initial default.

            jsick Jonathan Sick added a comment - https://github.com/pacocoursey/next-themes  Next themes can toggle either a data attribute or a class name on "HTML" that toggles the theming. Should be styled-components compatible.   There's also https://github.com/donavon/use-dark-mode   The thing I like about next-themes is that it considers "system" to be a state, rather than an initial default.

            Released rubin-style-components 0.3.0-beta.5 containing the themed component design tokens.

            See https://github.com/lsst-sqre/rsp-squareone/pull/5 for the dark/light themed UI updates to squareone.

            jsick Jonathan Sick added a comment - Released rubin-style-components 0.3.0-beta.5 containing the themed component design tokens. See https://github.com/lsst-sqre/rsp-squareone/pull/5  for the dark/light themed UI updates to squareone.

            People

              jsick Jonathan Sick
              jsick Jonathan Sick
              Jonathan Sick
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Jenkins

                  No builds found.