fix: code editor/block theme inconsistency (#2393)

Tiny fix to make the themes across code blocks and editor components across the app consistent.

Author: myftija

apps/webapp/app/components/code/CodeBlock.tsx

@@ -86,11 +86,17 @@ const defaultTheme: PrismTheme = {
       },
     },
     {
-      types: ["property", "tag", "boolean", "number", "constant", "symbol", "deleted"],
+      types: ["property", "tag", "constant", "symbol", "deleted"],
       style: {
         color: "#9B99FF",
       },
     },
+    {
+      types: ["boolean", "number"],
+      style: {
+        color: "#E5C07B",
+      },
+    },
     {
       types: ["selector", "attr-name", "string", "char", "builtin", "inserted"],
       style: {
@@ -151,12 +157,6 @@ const defaultTheme: PrismTheme = {
         color: "#F85149",
       },
     },
-    {
-      types: ["boolean"],
-      style: {
-        color: "#9B99FF",
-      },
-    },
     {
       types: ["char"],
       style: {

apps/webapp/app/components/code/codeMirrorTheme.ts

@@ -11,9 +11,10 @@ export function darkTheme(): Extension {
     ivory = "#abb2bf",
     stone = "#7d8799",
     malibu = "#61afef",
-    sage = "#98c379",
+    sage = "#afec73",
     whiskey = "#d19a66",
     violet = "#c678dd",
+    lilac = "#9b99ff",
     darkBackground = "#21252b",
     highlightBackground = "rgba(71,85,105,0.2)",
     background = "#121317",
@@ -173,7 +174,7 @@ export function darkTheme(): Extension {
     { tag: tags.keyword, color: violet },
     {
       tag: [tags.name, tags.deleted, tags.character, tags.propertyName, tags.macroName],
-      color: coral,
+      color: lilac,
     },
     { tag: [tags.function(tags.variableName), tags.labelName], color: malibu },
     {
@@ -186,6 +187,7 @@ export function darkTheme(): Extension {
         tags.typeName,
         tags.className,
         tags.number,
+        tags.bool,
         tags.changed,
         tags.annotation,
         tags.modifier,
@@ -213,7 +215,7 @@ export function darkTheme(): Extension {
     { tag: tags.link, color: stone, textDecoration: "underline" },
     { tag: tags.heading, fontWeight: "bold", color: coral },
     {
-      tag: [tags.atom, tags.bool, tags.special(tags.variableName)],
+      tag: [tags.atom, tags.special(tags.variableName)],
       color: whiskey,
     },
     {