arswarog
ec5d2f14f4
## Зачем
Более комфортно для глаз
## Реализация
**Почему не хватило конфига в themeConfig.mermaid.options**
Docusaurus инициализирует Mermaid так:
```ts
mermaid.initialize({
...options, // статично, оба режима
theme: isDark ? 'base' : 'default',
});
```
`themeVariables` лежат внутри `options` и применяются независимо от `colorMode`. Попытка передать Nord-цвета через `options` дала бы Nord-оттенки и в светлом режиме.
**Почему swizzle, а не CSS-переопределения**
Mermaid рендерит SVG и встраивает финальные hex-значения непосредственно в `<style>` внутри SVG-элемента. CSS снаружи SVG не пробивает эти стили без `!important` на каждый конкретный селектор — хрупко и нестабильно при обновлениях Mermaid.Reviewed-on: #9
Co-authored-by: Arswarog <arswarog@yandex.ru>
52 lines
1.7 KiB
CSS
52 lines
1.7 KiB
CSS
/**
|
|
* Any CSS included here will be global. The classic template
|
|
* bundles Infima by default. Infima is a CSS framework designed to
|
|
* work well for content-centric websites.
|
|
*/
|
|
|
|
/* You can override the default Infima variables here. */
|
|
:root {
|
|
--ifm-color-primary: #2e8555;
|
|
--ifm-color-primary-dark: #29784c;
|
|
--ifm-color-primary-darker: #277148;
|
|
--ifm-color-primary-darkest: #205d3b;
|
|
--ifm-color-primary-light: #33925d;
|
|
--ifm-color-primary-lighter: #359962;
|
|
--ifm-color-primary-lightest: #3cad6e;
|
|
--ifm-code-font-size: 95%;
|
|
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
/* Nord dark theme — https://www.nordtheme.com */
|
|
[data-theme='dark'] {
|
|
/* Frost — основной акцент (nord8) */
|
|
--ifm-color-primary: #88c0d0;
|
|
--ifm-color-primary-dark: #76b5c7;
|
|
--ifm-color-primary-darker: #6dafc3;
|
|
--ifm-color-primary-darkest: #5e81ac;
|
|
--ifm-color-primary-light: #95c8d8;
|
|
--ifm-color-primary-lighter: #9ecfdd;
|
|
--ifm-color-primary-lightest: #b4dce8;
|
|
|
|
/* Polar Night — фоны */
|
|
--ifm-background-color: #2e3440;
|
|
--ifm-background-surface-color: #3b4252;
|
|
--ifm-navbar-background-color: #2e3440;
|
|
--ifm-footer-background-color: #2e3440;
|
|
|
|
/* Snow Storm — текст */
|
|
--ifm-font-color-base: #eceff4;
|
|
--ifm-font-color-secondary: #d8dee9;
|
|
|
|
/* Emphasis scale: Polar Night → Snow Storm */
|
|
--ifm-color-emphasis-100: #3b4252;
|
|
--ifm-color-emphasis-200: #434c5e;
|
|
--ifm-color-emphasis-300: #4c566a;
|
|
--ifm-color-emphasis-400: #7b8ba0;
|
|
--ifm-color-emphasis-500: #d8dee9;
|
|
--ifm-color-emphasis-600: #e5e9f0;
|
|
--ifm-color-emphasis-700: #eceff4;
|
|
|
|
--docusaurus-highlighted-code-line-bg: rgba(136, 192, 208, 0.15);
|
|
}
|