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

Not respecting data-theme setting #1217

Closed
CS-5 opened this issue Oct 7, 2022 · 1 comment
Closed

Not respecting data-theme setting #1217

CS-5 opened this issue Oct 7, 2022 · 1 comment

Comments

@CS-5
Copy link

CS-5 commented Oct 7, 2022

I am currently using Docusaurus for my site's framework with Tailwind and DaisyUI styling my custom pages (package versions and other details below). It is possible this issue is out of scope, but in my limited testing the framework does not seem to change anything.

In short, I want to be able to use the built-in Docusaurus Dark/Light mode toggle to change my theme, regardless of the browser's preference.

Current Behavior

  • Toggling Dark/Light mode changes: <html ... data-theme=" " ...> - This is Docusaurus-powered functionality
  • Tailwind is configured to use data-theme to inform its dark mode styles: darkMode: ["class", "[data-theme='dark']"] - This works as desired
  • DaisyUI theme does not change and seems to prefer the browser/system preference, rather than data-theme
Tailwind Config 
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  darkMode: ["class", "[data-theme='dark']"],
  corePlugins: { preflight: false },
  plugins: [require("daisyui"), require("@tailwindcss/typography")],
  theme: {
    extend: {
      fontFamily: {
        sans: ["Inter var", "sans-serif"],
      },
      colors: {
        primary: "var(--primary)",
        gray: "var(--gray)",
        green: "var(--green)",
        orange: "var(--orange)",
        dark: "var(--dark)",
        blue: "var(--blue)",
        white: "var(--white)",
      },
    },
  },
  daisyui: {
    themes: [
      {
        light: {
          primary: "#facc15",
          secondary: "#353c45",
          accent: "#171717",
          neutral: "#171717",
          "base-100": "#fafafa",
          info: "#3b82f6",
          success: "#22c55e",
          warning: "#f97316",
          error: "#dc2828",

          "--rounded-btn": "1.25rem",
          "--btn-text-case": "none",
        },
      },
      {
        dark: {
          primary: "#facc15",
          secondary: "#22c55e",
          accent: "#facc15",
          neutral: "#4b5563",
          "base-100": "#171717",
          info: "#3b82f6",
          success: "#22c55e",
          orange: "#f97316",
          error: "#dc2828",

          "--rounded-btn": "1.25rem",
          "--btn-text-case": "none",
        },
      },
    ],
  },
};

Desired Behavior

Based on the documentation here it seems like the theme should be changing, since I have dark and light themes configured. My only thought is that the system/browser preference is overriding something. Seems like this issue is possibly related to #762, but not entirely sure.

Other Info

  • NodeJS v16.16.0
  • Docusaurus v2.1.0
  • Tailwind v3.1.8
  • DaisyUI v2.31.0
@saadeghi
Copy link
Owner

saadeghi commented Nov 1, 2022

I made an example repo here: https://stackblitz.com/edit/github-snyqqa?file=src/pages/index.js
And everything works as expected. daisyUI dark and light themes work with Docusaurus theme switcher.

Let me know if you have any questions.

@saadeghi saadeghi closed this as completed Nov 1, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@saadeghi @CS-5