Overview

CraftedStays lets you create fully custom color schemes that control how every element on your site looks — from buttons and backgrounds to text, borders, and popups. Color schemes are managed directly in the template editor and can be applied per section, giving you complete flexibility over your site's appearance.

⚠️ Template Availability: Custom color schemes are currently supported on the Refined 2.1 and Haven templates. Support for additional templates is on the roadmap.

How to Access Color Scheme Settings

Go to your Template Editor
Click on any section on your page
In the right panel, click on Color Scheme
You'll see a list of existing color schemes — find a default scheme and copy it
Give your new scheme a name that reflects your brand (e.g., "Brand Primary" or "Dark Header")
Customize the color values to match your brand, then save

Tip: Always start by copying a default scheme rather than building from scratch — it ensures all required fields are pre-filled and you only need to adjust what matters to your brand.

Color Fields Explained

Each color scheme contains the following fields:

Color Field	What It Controls
Background	Page background color
Text	Main body text color
Primary Text	Text that uses your primary color — headers, selected items
Popup Background Color	Background color for popups and dialogs
Popup Text Color	Text color for popups and dialogs
Popup Border Color	Border color for popups and dialogs
Primary Button Background Color	Background color for primary buttons (e.g. "Book Now")
Primary Button Text Color	Text color for primary buttons
Primary Background	Background that uses your primary color — headers, selected items
Heading	Color for page and section titles
Subheading	Color for subtitles and supporting headings
Surface Background Color	Background color for blocks and sticky elements (e.g. sticky header)
Surface Text Color	Text color for blocks and sticky elements
Surface Border Color	Border color for blocks and sticky elements
Control Background Color	Background color for input fields (e.g. search, date pickers)
Control Text Color	Text color and icon color for input fields
Control Border Color	Border color for input fields
Popup Overlay Color	Overlay color behind popups and dialogs (e.g. dimmed background, shadows)
Secondary Button Background Color	Background color for secondary buttons
Secondary Button Text Color	Text color for secondary buttons
Border Color	Color for general borders and dividers across the site
Shadow Color	Text shadow color
Success	Color for success states (e.g. booking confirmation) — Default: `#28A745`
Error	Color for error states (e.g. form validation messages) — Default: `#DC3545`
Warning	Color for warning messages — Default: `#FFC107`
Info	Color for informational messages — Default: `#17A2B8`

Note: We recommend leaving Success, Error, Warning, and Info at their default values — these are universally recognized colors that help guests quickly understand important messages on your site.

Sample Color Palettes

Need a starting point? Here are two ready-to-use palettes you can reference when setting up your custom color scheme. Each includes a primary and secondary color pairing.

Palette 1: Coastal Blue

A clean, professional look — great for coastal, lakefront, or modern vacation rental brands.

Primary: #1B4F8A (deep ocean blue) | Secondary: #E8A020 (warm amber)

Color Field	Hex Code
Background	`#FFFFFF`
Text	`#1A1A2E`
Primary Text	`#1B4F8A`
Popup Background Color	`#FFFFFF`
Popup Text Color	`#1A1A2E`
Popup Border Color	`#C8D8EA`
Primary Button Background Color	`#1B4F8A`
Primary Button Text Color	`#FFFFFF`
Primary Background	`#1B4F8A`
Heading	`#1A1A2E`
Subheading	`#4A6FA5`
Surface Background Color	`#F0F4F8`
Surface Text Color	`#1A1A2E`
Surface Border Color	`#C8D8EA`
Control Background Color	`#FFFFFF`
Control Text Color	`#1A1A2E`
Control Border Color	`#C8D8EA`
Popup Overlay Color	`rgba(0, 0, 0, 0.4)`
Secondary Button Background Color	`#E8A020`
Secondary Button Text Color	`#FFFFFF`
Border Color	`#C8D8EA`
Shadow Color	`rgba(27, 79, 138, 0.15)`
Success	`#28A745`
Error	`#DC3545`
Warning	`#FFC107`
Info	`#17A2B8`

Sample Color Result:

Palette 2: Forest Green

A warm, earthy feel — ideal for mountain cabins, nature retreats, or outdoor adventure rentals.

Primary: #2D6A4F (rich forest green) | Secondary: #A0522D (earthy sienna)

Color Field	Hex Code
Background	`#FAFAF7`
Text	`#1C2B1E`
Primary Text	`#2D6A4F`
Popup Background Color	`#FFFFFF`
Popup Text Color	`#1C2B1E`
Popup Border Color	`#B7D5C4`
Primary Button Background Color	`#2D6A4F`
Primary Button Text Color	`#FFFFFF`
Primary Background	`#2D6A4F`
Heading	`#1C2B1E`
Subheading	`#52796F`
Surface Background Color	`#EDF4F0`
Surface Text Color	`#1C2B1E`
Surface Border Color	`#B7D5C4`
Control Background Color	`#FFFFFF`
Control Text Color	`#1C2B1E`
Control Border Color	`#B7D5C4`
Popup Overlay Color	`rgba(0, 0, 0, 0.4)`
Secondary Button Background Color	`#A0522D`
Secondary Button Text Color	`#FFFFFF`
Border Color	`#B7D5C4`
Shadow Color	`rgba(45, 106, 79, 0.15)`
Success	`#28A745`
Error	`#DC3545`
Warning	`#FFC107`
Info	`#17A2B8`

Sample Color Result:

Tips for Customizing Colors

Always copy a default — start from an existing scheme so all fields are pre-filled correctly
Name your scheme clearly — use something descriptive like "Brand Light" or "Dark Hero" so it's easy to identify later
Match your logo — use your exact hex codes for accuracy; these are usually in your logo files or brand guidelines
Use your secondary color for contrast — a secondary color that contrasts your primary works great for highlighting CTAs or key sections
Check contrast — dark or saturated colors work best for buttons and links against white backgrounds
Don't change the system colors — leave Success, Error, Warning, and Info at their defaults so guests can easily recognize important messages

Troubleshooting

Can't find the Color Scheme option

Color scheme customization is currently only available on the Refined 2.1 and Haven templates. If you're on a different template and don't see this option, you may need to switch templates to access this feature. Support for additional templates is coming.

Colors not updating on the live site

Make sure you clicked Save after making changes
Hard refresh your browser (Ctrl+Shift+R on Windows, Cmd+Shift+R on Mac)
Clear your browser cache and reload

Hex code not being accepted

Make sure the hex code includes the # symbol (e.g., #FF5733)
Hex codes should be 6 characters after the #

Color looks different than expected

Screen brightness and display settings can affect how colors appear — verify using your hex code
Check that the correct color scheme is applied to the section you're reviewing

Customizing Your Site's Color Scheme