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.

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

Add a feature flag to force dark mode #4303

Open
zackkrida opened this issue May 10, 2024 · 0 comments
Open

Add a feature flag to force dark mode #4303

zackkrida opened this issue May 10, 2024 · 0 comments
Labels
💻 aspect: code Concerns the software code in the repository 🌟 goal: addition Addition of new feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend

Comments

@zackkrida
Copy link
Member

This issue is part of the Dark Mode project: #3592. Please see the implementation plan for additional detail and context.

Description

Create a new force_dark_mode feature flag, which allows developers to test dark mode without exposing the dark mode color palette to users.

The flag should have the following state:

{
   "force_dark_mode": {
      "status": {
        "staging": "switchable",
        "production": "disabled"
      },
      "defaultState": "off",
      "description": "Force the site to render in dark mode.",
      "storage": "session"
    }
}

This PR should also read the force_dark_mode feature flag and use its value to set a class on the body element (Please note that the original implementation plan reccommended the html element, but that the body is better-suited for visual classes like this). The original implementation plan didn't provide specifics into how to do this. For Nuxt 2 (and possibly Nuxt 3), we will likely want to use the head() method of each of our layout components to set the class like so:

head() {
  return {
    bodyAttrs: { class: featureFlagStore.isOn("force_dark_mode") ? "dark-mode" : "light-mode" }
  }
}

It may also, then, suit the scope of this PR to create a useDarkMode composable now to use in these layouts:

import { useFeatureFlagStore } from "~/stores/feature-flag"

/**
 * TODO: Replace with the user's actual dark mode preference.
 * Dark mode detection will be based on user preference,
 * overwritten by the "force_dark_mode" feature flag.
 */
export function useDarkMode() {
  const featureFlagStore = useFeatureFlagStore()
  const isDarkMode = featureFlagStore.isOn("force_dark_mode")
  return {
    isDarkMode,
    /** The CSS class representing the current color mode */
    cssClass: isDarkMode ? "dark-mode" : "light-mode",
  }
}

Implemented like so:

head() {
  const darkMode = useDarkMode()
  return {
    ...this.$nuxtI18nHead({
      addSeoAttributes: true,
      addDirAttribute: true,
    }),
    bodyAttrs: { class: darkMode.cssClass },
  }
}
@zackkrida zackkrida added 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work ✨ goal: improvement Improvement to an existing user-facing feature labels May 10, 2024
@zackkrida zackkrida added this to the Dark Mode A - Color Palette milestone May 10, 2024
@zackkrida zackkrida added 🟨 priority: medium Not blocking but should be addressed soon 🌟 goal: addition Addition of new feature 🧱 stack: frontend Related to the Nuxt frontend 💻 aspect: code Concerns the software code in the repository and removed 🚦 status: awaiting triage Has not been triaged & therefore, not ready for work ✨ goal: improvement Improvement to an existing user-facing feature labels May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
💻 aspect: code Concerns the software code in the repository 🌟 goal: addition Addition of new feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend
Projects
Status: 📋 Backlog
Development

No branches or pull requests

1 participant