Change Tailwind play's dark syntax theme

[PositiveUser]

Press Ctrl+Shift+J to open console.

Pressing Ctrl+Shift+P to open command palette.

Type "live" and press Enter.

Copy & paste the JavaScript code below. This code is for One dark theme.

if (location.href.includes("play.tailwindcss.com")) {
    // Tag name
    $$(".mtk27").forEach(el => el.style.color = "#F07178")

    // Editor ackground
    $$(`
    .monaco-editor,
    .monaco-editor-background,
    .monaco-editor .inputarea.ime-input,
    .margin
    `).forEach(el => el.style.backgroundColor = "#282C34")

    // Header background
    $("header").style.backgroundColor = "#282C34"
    
    // Tabs navnavigation background
    $(".top-0").style.backgroundColor = "#282C34"

    // Line numbers
    $$(".line-numbers").forEach(el => el.style.color = "#aaa")

    // Comments
    $$(".mtk12").forEach(el => el.style.color = "#59626F")

    // Attribute
    $$(".mtk6").forEach(el => el.style.color = "#E5C17C")

    // Attribute value
    $$(".mtk5").forEach(el => el.style.color = "#98C379")

    // Text
    $$(".mtk1").forEach(el => el.style.color = "#DEDEDE")

    // Other tokens
    $$(".mtk15").forEach(el => el.style.color = "#979FAD")
}

PREVIEW

You can change the syntax highlighting by editing the code above. I have also made code for changing some things' background.

Open command palette, type "win" and press Enter. Developer tools will open in a new window by doing this. You will not see this command if you already have developer tools opened as a window.

Press Windows+↓ to minimize the developer tools.

Ensure that the devtools is open.

Go to Tailwind Play

Thank you very much for reading