Modify the color array in theme-one-dark

v6
1

I spent almost 3 hours researching how to change the text color of the SQL syntaxis. And I have yet to find a positive answer.

I have a simple SQL editor, which is working as it should be, including automplete. I am using theme-one-dark theme.

When I type the word “select” it shows in violet color: “#c678dd,” defined in the const color in the theme code.

  • How do I configure the theme to change the color “violet” to a different color in the editor?
  • Or, how to configure the SQL syntax with pre-define colors in the editor?
  • Or, do I have to fork the theme-one-dark to create my color combinations?
2

Yes, fork it or create your own theme.

3

Excellent, good to know! Thank you.
I should have asked this first before going into the hunt. I will indeed work on my own theme.

Due to time, I am currently using this “hack,” which serves my current purposes. I know this array could change in the future, but in my tests this had been consistent until now.

import {basicSetup} from "codemirror"
import { EditorView, keymap } from "@codemirror/view";
import { html } from "@codemirror/lang-html"
import { oneDark, color as oneDarkPalette } from '@codemirror/theme-one-dark';

oneDark[1][1].value.rules = [
    ".ͼp {color: #fff34c;}", //Changed
    ".ͼq {color: #dfdfdf;}", //Changed
    ".ͼr {color: #61afef;}",
    ".ͼs {color: #d19a66;}",
    ".ͼt {color: #abb2bf;}",
    ".ͼu {color: #ff25fd;}", //Changed
    ".ͼv {color: #56b6c2;}",
    ".ͼw {color: #7d8799;}",
    ".ͼx {font-weight: bold;}",
    ".ͼy {font-style: italic;}",
    ".ͼz {text-decoration: line-through;}",
    ".ͼ10 {color: #7d8799; text-decoration: underline;}",
    ".ͼ11 {font-weight: bold; color: #e06c75;}",
    ".ͼ12 {color: #d19a66;}",
    ".ͼ13 {color: #98c379;}",
    ".ͼ14 {color: #ffffff;}"
]

new EditorView({
  doc: "<script>\n\tvar name=\"Charles\"\n</script>",
  extensions: [basicSetup,html(),oneDark],
  parent: document.body
})

This may help somebody searching for a quick hack.