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

gitstart-app[bot] commented 2 weeks ago

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] https://github.com/sourcegraph/about/issues/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:

[x] Toggling theme button in Navbar switches between different themes on the tested element
[x] Works for both mobile and desktop
[x] Seamless transition between dark and light themes when toggling switch button

Test plan:

Check loom video

netlify[bot] commented 2 weeks ago

Deploy Preview for sourcegraph ready!

Name	Link
Latest commit	e1769dc3ed29105ad387c380f7d4742ca60de702
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 commented 1 week ago

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 commented 1 week ago

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.

sourcegraph / about