Customizing Colors

Odyc.js uses a predefined color palette to render sprites, dialogs, and messages.
You can replace or adjust it however you like.

---

Customizing the Palette

Here is the default color palette. Click a color to copy its hex code.

These colors are based on the excellent Open Color palette.

You can override the palette with your own array of colors:

createGame({
	// ...
	colors: [
		'red',
		'orange',
		'lab(50% 40 59.5)',
		'hwb(12 50% 0%)',
		'#f06595',
		'#f09',
		'oklch(60% 0.15 50)',
		'hsl(150 30% 60%)',
		'light-dark(white, black)',
		'black'
	]
})

The colors array should contain strings that represent valid CSS colors — color names, hex codes, RGB, HSL, LAB, etc.

---

Background Color

Use the background option to set the background color.

createGame({
	//...
	background: '#ff00ff'
})

The background value can be a CSS color or a number pointing to a color in your palette.

---

Dialog and Message Appearance

You can also customize the appearance of dialog and message boxes with dedicated options.

Dialog Box

• dialogColor → text color
• dialogBackground → background color
• dialogBorder → border color

These values can be any CSS color or a number referring to a color from your palette.

createGame({
	// ...
	dialogBackground: '#228be6',
	dialogBorder: 3,
	dialogColor: 'white'
})

Message Box

• messageColor → text color
• messageBackground → background color

These also accept any valid CSS color or a palette index.

createGame({
	//...
	messageColor: 'red',
	messageBackground: '#228be6'
})