feat: auto theme for expressive code

[JoeyC-Dev]

Type of change

• Bug fix (a non-breaking change that fixes an issue)
• New feature (a non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Other (please describe):

Checklist

• I have read the CONTRIBUTING document.
• I have checked to ensure that this Pull Request is not for personal changes.
• I have performed a self-review of my own code.
• My changes generate no new warnings.

Related Issue

None

Changes

• Update applyThemeToDocument() to auto switch the Expressive Code theme by setting data-theme based on current light/dark state.
• Modified from expressiveCodeConfig.theme to expressiveCodeConfig.themes to contains two theme names.

How To Test

Switch between dark/light mode to see if code style (expressive code) inserted in the article is changed.

Screenshots (if applicable)

Additional Notes

This should give users the chance to modify different dark themes for light/dark mode. Dark theme != dark theme in different environment.

Personally I would love to add a border because it will make it more clear. But since that is a personal change, I did not include that in PR.
Without border:

With border:

.expressive-code {
  .frame {
      @apply !shadow-none;
      border: 1px solid rgba(128, 128, 128, 0.2) !important;
      border-radius: 0.75rem;
  }

  .title {
      font-family: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
}

[vercel]

@JoeyC-Dev is attempting to deploy a commit to the zephyirdgmailcom's projects Team on Vercel.

A member of the Team first needs to authorize it.