Add a syntax override style for `One Dark`

Nate Butler created 2 years ago

Change summary

styles/src/themes/one-dark.ts | 49 ++++++++++++++++++++++++++++--------
1 file changed, 38 insertions(+), 11 deletions(-)

Detailed changes

styles/src/themes/one-dark.ts

@@ -1,10 +1,22 @@
 import chroma from "chroma-js"
-import { Meta } from "./common/colorScheme"
+import { Meta, ThemeSyntax } from "./common/colorScheme"
 import { colorRamp, createColorScheme } from "./common/ramps"
 
 const name = "One Dark"
 
-export const dark = createColorScheme(`${name}`, false, {
+const color = {
+    white: "#ACB2BE",
+    grey: "#5D636F",
+    red: "#D07277",
+    orange: "#C0966B",
+    yellow: "#DFC184",
+    green: "#A1C181",
+    teal: "#6FB4C0",
+    blue: "#74ADE9",
+    purple: "#B478CF",
+};
+
+const ramps = {
     neutral: chroma
         .scale([
             "#282c34",
@@ -17,16 +29,31 @@ export const dark = createColorScheme(`${name}`, false, {
             "#c8ccd4",
         ])
         .domain([0.05, 0.22, 0.25, 0.45, 0.62, 0.8, 0.9, 1]),
-
-    red: colorRamp(chroma("#e06c75")),
-    orange: colorRamp(chroma("#d19a66")),
-    yellow: colorRamp(chroma("#e5c07b")),
-    green: colorRamp(chroma("#98c379")),
-    cyan: colorRamp(chroma("#56b6c2")),
-    blue: colorRamp(chroma("#61afef")),
-    violet: colorRamp(chroma("#c678dd")),
+    red: colorRamp(chroma(color.red)),
+    orange: colorRamp(chroma(color.orange)),
+    yellow: colorRamp(chroma(color.yellow)),
+    green: colorRamp(chroma(color.green)),
+    cyan: colorRamp(chroma(color.teal)),
+    blue: colorRamp(chroma(color.blue)),
+    violet: colorRamp(chroma(color.purple)),
     magenta: colorRamp(chroma("#be5046")),
-})
+};
+
+const syntax: ThemeSyntax = {
+    primary: { color: color.white },
+    comment: { color: color.grey },
+    function: { color: color.blue },
+    type: { color: color.teal },
+    property: { color: color.red },
+    number: { color: color.orange },
+    string: { color: color.green },
+    keyword: { color: color.purple },
+    boolean: { color: color.orange },
+    punctuation: { color: color.white },
+    operator: { color: color.teal }
+}
+
+export const dark = createColorScheme(name, false, ramps, syntax)
 
 export const meta: Meta = {
     name,