Today, I learned a bit about Blogger theme customizer.
First, we define a variable group and the customizable variable in <b:skin>.
<b:skin version='1.3.3'><![CDATA[
/*
<!-- Variable definitions -->
<Group description="Blog">
<Variable name="siteBackground" description="Site Background" type="color" default="#f5f5f5" value="#f0f8ee"/>
<Variable name="siteSidebar" description="Sidebar" type="color" default="#f5f5f5" value="#ffffff"/>
</Group>
/*
</b:skin>Next, that variable can be used as CSS value within the <b:skin>.
:root {
--site-background: $(siteBackground);
--site-sidebar: $(siteSidebar);
}Finally, because I put my blog style in HTML gadget, I can apply that custom color using the CSS var().
<style>
body {
background: var(--site-background);
}
.home_sidebar {
background: var(--site-sidebar);
}
</style>