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

Squareone: add light/dark theming

    XMLWordPrintable

    Details

    • Type: Story
    • Status: Done
    • Resolution: Done
    • Fix Version/s: None
    • Component/s: None
    • Labels:
      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

          relates to

          Story - Created by Jira Software - do not edit or delete. Issue type for a user story. DM-28486 Squareone: Implement the basic design of the landing page

          • Done

          Story - Created by Jira Software - do not edit or delete. Issue type for a user story. DM-28537 Implement dark/light theme architecture in rubin-style-dictionary

          • Done

            Activity

            Ascending order - Click to sort in descending order
            Hide
            Permalink
            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.

            Show
            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.
            Hide
            Permalink
            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.

            Show
            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

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

                Dates

                Created:
                Updated:
                Resolved:

                  Jenkins

                  No builds found.