ColorSchemeContext + Selector component + implemented in ThreePanelLa…

[usselman]

I've implemented a rudimentary way to switch color schemes but I'm reaching the limit of my knowledge.

• I implemented a number of new color themes in tailwind.config.js
• I made a new ColorSchemeContext.tsx to hold the scheme value
• I made a simple ColorSchemeSelector to switch between themes, and put it in Sidebar and settings page (unstyled)
• I implemented the actual color scheming into ThreePanelLayout and PanelLayout for testing.

Issues:

• It appears to work only if I hardcode the color scheme values. After I do so, the switching works as intended. To me this means there is some sort of client-side vs server-side weirdness happening, and I do not know how to resolve it or where to do so.
• From here, I am not sure how to implement this smoothly across the entire app, also because I can't tell what component does what anymore with v13 versions. Ideally we would replace each instance of, say, for example:
  bg-primary-300
  with:
  bg-primary-${colorScheme}-300
  but there's no easy way to just replace it all throughout the application, so I would like it to be reviewed first before I go ahead and try to do everything.

Any recommendations welcome! Thank you.

[usselman]

Please let me know your experience with whether the color schemes work on your local machine, and I will finish the feature by updating all instances of primary

[owenkellogg]

We need a GPT plugin that will automatically answer our questions! In the mean time, my most sincere recommendation is to copy and paste everything you wrote here directly into chat gpt and work from there.

[owenkellogg]

Also this is a fun idea!

[owenkellogg]

Here's what GPT 4 has to say in response to your OP:

Your implementation sounds well-structured, and you've definitely hit some challenges that are commonly faced when implementing theming in an application. Below are some suggestions that might help you:

Issues with client-side vs server-side rendering

It's common to run into issues with server-side vs. client-side rendering when dealing with dynamic themes. One common approach to this problem is to set a default theme on the server side and then switch to the user's chosen theme as soon as the client-side JavaScript runs.

You might do something like this in your main app file:

import React, { useEffect } from 'react';
import { useColorScheme } from './ColorSchemeContext';

const App = () => {
  const { setColorScheme, colorScheme } = useColorScheme();

  useEffect(() => {
    // Check localStorage or some other client-side storage
    const storedColorScheme = localStorage.getItem('colorScheme');
    if (storedColorScheme) {
      setColorScheme(storedColorScheme);
    }
  }, []);
  
  // ... rest of your app
};

Implementing it across the application

1. Scoped Theming: Instead of changing every class in the application, consider applying the theme at a higher level in your component tree. You could have a root class that sets all your color variables, and then simply toggle this class to change the theme.

   Example:

   /* In your CSS file */
   .theme-dark {
     --bg-primary: #000;
     --text-color: #fff;
   }
   
   .theme-light {
     --bg-primary: #fff;
     --text-color: #000;
   }

   In your layout component:

   <div className={`app ${colorScheme}`}>
     {/* rest of your app */}
   </div>

2. CSS Variables: To avoid having to manually replace every instance of a class, you can use CSS variables, which allow you to define a variable as the theme color and update that variable to switch themes.

   Example:

   :root {
     --bg-primary: #ffffff;
   }
   
   body {
     background-color: var(--bg-primary);
   }

   And then in your JavaScript:

   document.documentElement.style.setProperty('--bg-primary', newColor);

3. Utility Function: If you absolutely must update many individual classes, consider writing a utility function that takes a base class name (e.g., bg-primary) and appends the current scheme to it (e.g., bg-primary-dark). This function can be called wherever you set class names.

   function themedClass(baseClass: string): string {
     const { colorScheme } = useColorScheme();
     return `${baseClass}-${colorScheme}`;
   }

   Usage:

   <div className={themedClass('bg-primary')}>...</div>

Hopefully, these recommendations give you a direction to proceed. If you have more specific questions or need further code examples, feel free to ask.

[owenkellogg]

Also it may be that the color theme is managed by tailwind 🤷

[1aristotelis]

Hey @usselman this is great work. But it might be overkill you could have done it using the next-themes library that we already use, here's an article re: how to do that : https://dlw-nextjs-tailwindcss-theming.vercel.app/
Also you can take a look at this libray as well: https://dlw-nextjs-tailwindcss-theming.vercel.app/

The keyword we are using throughout the app for the color theme is primary so you need to to a global search on the project to find all the occurrences of that keyword and do the necessary changes.
Also beware, for dark mode we add a 20% opacity to make the color darker, especially on backgrounds (look for that pattern: bg-primary-[number]/20

[1aristotelis]

also If I were to redesign the app from scratch, I would use daisyUI which is built on top of tailwind and has built in themes

[usselman]

Hey @usselman this is great work. But it might be overkill you could have done it using the next-themes library that we already use, here's an article re: how to do that : https://dlw-nextjs-tailwindcss-theming.vercel.app/ Also you can take a look at this libray as well: https://dlw-nextjs-tailwindcss-theming.vercel.app/

The keyword we are using throughout the app for the color theme is primary so you need to to a global search on the project to find all the occurrences of that keyword and do the necessary changes. Also beware, for dark mode we add a 20% opacity to make the color darker, especially on backgrounds (look for that pattern: bg-primary-[number]/20

Thanks, that's helpful. I'll go ahead and refactor with that in mind.