From cb8c848a38d2e100288b46ba767258e83f5d9b15 Mon Sep 17 00:00:00 2001 From: Oliver Sand Date: Mon, 26 Apr 2021 17:16:59 +0200 Subject: [PATCH] Disable color transitions on links to avoid issues in dark mode Signed-off-by: Oliver Sand --- .changeset/techdocs-red-donkeys-share.md | 5 +++++ plugins/techdocs/src/reader/components/Reader.tsx | 13 ++++++++++++- 2 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 .changeset/techdocs-red-donkeys-share.md diff --git a/.changeset/techdocs-red-donkeys-share.md b/.changeset/techdocs-red-donkeys-share.md new file mode 100644 index 0000000000..29d932d0b8 --- /dev/null +++ b/.changeset/techdocs-red-donkeys-share.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-techdocs': patch +--- + +Disable color transitions on links to avoid issues in dark mode. diff --git a/plugins/techdocs/src/reader/components/Reader.tsx b/plugins/techdocs/src/reader/components/Reader.tsx index ff4f47dca0..14fcb43700 100644 --- a/plugins/techdocs/src/reader/components/Reader.tsx +++ b/plugins/techdocs/src/reader/components/Reader.tsx @@ -197,10 +197,21 @@ export const Reader = ({ entityId, onReady }: Props) => { } .md-nav--primary > .md-nav__title [for="none"] { padding-top: 0; - } + } } `, }), + injectCss({ + // Disable CSS animations on link colors as they lead to issues in dark + // mode. The dark mode color theme is applied later and theirfore there + // is always an animation from light to dark mode when navigation + // between pages. + css: ` + .md-nav__link, .md-typeset a, .md-typeset a::before, .md-typeset .headerlink { + transition: none; + } + `, + }), injectCss({ // Admonitions and others are using SVG masks to define icons. These // masks are defined as CSS variables.