fix: added support for dark and light themes by override yfm styles [#…

…712]
ytsaurus · Aug 8, 2024 · e8a83fd · e8a83fd
1 parent c5e91cb
commit e8a83fd
Show file tree

Hide file tree

Showing 2 changed files with 114 additions and 0 deletions.
diff --git a/packages/ui/src/ui/entries/main.tsx b/packages/ui/src/ui/entries/main.tsx
@@ -5,6 +5,7 @@ import axios from 'axios';
 import {handleAuthError} from '../store/actions/global';
 import {YT_UI_CLUSTER_HEADER_NAME} from '../../shared/constants';
 import './main.scss';
+import './yfm-overrides.scss';
 
 yt.subscribe('error', onError);
 axios.interceptors.response.use(undefined, onAxiosError);

diff --git a/packages/ui/src/ui/entries/ytm-overrides.scss b/packages/ui/src/ui/entries/ytm-overrides.scss
@@ -0,0 +1,113 @@
+// Overrides for styles from @diplodoc/transform/dist/css/yfm.css
+// We need it because @diplodoc/transform didn't support themes
+
+.g-root .yfm {
+    --yfm-font-family-sans: var(--g-font-family-sans);
+    --yfm-font-family-monospace: var(--g-font-family-monospace);
+}
+
+.g-root .yfm:not(.yfm_only-light) {
+    color: var(--g-color-text-primary);
+
+    --yfm-color-hljs-background: var(--g-color-base-background);
+    --yfm-color-hljs-subst: var(--g-color-text-complementary);
+    --yfm-color-hljs-comment: var(--g-color-text-secondary);
+    --yfm-color-hljs-deletion: var(--g-color-text-danger);
+    --yfm-color-hljs-section: var(--g-color-text-danger);
+
+    --yfm-file-icon-color: var(--g-color-text-primary);
+    --mermaid-zoom-control-color: var(--g-color-text-primary);
+
+    a {
+        color: var(--g-color-text-link);
+
+        &:hover,
+        &:active {
+            color: var(--g-color-text-link-hover);
+        }
+    }
+
+    &.yfm_links-visited {
+        a {
+            &:visited {
+                color: var(--g-color-text-link-visited);
+            }
+
+            &:visited:hover {
+                color: var(--g-color-text-link-visited-hover);
+            }
+        }
+    }
+
+    img {
+        background-color: var(--g-color-base-background);
+    }
+
+    $backgroundColors: (
+        yfm-accent-info: var(--g-color-base-info-light),
+        yfm-accent-tip: var(--g-color-base-positive-light),
+        yfm-accent-alert: var(--g-color-base-danger-light),
+        yfm-accent-warning: var(--g-color-base-warning-light),
+    );
+
+    @each $type, $color in $backgroundColors {
+        &.#{$type} {
+            background: $color;
+        }
+    }
+
+    code {
+        background: var(--g-color-base-misc-light);
+        color: var(--g-color-text-misc-heavy);
+    }
+
+    pre > code {
+        background: var(--g-color-base-misc-light);
+        color: var(--g-color-text-complementary);
+    }
+
+    table {
+        color: var(--g-color-text-primary);
+        border-color: var(--g-color-line-generic);
+        background: var(--g-color-base-background);
+
+        thead,
+        tr:nth-child(2n) {
+            background: var(--g-color-base-generic);
+        }
+
+        td,
+        td:first-child,
+        th {
+            border-color: var(--g-color-line-generic-solid);
+        }
+    }
+
+    hr {
+        background-color: var(--g-color-line-generic);
+    }
+
+    blockquote {
+        border-left-color: var(--g-color-line-info);
+    }
+
+    .yfm-tab-list {
+        border-bottom-color: var(--g-color-line-generic);
+    }
+
+    .yfm-tab:hover,
+    .yfm-tab:active {
+        color: var(--g-color-text-link-hover);
+    }
+
+    .yfm-tab.active {
+        border-bottom-color: var(--g-color-line-brand);
+    }
+}
+
+.g-root_theme_dark .yfm,
+.g-root_theme_dark-hc .yfm {
+    .yfm-cut-title:before {
+        background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAxNiI+PHBhdGggc3Ryb2tlPSJyZ2JhKDI1NSwgMjU1LCAyNTUsIDAuNykiIGZpbGw9Im5vbmUiIGQ9Ik0zIDZsNSA1IDUtNSI+PC9wYXRoPjwvc3ZnPg==');
+    }
+}