Skip to content
GitLab
Next
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • gitlab-ui gitlab-ui
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
    • Locked Files
  • Issues 627
    • Issues 627
    • List
    • Boards
    • Service Desk
    • Milestones
    • Iterations
    • Requirements
  • Merge requests 26
    • Merge requests 26
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
    • Test Cases
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Container Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Code review
    • Insights
    • Issue
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • GitLab.orgGitLab.org
  • gitlab-uigitlab-ui
  • Issues
  • #1141
Closed
Open
Issue created Jan 17, 2021 by Simon Knox@psimynMaintainer

Dark mode overrides for utility classes

We currently generate dark mode util classes, where the resulting value is inverted (i.e .gl-text-white is #333 in dark mode). This was done to match how the rest of dark mode works as part of my "make it work with minimal dev effort" strategy.

But there are some cases where we want different values for dark mode, and we currently do not have a way to do this with util classes.

Tailwind's approach is to add a dark: prefix for dark mode, which seems like a good way to go. So when you want an override you'd add the additional prefixed class. i.e. class="gl-text-blue-500 dark:gl-text-blue-700"

Questions:

  • is dark: an ok prefix? What are some alternatives?
  • is it ok to keep the inverted palette? It would be confusing for the dark: prefixes to have the actual light-mode palette colors? (i.e. class="gl-text-white dark:gl-text-white") - it would be a step towards more accurate "utility first", but would require duplicating classes everytime we set colors
Assignee
Assign to
Time tracking