diff --git a/packages/www/src/pages/playground/index.tsx b/packages/www/src/pages/playground/index.tsx
index 4771098ea..43766c65c 100644
--- a/packages/www/src/pages/playground/index.tsx
+++ b/packages/www/src/pages/playground/index.tsx
@@ -1,6 +1,8 @@
-import { dangerHTML } from 'brisa';
+import { dangerHTML as esm } from 'brisa';
 import getMonacoEditorExtraLibs from '@/helpers/monaco-extra-libs';
 
+import '@/styles/playground.css';
+
 const defaultValue = `// src/web-components/wc-counter.tsx
 import type { WebContext } from 'brisa';
 
@@ -22,6 +24,7 @@ export default function Playground() {
       <play-ground skipSSR defaultValue={defaultValue}>
         <div
           slot="code-editor"
+          class="editor"
           style={{
             height: '100%',
             width: '100%',
@@ -30,7 +33,7 @@ export default function Playground() {
           id="code-editor"
         >
           <script type="module">
-            {dangerHTML(`
+            {esm(`
               import * as monaco from 'https://esm.sh/monaco-editor';
               import tsWorker from 'https://esm.sh/monaco-editor/esm/vs/language/typescript/ts.worker?worker';
               import { MonacoJsxSyntaxHighlight, getWorker } from 'https://esm.sh/monaco-jsx-syntax-highlight'
@@ -47,7 +50,6 @@ export default function Playground() {
               const existingModel = monaco.editor.getModels().find(m => m.uri.toString() === modelUri.toString());
               const codeModel = existingModel ?? monaco.editor.createModel(\`${defaultValue}\`, "typescript", modelUri);
 
-
               monaco.languages.typescript.typescriptDefaults.setCompilerOptions({
                 jsx: monaco.languages.typescript.JsxEmit.Preserve,
                 target: monaco.languages.typescript.ScriptTarget.ES2020,
@@ -73,8 +75,9 @@ export default function Playground() {
               const { highlighter } = monacoJsxSyntaxHighlight.highlighterBuilder({
                 editor,
                 filePath: modelUri?.toString() ?? modelUri?.path,
-              })
-              highlighter()
+              });
+
+              highlighter();
 
               editor.setModel(codeModel);
 
diff --git a/packages/www/src/styles/playground.css b/packages/www/src/styles/playground.css
new file mode 100644
index 000000000..3b8077c79
--- /dev/null
+++ b/packages/www/src/styles/playground.css
@@ -0,0 +1,62 @@
+/* Base styles */
+.jsx-expression-braces,
+.bracket-highlighting-0,
+.bracket-highlighting-4 {
+  color: #000000;
+}
+
+/* Dark mode styles */
+body.dark .jsx-expression-braces,
+body.dark .bracket-highlighting-0,
+body.dark .bracket-highlighting-4 {
+  color: #A89984 !important;
+}
+
+.bracket-highlighting-1,
+.bracket-highlighting-3 {
+  color: #A89984;
+}
+
+/* Dark mode styles */
+body.dark .bracket-highlighting-1,
+body.dark .bracket-highlighting-3 {
+  color: #EBDBB2 !important;
+}
+
+.jsx-tag-angle-bracket {
+  color: #694003 !important;
+}
+
+/* Dark mode styles */
+body.dark .jsx-tag-angle-bracket {
+  color: #83A598 !important;
+}
+
+.jsx-tag-name {
+  color: #22863a !important;
+}
+
+/* Dark mode styles */
+body.dark .jsx-tag-name {
+  color: #8EC07C !important;
+}
+
+.jsx-tag-attribute-key,
+.jsx-expression-braces + :not(.jsx-tag-angle-bracket):not(.bracket-highlighting-3) {
+  color: #6f42c1 !important;
+}
+
+/* Dark mode styles */
+body.dark .jsx-tag-attribute-key,
+body.dark .jsx-expression-braces + :not(.jsx-tag-angle-bracket):not(.bracket-highlighting-3) {
+  color: #FABD2F !important;
+}
+
+.jsx-text {
+  color: #951616 !important;
+}
+
+/* Dark mode styles */
+body.dark .jsx-text {
+  color: #EBDBB2 !important;
+}