how to tweak the codemirror6 autocompletion popup style

Question

I am using codemirror6 as the code editor, this is the autocompletion code:

import { CompletionContext } from "@codemirror/autocomplete";

export function texAutoCompletions(context: CompletionContext) {
    let word = context.matchBefore(/[\\w\\]+/);
    if (!word) return null;
    if (word.from === word.to && !context.explicit)
        return null
    return {
        from: word.from,
        options: [
            { label: "match", type: "keyword" },
            { label: "hello", type: "variable", info: "(World)" },
            { label: "magic", type: "text", apply: "⠁⭒*.✩.*⭒⠁", detail: "macro" },
            { label: "\\begin{document}", type: "text", apply: "\begin{document}" },
            { label: "\\section", type: "text", apply: "\section" },
            { label: "\\subsection", type: "text", apply: "\subsection" },
        ]
    }
}

this code works fine and look like this:

this background is too dark and I want to tweak it to the light style. I have tried like this:

EditorView.theme({
        "&": { height: "100%" },
        '.cm-content': {
            fontSize: '16px'
        },
        '.cm-selectionMatch': {
            backgroundColor: "#A3BE8C"
        },
        '.cm-scroller': {

        },
        '.cm-hints': {
            backgroundColor: "#f0f0f0"
        }
    }),

seems did not work, am I missing something? I also tried:

'.cm-tooltip': {
                backgroundColor: "#f0f0f0"
            }

still did not work. what should I do to change the style? This is the codemirror version "codemirror": "^6.0.1". Also tried like this:

'.cm-tooltip': {
            backgroundColor: "#fefefe",
            background: "#fefefe",
        },
        '.cm-tooltip-autocomplete': {
            backgroundColor: "#fefefe",
            background: "#fefefe",
        }