11ty syntax highlighting for dark mode using Okaidia of PrismJS

This is an additional css snippet for the dark mode feature of Tailwindcss if you are using Okaidia theme of PrismJS in 11ty.

First, we need to add syntax highlighting to our 11ty project.
Here is the link for the installation.

After installing the syntax highlighting plugin and after adding the Okaidia theme, just copy the css snippet below in your css file.

Note: This css styles is for Okaidia theme and I haven't tried using other themes. But you can change any color you want based on your own preferences.

.dark code[class*="language-"],
.dark pre[class*="language-"] {
    text-shadow: 0 1px rgb(253, 253, 253);
}

.dark:not(pre) > code[class*="language-"],
.dark pre[class*="language-"] {
    background: #F9FAFB;
}

.dark .token.cdata,
.dark .token.comment,
.dark .token.doctype,
.dark .token.prolog {
    color: rgb(167, 166, 166);
}

.dark .token.punctuation {
    color: #111827;
}

.dark .token.constant,
.dark .token.deleted,
.dark .token.property,
.dark .token.symbol,
.dark .token.tag {
    color: #DC2626;
}

.dark .token.boolean,
.dark .token.number {
    color: #935cfa;
}

.dark .token.attr-name,
.dark .token.builtin,
.dark .token.char,
.dark .token.inserted,
.dark .token.selector,
.dark .token.string {
    color: #86c704;
}

.dark .language-css .token.string,
.dark .style .token.string,
.dark .token.entity,
.dark .token.operator,
.dark .token.url,
.dark .token.variable {
    color: #111827;
}

.dark .token.atrule,
.dark .token.attr-value,
.dark .token.class-name,
.dark .token.function {
    color: #beb029;
}

.dark .token.keyword {
    color: #41c4df;
}

.dark .token.important,
.dark .token.regex {
    color: #e47e09;
}