diff --git a/source/assets/js/playground/theme.ts b/source/assets/js/playground/theme.ts
index ff1101d..9b526bb 100644
--- a/source/assets/js/playground/theme.ts
+++ b/source/assets/js/playground/theme.ts
@@ -4,12 +4,28 @@ import { tags } from '@lezer/highlight';
 const playgroundHighlightStyle = HighlightStyle.define([
   {
     tag: [tags.special(tags.variableName), tags.tagName],
-    color: '#445588',
-    fontWeight: '600',
+    color: 'var(--sl-color--code-base)'
+  },
+  { tag: tags.keyword,
+    color: 'var(--sl-color--code-bright-dark)',
+    fontWeight: '600'
+  },
+  { tag: tags.definitionKeyword,
+    color: 'var(--sl-color--code-dark)',
+    fontWeight: '600'
+  },
+  { tag: tags.comment,
+    color: 'var(--sl-color--code-muted)',
+    fontStyle: 'italic'
+  },
+  { tag: tags.propertyName,
+    color: 'var(--sl-color--code-warm)',
+    fontWeight: '600'
+  },
+  { tag: tags.className,
+    color: 'var(--sl-color--code-cool)',
+    fontWeight: '600'
   },
-  { tag: tags.definitionKeyword, fontWeight: '600' },
-  { tag: tags.comment, color: '#006666', fontStyle: 'italic' },
-  { tag: tags.propertyName, color: '#990000' },
 ]);
 
 export { playgroundHighlightStyle };
diff --git a/source/assets/sass/components/_playground.scss b/source/assets/sass/components/_playground.scss
index 4280833..ddfb20c 100644
--- a/source/assets/sass/components/_playground.scss
+++ b/source/assets/sass/components/_playground.scss
@@ -118,7 +118,7 @@
   height: 100%;
   font-size: var(--sl-font-size--x-small);
   background-color: var(--sl-color-editor-background);
-  color: var(--sl-color--code-text);
+  color: var(--sl-color--code-base, var(--sl-color--code-text));
 
   &.cm-focused {
     // override focus style
@@ -221,12 +221,10 @@
 }
 
 .sl-c-playground__tabbar-title {
-  text-transform: uppercase;
-
   // For nested caps in tab title, reset a few styles
   .caps {
     --sl-font-size--caps: var(--sl-font-size--medium);
-
+    font-weight: normal;
     letter-spacing: 0;
   }