Add theme support to code syntax highlighting

[jmuzina]

Currently our code syntax highlighting is intended only for usage in light theme, and is not legible on dark theme.

We should introduce theme support to the syntax highlighting mixin to use the existing Prism theme on light theme, and the "Tomorrow Night" Prism theme on dark theme.

Context

The code below hard-codes colors from Prism's default theme into Vanilla. It should be updated to vary based in color theme, so that the "Tomorrow Night" theme is applied when an element is a descendant of an is-dark element.

vanilla-framework/scss/_base_syntax-highlighting.scss

Lines 27 to 69 in 80fddaa

	&.property,
	&.tag,
	&.boolean,
	&.number,
	&.constant,
	&.symbol,
	&.deleted {
	color: #77216f; // √ brand light aubergine
	}
	&.selector,
	&.attr-name,
	&.string,
	&.char,
	&.builtin,
	&.inserted {
	color: #0e811f; // positive button bg color nudged to meet AA contrast req on #f7f7f7
	}
	.operator,
	.entity,
	.url,
	.language-css &.string,
	.style &.string {
	color: #a86500; // $color-caution darkened to meet AA
	}
	&.atrule,
	&.attr-value,
	&.keyword {
	color: #06c; // $color-link
	}
	&.function,
	&.class-name {
	color: #c7162b; // color-negative
	}
	&.regex,
	&.important,
	&.variable {
	color: #dc3023; // secondary palette nudged to AA
	}

Resources

• Prism
• Design decision to use "Tomorrow Night" theme

[syncronize-issues-to-jira]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-17470.

This message was autogenerated