Color Swatches

Elements
1

I have made a custom component that displays the theme colors and the named colors defined in Tailwind as a fun experiment.

Screenshot 2025-09-14 at 19.11.25@2x
Screenshot 2025-09-14 at 19.11.25@2x3228Ă—2026 701 KB

I build a list of colors in the transformHook handler (see below). The color names are currently hard coded, but I was wondering if there is a way to get the theme colors from the rw object?

const transformHook = (rw) => {
    const themeColors = ['Brand', 'Accent', 'Surface', 'Text'];
    const namedColors = [
        'Red', 'Orange', 'Amber', 'Yellow', 'Lime', 'Green', 'Emerald', 
        'Teal', 'Cyan', 'Sky', 'Blue', 'Indigo', 'Violet', 'Purple', 
        'Fuchsia', 'Pink', 'Rose', 'Slate', 'Gray', 'Zinc', 'Neutral'
    ];
    const brightness = ['50','100','200','300','400','500','600','700','800','900','950'];

    let selectedColors = [];
    let separatorPos = -1;
    if (rw.props.themeColors) selectedColors = selectedColors.concat(themeColors);
    if (rw.props.namedColors) selectedColors = selectedColors.concat(namedColors);
    if (rw.props.themeColors && rw.props.namedColors) separatorPos = themeColors.length;
    
    const colorGroups = [];
    let pos = 0;
    selectedColors.forEach((colorName) => {
       const swatches = [];
        brightness.forEach((variant) => { 
            swatches.push(`bg-${colorName.toLowerCase()}-${variant}`);
        });
        colorGroups.push({title: colorName, swatches: swatches, separator: pos === separatorPos});
        pos++;
    });
    
    rw.setProps({
        hasColors: colorGroups.length > 0,
        colorGroups: colorGroups,
        brightness: brightness
    });
 }

exports.transformHook = transformHook;

My test project is here: elementsapp://downloadDocument/kfGvJNvF8Csi

3 Likes
2

Hi @tgr

There’s currently no API available to get the a colors object from the project’s theme. I do think this is an interesting idea though. I’d be interested to hear what your use-case for this is though (other than just displaying the colors on the page), if you don’t mind sharing? :slight_smile:

1 Like
3

No, I do not really have a strong use case for this. I was just guessing that the rw object had some hidden secrets… :thinking: I am currently just playing around with the Elements API to figure out how things work.

Currently I am using Elements as a prototyping tool to plan some new web pages for a larger website written in Laravel. But seeing how powerful Elements is, I have started to think that we could use Elements to maintain the static sections of the web and possibly let relatively inexperienced peeople take care of updates.

So the next step will be to find a good way to integrate Laravel and Elements.

This is an exciting journey :grinning_face: