search

LetsGetTechnical / gridiron-survivor

https://gridiron-survivor-letsgettechnical.vercel.app
4 stars 1 forks source link

Decide on Tailwind Theming #159

Open ryandotfurrer opened 3 weeks ago

ryandotfurrer commented 3 weeks ago

Are we looking to respect the user's device theme for light mode and dark mode?

Inside our tailwind.config file is the darkMode: ['class] code.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: ['class'],
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx}',
    './stories/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],

From what I'm reading in tailwind's docs we'd use something like this to not respect the user's device theme but replace darkMode: ['class'] with darkMode: ['selector']. Then we'd add class='dark' to our html tag and it would then follow all established dark mode rules.

However, since we have the .dark class in globals.css with all the CSS variables, we can just get rid of darkMode: ['class'] and write <html className='dark:dark' in our layout.tsx

I know this can be a lot to read and I'm more than happy to talk about it in voice chat any day :slight_smile: