diff --git a/styles/src/themes/cave.ts b/styles/src/themes/cave.ts
index a6099c3a0b..b26dfaf7bc 100644
--- a/styles/src/themes/cave.ts
+++ b/styles/src/themes/cave.ts
@@ -9,7 +9,7 @@ const license = {
   url: ""
 }
 
-export const dark = createColorScheme(`${name}-dark`, false, {
+export const dark = createColorScheme(`${name} Dark`, false, {
   neutral: chroma
     .scale([
       "#19171c",
@@ -32,7 +32,7 @@ export const dark = createColorScheme(`${name}-dark`, false, {
   magenta: colorRamp(chroma("#bf40bf")),
 });
 
-export const light = createColorScheme(`${name}-light`, true, {
+export const light = createColorScheme(`${name} Light`, true, {
   neutral: chroma
     .scale([
       "#19171c",
diff --git a/styles/src/themes/solarized.ts b/styles/src/themes/solarized.ts
index b9d1690eb5..18c10c35c3 100644
--- a/styles/src/themes/solarized.ts
+++ b/styles/src/themes/solarized.ts
@@ -28,5 +28,5 @@ const ramps = {
   magenta: colorRamp(chroma("#d33682")),
 };
 
-export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps);
+export const light = createColorScheme(`${name} Light`, true, ramps);
diff --git a/styles/src/themes/sulphurpool.ts b/styles/src/themes/sulphurpool.ts
index 1f4c896868..409f581fde 100644
--- a/styles/src/themes/sulphurpool.ts
+++ b/styles/src/themes/sulphurpool.ts
@@ -28,5 +28,5 @@ const ramps = {
   magenta: colorRamp(chroma("#9c637a")),
 };
 
-export const dark = createColorScheme(`${name}-dark`, false, ramps);
-export const light = createColorScheme(`${name}-light`, true, ramps);
+export const dark = createColorScheme(`${name} Dark`, false, ramps);
+export const light = createColorScheme(`${name} Light`, true, ramps);