Dynamically update Crepe theme from light/dark mode

[homanp]

Initial checklist

• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything (or linked relevant results below)

Problem

Currently there is no clear documentation/way on how to update the Crepe editor theme (dark/light nord theme as an example) dynamically.

Solution

1. Implement first class support for switching Crepe themes dynamically.
2. Add doucmentation

Alternatives

Alternative would be to use effect hooks to switch themes but importing absoulte css paths is cumbersome and error prone.

[Saul-Mirone]

Approach 1

Copy the theme variables you want and put them into different classes

.crepe .milkdown {
  --crepe-color-background: #FDFCFF;
  --crepe-color-on-background: #1B1C1D;
  --crepe-color-surface: #F8F9FF;
  --crepe-color-surface-low: #F2F3FA;
  ...
}
.dark .crepe .milkdown {
  --crepe-color-background: #1B1C1D;
  --crepe-color-on-background: #F8F9FF;
  --crepe-color-surface: #111418;
  --crepe-color-surface-low: #191C20;
  ...
}

And you can use element.classList.toggle('dark') to switch the theme.

Here's a very simple example:
https://github.com/Milkdown/website/blob/47897da845cab6cf3fd83dc527f69136c9a384b2/src/styles/crepe.css#L350

This approach is easy, but if we adjust the css variables in the future, you'll have to sync them manually. But the advantage is that you can create your own theme.

Approach 2

Choose the active stylesheet dynamically.

<link rel="stylesheet" href="theme-1.css" id="theme1">
<link rel="stylesheet" href="theme-2.css" id="theme2" disabled>

This is valid, you can find the doc here: https://developer.mozilla.org/en-US/docs/Web/API/HTMLLinkElement/disabled

Then in your js:

document.getElementById('theme1').disabled = true;
document.getElementById('theme2').disabled = false;

This approach is also not complex, you can use the crepe provided themes without copy paste.

Approach 2.5

You can also use media query, this approach is very similar to approach 2.

<link rel="stylesheet" href="theme-1.css" id="theme1" media="all">
<link rel="stylesheet" href="theme-2.css" id="theme2" media="not all">

In you js:

const theme1 = document.getElementById('theme1');
const theme2 = document.getElementById('theme2');

theme1.media = 'not all';
theme2.media = 'all';

There's also other options, the best approach is very different for different apps.