diff --git a/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
new file mode 100644
index 0000000000..908cb39faf
--- /dev/null
+++ b/plugins/techdocs/src/reader/transformers/styles/rules/variables.ts
@@ -0,0 +1,168 @@
+/*
+ * Copyright 2022 The Backstage Authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { RuleOptions } from './types';
+import { alpha, lighten } from '@material-ui/core';
+
+export default ({ theme }: RuleOptions) => `
+/*================== Variables ==================*/
+/*
+ As the MkDocs output is rendered in shadow DOM, the CSS variable definitions on the root selector are not applied. Instead, they have to be applied on :host.
+ As there is no way to transform the served main*.css yet (for example in the backend), we have to copy from main*.css and modify them.
+*/
+
+:host {
+ /* FONT */
+ --md-default-fg-color: ${theme.palette.text.primary};
+ --md-default-fg-color--light: ${theme.palette.text.secondary};
+ --md-default-fg-color--lighter: ${lighten(theme.palette.text.secondary, 0.7)};
+ --md-default-fg-color--lightest: ${lighten(
+ theme.palette.text.secondary,
+ 0.3,
+ )};
+
+ /* BACKGROUND */
+ --md-default-bg-color:${theme.palette.background.default};
+ --md-default-bg-color--light: ${theme.palette.background.paper};
+ --md-default-bg-color--lighter: ${lighten(
+ theme.palette.background.paper,
+ 0.7,
+ )};
+ --md-default-bg-color--lightest: ${lighten(
+ theme.palette.background.paper,
+ 0.3,
+ )};
+
+ /* PRIMARY */
+ --md-primary-fg-color: ${theme.palette.primary.main};
+ --md-primary-fg-color--light: ${theme.palette.primary.light};
+ --md-primary-fg-color--dark: ${theme.palette.primary.dark};
+ --md-primary-bg-color: ${theme.palette.primary.contrastText};
+ --md-primary-bg-color--light: ${lighten(
+ theme.palette.primary.contrastText,
+ 0.7,
+ )};
+
+ /* ACCENT */
+ --md-accent-fg-color: var(--md-primary-fg-color);
+
+ /* SHADOW */
+ --md-shadow-z1: ${theme.shadows[1]};
+ --md-shadow-z2: ${theme.shadows[2]};
+ --md-shadow-z3: ${theme.shadows[3]};
+
+ /* EXTENSIONS */
+ --md-admonition-fg-color: var(--md-default-fg-color);
+ --md-admonition-bg-color: var(--md-default-bg-color);
+ /* Admonitions and others are using SVG masks to define icons. These masks are defined as CSS variables. */
+ --md-admonition-icon--note: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--abstract: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--info: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--tip: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--success: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--question: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--warning: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--failure: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--danger: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--bug: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--example: url('data:image/svg+xml;charset=utf-8,');
+ --md-admonition-icon--quote: url('data:image/svg+xml;charset=utf-8,');
+ --md-footnotes-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-details-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-tasklist-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-tasklist-icon--checked: url('data:image/svg+xml;charset=utf-8,');
+ --md-nav-icon--prev: url('data:image/svg+xml;charset=utf-8,');
+ --md-nav-icon--next: url('data:image/svg+xml;charset=utf-8,');
+ --md-toc-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-clipboard-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-search-result-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-source-forks-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-source-repositories-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-source-stars-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-source-version-icon: url('data:image/svg+xml;charset=utf-8,');
+ --md-version-icon: url('data:image/svg+xml;charset=utf-8,');
+}
+
+:host > * {
+ /* CODE */
+ --md-code-fg-color: ${theme.palette.text.primary};
+ --md-code-bg-color: ${theme.palette.background.paper};
+ --md-code-hl-color: ${alpha(theme.palette.warning.main, 0.5)};
+ --md-code-hl-keyword-color: ${
+ theme.palette.type === 'dark'
+ ? theme.palette.primary.light
+ : theme.palette.primary.dark
+ };
+ --md-code-hl-function-color: ${
+ theme.palette.type === 'dark'
+ ? theme.palette.secondary.light
+ : theme.palette.secondary.dark
+ };
+ --md-code-hl-string-color: ${
+ theme.palette.type === 'dark'
+ ? theme.palette.success.light
+ : theme.palette.success.dark
+ };
+ --md-code-hl-number-color: ${
+ theme.palette.type === 'dark'
+ ? theme.palette.error.light
+ : theme.palette.error.dark
+ };
+ --md-code-hl-constant-color: var(--md-code-hl-function-color);
+ --md-code-hl-special-color: var(--md-code-hl-function-color);
+ --md-code-hl-name-color: var(--md-code-fg-color);
+ --md-code-hl-comment-color: var(--md-default-fg-color--light);
+ --md-code-hl-generic-color: var(--md-default-fg-color--light);
+ --md-code-hl-variable-color: var(--md-default-fg-color--light);
+ --md-code-hl-operator-color: var(--md-default-fg-color--light);
+ --md-code-hl-punctuation-color: var(--md-default-fg-color--light);
+
+ /* TYPESET */
+ --md-typeset-font-size: 1rem;
+ --md-typeset-color: var(--md-default-fg-color);
+ --md-typeset-a-color: var(--md-accent-fg-color);
+ --md-typeset-table-color: ${theme.palette.text.primary};
+ --md-typeset-del-color: ${
+ theme.palette.type === 'dark'
+ ? alpha(theme.palette.error.dark, 0.5)
+ : alpha(theme.palette.error.light, 0.5)
+ };
+ --md-typeset-ins-color: ${
+ theme.palette.type === 'dark'
+ ? alpha(theme.palette.success.dark, 0.5)
+ : alpha(theme.palette.success.light, 0.5)
+ };
+ --md-typeset-mark-color: ${
+ theme.palette.type === 'dark'
+ ? alpha(theme.palette.warning.dark, 0.5)
+ : alpha(theme.palette.warning.light, 0.5)
+ };
+}
+
+@media screen and (max-width: 76.1875em) {
+ :host > * {
+ /* TYPESET */
+ --md-typeset-font-size: .9rem;
+ }
+}
+
+@media screen and (max-width: 600px) {
+ :host > * {
+ /* TYPESET */
+ --md-typeset-font-size: .7rem;
+ }
+}
+`;