Help with the themeColor property

Elements Component Development
1

Hi,
I need help with the themeColor property to use in the properties.json file. This property basically manages colors for both Light and Dark modes and then, based on the format, generates output with two classes.
Is it possible to set it to only work with a single color?
I would need to create separate classes for Light and Dark, so I’d like to have two separate themeColor properties, one to generate the Light class and one to generate the Dark class.
Is this feasible?

image

2

If I’m reading this right, then yes, you only need one colour control.

{
	"groups": [{
		"title": "Theme Color Example",
		"properties": [{
			"title": "Color",
			"id": "customColor",
			"format": "text-{{value}}",
			"themeColor": {
				"default": {
					"name": "surface",
					"brightness": 800,
					"darkName": "surface",
					"darkBrightness": 50
				}
			}
		}]
	}]
}

You set the defaults for dark and light mode in the json. Then inside elements if in light mode (sun toggled on) any colour change in that control will only affect light mode. And vice versa, if in dark mode (moon toggled on), any change to that control will only affect dark mode.

I think you may know this :index_pointing_up: if so can you give an example of what you’re trying to do. I’m sure most anything is achievable via the hooks file.

3

Maybe this is what you meant?

const transformHook = (rw) => {    
	
	// Grab your colour prop, can be a single class or include a dark class.
	const bg = rw.props.background?.trim() || "";
	// split it into an array, may contain 1 or 2 items
	const parts = bg.split(/\s+/);
	// there will always be part zero for light or both light and dark
	const lightBG = parts[0] || "";
	// if there are two parts add part one as dark else just use part 0 as dark
	const darkBG = parts[1] || parts[0] || "";

	// return new macros
	rw.setProps({
		lightBG,
		darkBG,
		node: rw.node
	});
	
}

exports.transformHook = transformHook;
4

Sorry for the delay in responding (I thought I’d already done so), but I ended up doing something in other way. Thanks for the quick advice!