SGM-6974 - Investigate integrating a light theme toggle into the website

[gitstart-app]

This PR was created by GitStart to address the requirements from this ticket: SGM-6974.
This ticket was imported from: SGM-6974

---

Description:

Investigates the option available for adding a light, dark theme toggle into the website

• [Sourcegraph Issue] Investigate integrating a light theme toggle into the website #6974
• [Ticket] https://clients.gitstart.com/sourcegraph/3436/tickets/SGM-6974

Changes introduced/demonstrated:

• Demonstrates addition / functionality of a theme toggle button that switches between dark and light themes on the. website.
• Adds provision for adding custom colors for either light or dark modes or both in the tailwind config file
• Adds provision for directly setting css properties for dark mode directly on the component element tags

Demo:

https://www.loom.com/share/3e5d2cc9a20d4cf39a68ff3f75625c41?sid=800a693c-31df-4ca6-afc7-291d54374f36

Test cases:

• Toggling theme button in Navbar switches between different themes on the tested element

• Works for both mobile and desktop

• Seamless transition between dark and light themes when toggling switch button

Test plan:

Check loom video

[netlify]

✅ Deploy Preview for sourcegraph ready!

Name	Link
🔨 Latest commit	e1769dc
🔍 Latest deploy log	https://app.netlify.com/sites/sourcegraph/deploys/666ab24f69f1ce0008da0a15
😎 Deploy Preview	https://deploy-preview-7004--sourcegraph.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[traceyljohnson]

Thanks for this @gitstart-sourcegraph ! So to clarify, if we want to set up custom color themes (option 1), could we do it in a way that is more semantic? Ex: you show the color "violet" for light and dark, but I'm wondering if it would make more sense to have the color names be something like "heading-color", then they inherit our TW colors like violet-500 or gray-700 depending on the theme...

[gitstart-sourcegraph]

Hi @traceyljohnson, absolutely, what you're asking for is achievable. As an example, let's consider the existing color theme dlsColors, which defines a set of color names alongside their respective hex codes in the tailwind.config file. These names can be reused within the createThemes function to customize themes and we can use custom namings to represent them. For instance:

const dlsColors = {
    violet: {
        100: '#EEDFFF',
        200: '#E8D1FF',
        300: '#CE9CFF',
        400: '#A112FF',
        500: '#820DDE',
        600: '#6112A3',
        // ... other shades of violet
    },
    gray: {
        50: '#F9FAFB',
        100: '#F5F7FB',
        200: '#DBE2F0',
        300: '#A6B6D9',
        400: '#696B71',
        500: '#484B51',
        600: '#313131',
        700: '#121212',
        // ... other shades of gray
    },
    // ... other color definitions
};

// Then we can define custom color utilities like "heading-violet" within `createThemes`:
createThemes({
    light: {
        'heading-violet': dlsColors.violet[500], // Violet shade 500 for light theme
    },
    dark: {
        'heading-violet': dlsColors.violet[200], // Violet shade 200 for dark theme
    },
});

// Similarly, for any other color, we can define:
createThemes({
    light: {
        'heading-color': dlsColors.gray[700], // Gray shade 700 for light theme
    },
    dark: {
        'heading-color': dlsColors.gray[50], // Gray shade 50 for dark theme
    },
});

// These custom class names can then be used within the components such as in a header element
<h1 className="text-heading-violet">...</h1>
// The `text-heading-violet` class will apply the corresponding color based on the theme.

[gitstart-sourcegraph]

Investigation is done.