How can I override the theme style and use the primary or accent color for another element?

[ssbarnea]

I want to add some color the bold (em) elements in order to make them easier to identify in the text but I was not able to identify how I can refer to the theme primary and accent colors in order to achieve that.

Can someone please give an example? For example, the code below works as expected but it does not make use of theme specific colors.

em {
    color: red;
}

The colors defined in color-scheme are clearly not official HTML color names and I want to be able to use the ones from the scheme. How can I do this?

[squidfunk]

Parametrization is implemented using CSS Variables. You can find all defined colors here:

mkdocs-material/src/assets/stylesheets/main/_colors.scss

Lines 27 to 134 in 88cfdce

	// Color variables
	:root {
	@extend %root;
	// Primary color shades
	--md-primary-fg-color: hsla(#{hex2hsl($clr-indigo-500)}, 1);
	--md-primary-fg-color--light: hsla(#{hex2hsl($clr-indigo-400)}, 1);
	--md-primary-fg-color--dark: hsla(#{hex2hsl($clr-indigo-700)}, 1);
	--md-primary-bg-color: hsla(0, 0%, 100%, 1);
	--md-primary-bg-color--light: hsla(0, 0%, 100%, 0.7);
	// Accent color shades
	--md-accent-fg-color: hsla(#{hex2hsl($clr-indigo-a200)}, 1);
	--md-accent-fg-color--transparent: hsla(#{hex2hsl($clr-indigo-a200)}, 0.1);
	--md-accent-bg-color: hsla(0, 0%, 100%, 1);
	--md-accent-bg-color--light: hsla(0, 0%, 100%, 0.7);
	}
	// ----------------------------------------------------------------------------
	// Allow to explicitly use color schemes in nested content
	[data-md-color-scheme="default"] {
	@extend %root;
	}
	// ----------------------------------------------------------------------------
	// Placeholders
	// ----------------------------------------------------------------------------
	// Default theme, i.e. light mode
	%root {
	// Default color shades
	--md-default-fg-color: hsla(0, 0%, 0%, 0.87);
	--md-default-fg-color--light: hsla(0, 0%, 0%, 0.54);
	--md-default-fg-color--lighter: hsla(0, 0%, 0%, 0.32);
	--md-default-fg-color--lightest: hsla(0, 0%, 0%, 0.07);
	--md-default-bg-color: hsla(0, 0%, 100%, 1);
	--md-default-bg-color--light: hsla(0, 0%, 100%, 0.7);
	--md-default-bg-color--lighter: hsla(0, 0%, 100%, 0.3);
	--md-default-bg-color--lightest: hsla(0, 0%, 100%, 0.12);
	// Code color shades
	--md-code-fg-color: hsla(200, 18%, 26%, 1);
	--md-code-bg-color: hsla(0, 0%, 96%, 1);
	// Code highlighting color shades
	--md-code-hl-color: hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
	--md-code-hl-number-color: hsla(0, 67%, 50%, 1);
	--md-code-hl-special-color: hsla(340, 83%, 47%, 1);
	--md-code-hl-function-color: hsla(291, 45%, 50%, 1);
	--md-code-hl-constant-color: hsla(250, 63%, 60%, 1);
	--md-code-hl-keyword-color: hsla(219, 54%, 51%, 1);
	--md-code-hl-string-color: hsla(150, 63%, 30%, 1);
	--md-code-hl-name-color: var(--md-code-fg-color);
	--md-code-hl-operator-color: var(--md-default-fg-color--light);
	--md-code-hl-punctuation-color: var(--md-default-fg-color--light);
	--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);
	// Typeset color shades
	--md-typeset-color: var(--md-default-fg-color);
	// Typeset `a` color shades
	--md-typeset-a-color: var(--md-primary-fg-color);
	// Typeset `mark` color shades
	--md-typeset-mark-color: hsla(#{hex2hsl($clr-yellow-a200)}, 0.5);
	// Typeset `del` and `ins` color shades
	--md-typeset-del-color: hsla(6, 90%, 60%, 0.15);
	--md-typeset-ins-color: hsla(150, 90%, 44%, 0.15);
	// Typeset `kbd` color shades
	--md-typeset-kbd-color: hsla(0, 0%, 98%, 1);
	--md-typeset-kbd-accent-color: hsla(0, 100%, 100%, 1);
	--md-typeset-kbd-border-color: hsla(0, 0%, 72%, 1);
	// Typeset `table` color shades
	--md-typeset-table-color: hsla(0, 0%, 0%, 0.12);
	// Admonition color shades
	--md-admonition-fg-color: var(--md-default-fg-color);
	--md-admonition-bg-color: var(--md-default-bg-color);
	// Footer color shades
	--md-footer-fg-color: hsla(0, 0%, 100%, 1);
	--md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
	--md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.45);
	--md-footer-bg-color: hsla(0, 0%, 0%, 0.87);
	--md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);
	// Shadow depth 1
	--md-shadow-z1:
	0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.05),
	0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.1);
	// Shadow depth 2
	--md-shadow-z2:
	0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.1),
	0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.25);
	// Shadow depth 3
	--md-shadow-z3:
	0 #{px2rem(4px)} #{px2rem(10px)} hsla(0, 0%, 0%, 0.2),
	0 0 #{px2rem(1px)} hsla(0, 0%, 0%, 0.35);
	}

By overriding those variables, you can easily define custom colors and use them across your customizations:

:root {
  --md-primary-fg-color:        #EE0F0F;
  --md-primary-fg-color--light: #ECB7B7;
  --md-primary-fg-color--dark:  #90030C;
}

Use it with:

.md-typeset em {
  color: var(--md-primary-fg-color);
}