diff --git a/theme/demo/demo.view.tree b/theme/demo/demo.view.tree
index 4f50ac95361..bba416aaff3 100644
--- a/theme/demo/demo.view.tree
+++ b/theme/demo/demo.view.tree
@@ -3,7 +3,7 @@ $mol_theme_demo $mol_example_large
 		--mol_theme_hue <= hue_deg \
 	sub /
 		<= Hue $mol_number
-			value? <=> hue? 240
+			value? <=> hue? 210
 			precision_change 15
 		<= Scroll $mol_scroll sub /
 			<= Cases $mol_theme_demo_case
diff --git a/theme/theme.css b/theme/theme.css
index 2aae7d19af1..29e102801f4 100644
--- a/theme/theme.css
+++ b/theme/theme.css
@@ -1,5 +1,5 @@
 :root {
-	--mol_theme_hue: 240deg;
+	--mol_theme_hue: 210deg;
 }
 
 :where([mol_theme]) {
@@ -13,7 +13,21 @@
 	--mol_theme_luma: -1;
 	--mol_theme_image: invert(1) hue-rotate( 180deg );
 
-	--mol_theme_back: oklch( 20% .03 var(--mol_theme_hue) );
+	--mol_theme_back: hsl( var(--mol_theme_hue), 20%, 10% );
+	--mol_theme_card: hsl( var(--mol_theme_hue), 50%, 20%, .25 );
+	--mol_theme_field: hsl( var(--mol_theme_hue), 50%, 8%, .25 );
+	--mol_theme_hover: hsl( var(--mol_theme_hue), 0%, 50%, .1 );
+	
+	--mol_theme_text: hsl( var(--mol_theme_hue), 0%, 80% );
+	--mol_theme_shade: hsl( var(--mol_theme_hue), 0%, 60%, 1 );
+	--mol_theme_line: hsl( var(--mol_theme_hue), 0%, 50%, .2 );
+	--mol_theme_focus: hsl( calc( var(--mol_theme_hue) + 180deg ), 100%, 65% );
+	
+	--mol_theme_control: hsl( var(--mol_theme_hue), 60%, 70% );
+	--mol_theme_current: hsl( calc( var(--mol_theme_hue) - 60deg ), 60%, 70% );
+	--mol_theme_special: hsl( calc( var(--mol_theme_hue) + 60deg ), 60%, 70% );
+
+	/* --mol_theme_back: oklch( 20% .03 var(--mol_theme_hue) );
 	--mol_theme_card: oklch( 35% .05 var(--mol_theme_hue) / .25 );
 	--mol_theme_field: oklch( 0% 0 var(--mol_theme_hue) / .25 );
 	--mol_theme_hover: oklch( 70% 0 var(--mol_theme_hue) / .1 );
@@ -25,7 +39,7 @@
 	
 	--mol_theme_control: oklch( 70% .1 var(--mol_theme_hue) );
 	--mol_theme_current: oklch( 80% .2 calc( var(--mol_theme_hue) - 60deg ) );
-	--mol_theme_special: oklch( 80% .3 calc( var(--mol_theme_hue) + 60deg ) );
+	--mol_theme_special: oklch( 80% .3 calc( var(--mol_theme_hue) + 60deg ) ); */
 
 }
 
@@ -34,7 +48,21 @@
 	--mol_theme_luma: 1;
 	--mol_theme_image: none;
 	
-	--mol_theme_back: oklch( 93% .01 var(--mol_theme_hue) );
+	--mol_theme_back: hsl( var(--mol_theme_hue), 20%, 99% );
+	--mol_theme_card: hsl( var(--mol_theme_hue), 50%, 90%, .25 );
+	--mol_theme_field: hsl( var(--mol_theme_hue), 50%, 100%, .5 );
+	--mol_theme_hover: hsl( var(--mol_theme_hue), 0%, 50%, .1 );
+	
+	--mol_theme_text: hsl( var(--mol_theme_hue), 0%, 0% );
+	--mol_theme_shade: hsl( var(--mol_theme_hue), 0%, 40%, 1 );
+	--mol_theme_line: hsl( var(--mol_theme_hue), 0%, 50%, .2 );
+	--mol_theme_focus: hsl( calc( var(--mol_theme_hue) + 180deg ), 100%, 40% );
+	
+	--mol_theme_control: hsl( var(--mol_theme_hue), 80%, 30% );
+	--mol_theme_current: hsl( calc( var(--mol_theme_hue) - 90deg ), 80%, 30% );
+	--mol_theme_special: hsl( calc( var(--mol_theme_hue) + 90deg ), 80%, 30% );
+	
+	/* --mol_theme_back: oklch( 93% .01 var(--mol_theme_hue) );
 	--mol_theme_card: oklch( 100% .02 var(--mol_theme_hue) / .25 );
 	--mol_theme_field: oklch( 100% 0 var(--mol_theme_hue) / .5 );
 	--mol_theme_hover: oklch( 70% 0 var(--mol_theme_hue) / .1 );
@@ -46,42 +74,58 @@
 	
 	--mol_theme_control: oklch( 45% .25 var(--mol_theme_hue) );
 	--mol_theme_current: oklch( 45% .5 calc( var(--mol_theme_hue) - 60deg ) );
-	--mol_theme_special: oklch( 45% .5 calc( var(--mol_theme_hue) + 60deg ) );
+	--mol_theme_special: oklch( 45% .5 calc( var(--mol_theme_hue) + 60deg ) ); */
 
 }
 
 :where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_base"] {
-	--mol_theme_back: oklch( 25% .05 var(--mol_theme_hue) );
-	--mol_theme_card: oklch( 35% .1 var(--mol_theme_hue) / .25 );
+	--mol_theme_back: hsl( var(--mol_theme_hue), 50%, 20% );
+	--mol_theme_card: hsl( var(--mol_theme_hue), 40%, 10%, .25 );
+	/* --mol_theme_back: oklch( 25% .05 var(--mol_theme_hue) );
+	--mol_theme_card: oklch( 35% .1 var(--mol_theme_hue) / .25 ); */
 }
 :where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_base"] {
-	--mol_theme_back: oklch( 95% .02 var(--mol_theme_hue) );
-	--mol_theme_card: oklch( 80% .05 var(--mol_theme_hue) / .25 );
+	--mol_theme_back: hsl( var(--mol_theme_hue), 50%, 90% );
+	--mol_theme_card: hsl( var(--mol_theme_hue), 80%, 99%, .25 );
+	/* --mol_theme_back: oklch( 95% .02 var(--mol_theme_hue) );
+	--mol_theme_card: oklch( 80% .05 var(--mol_theme_hue) / .25 ); */
 }
 
 :where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_accent"] {
-	--mol_theme_back: oklch( 40% .2 calc( var(--mol_theme_hue) + 120deg ) );
-	--mol_theme_card: oklch( 50% .3 calc( var(--mol_theme_hue) + 120deg ) / .25 );
+	--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 180deg ), 90%, 25% );
+	--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 180deg ), 80%, 15%, .25 );
+	/* --mol_theme_back: oklch( 40% .2 calc( var(--mol_theme_hue) + 120deg ) );
+	--mol_theme_card: oklch( 50% .3 calc( var(--mol_theme_hue) + 120deg ) / .25 ); */
 }
 :where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_accent"] {
-	--mol_theme_back: oklch( 90% .03 calc( var(--mol_theme_hue) + 120deg ) );
-	--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 120deg ) / .25 );
+	--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 180deg ), 90%, 80% );
+	--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 180deg ), 80%, 95%, .25 );
+	/* --mol_theme_back: oklch( 90% .03 calc( var(--mol_theme_hue) + 120deg ) );
+	--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 120deg ) / .25 ); */
 }
 
 :where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_current"] {
-	--mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) - 60deg ) );
-	--mol_theme_card: oklch( 35% .1 calc( var(--mol_theme_hue) - 60deg ) / .25 );
+	--mol_theme_back: hsl( calc( var(--mol_theme_hue) - 60deg ), 50%, 20% );
+	--mol_theme_card: hsl( calc( var(--mol_theme_hue) - 60deg ), 40%, 10%, .25 );
+	/* --mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) - 60deg ) );
+	--mol_theme_card: oklch( 35% .1 calc( var(--mol_theme_hue) - 60deg ) / .25 ); */
 }
 :where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_current"] {
-	--mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) - 60deg ) );
-	--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) - 60deg ) / .25 );
+	--mol_theme_back: hsl( calc( var(--mol_theme_hue) - 60deg ), 50%, 90% );
+	--mol_theme_card: hsl( calc( var(--mol_theme_hue) - 60deg ), 80%, 99%, .25 );
+	/* --mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) - 60deg ) );
+	--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) - 60deg ) / .25 ); */
 }
 
 :where( :root, [mol_theme="$mol_theme_dark"] ) [mol_theme="$mol_theme_special"] {
-	--mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) + 60deg ) );
-	--mol_theme_card: oklch( 35% .1 calc( var(--mol_theme_hue) + 60deg ) / .25 );
+	--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 60deg ), 50%, 20% );
+	--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 60deg ), 40%, 10%, .25 );
+	/* --mol_theme_back: oklch( 25% .05 calc( var(--mol_theme_hue) + 60deg ) );
+	--mol_theme_card: oklch( 35% .1 calc( var(--mol_theme_hue) + 60deg ) / .25 ); */
 }
 :where( [mol_theme="$mol_theme_light"] ) [mol_theme="$mol_theme_special"] {
-	--mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) + 60deg ) );
-	--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 60deg ) / .25 );
+	--mol_theme_back: hsl( calc( var(--mol_theme_hue) + 60deg ), 50%, 90% );
+	--mol_theme_card: hsl( calc( var(--mol_theme_hue) + 60deg ), 80%, 99%, .25 );
+	/* --mol_theme_back: oklch( 95% .02 calc( var(--mol_theme_hue) + 60deg ) );
+	--mol_theme_card: oklch( 80% .05 calc( var(--mol_theme_hue) + 60deg ) / .25 ); */
 }