Inconsistency in alert colors between the Github and Github Dark themes.

[jcbrill]

The rendered colors for the [!IMPORTANT], [!WARNING], and [!CAUTION] alerts in the Github Dark theme appear to be incorrect. See Table 1 below.

Markdown Monster
Version 3.3.6
June 15, 2024
64-bit, .NET 8.0.5

The content of this post and two custom GitHub themes (i.e., _Github and _Github Dark) are contained in the attached zip file.

The rendered objects for alerts differ between the Github and Github Dark themes:

• Alerts are rendered in a filled box in the Github theme.
• Alerts are rendered in a blockquote-like style in the Github Dark theme.

The alert colors in the MM Github and MM Github Dark themes are significantly different from the colors employed in the GitHub Light Default and GitHub Dark Default themes. See Table 1 below.

Github appears to render alerts similar to blockquotes with the exception that the body text is rendered using the default text color rather than the alert color.

The attached markdown document and themes can be used to compare the MM GitHub themes (i.e., _Github, _Github Dark, Github, and Github Dark) with the default GitHub themes (i.e., Light Default and Dark Default)

Table 2 and Table 3 below contain more of the color definitions employed by MM and Github for the light and dark themes, respectively.

Notes:

• The attached themes contain color specifications using rgb values.
• The attached markdown document and this post contain color specifications using hex values.
• Color values were determined using the Microsoft PowerToys Color Picker.

Aside:

• When using embedded math-mode LaTeX content, additional backslashes are required for Github as compared to MM.
  • MM renders fine without the additional backslashes. However, when the same content is pasted into GitHub, there are rendering errors.
  • With the additional backslashes, MM renders the literal backslash while GitHub does not.
  • The differences can be seen by comparing the attached document in the MM preview pane with this post on GitHub.

Disclaimer:

• I have near zero experience writing html+css. The attached custom themes may have errors.

Feel free to ignore.

Table 1 Rendered Alert Titles and Colors - MM vs GitHub

Alert	MM Github	MM Github Dark	GitHub Light Default	GitHub Dark Default
[!INFO]	$\color{#31708f}\text{INFO}$	$\color{#31708f}\text{INFO}$	$\color{#636c76}\text{[!INFO]}$	$\color{#8d96a0}\text{[!INFO]}$
[!NOTE]	$\color{#31708f}\text{NOTE}$	$\color{#31708f}\text{NOTE}$	$\color{#0969da}\text{Note}$	$\color{#4493f8}\text{Note}$
[!TIP]	$\color{#31708f}\text{TIP}$	$\color{#31708f}\text{TIP}$	$\color{#1a7f37}\text{Tip}$	$\color{#3fb950}\text{Tip}$
[!IMPORTANT]	$\color{#a94442}\text{IMPORTANT}$	$\color{#daa520}\text{IMPORTANT}$	$\color{#8250df}\text{Important}$	$\color{#ab7df8}\text{Important}$
[!WARNING]	$\color{#8a6d3b}\text{WARNING}$	$\color{#b22222}\text{WARNING}$	$\color{#9a6700}\text{Warning}$	$\color{#d29922}\text{Warning}$
[!CAUTION]	$\color{#a94442}\text{CAUTION}$	$\color{#daa520}\text{CAUTION}$	$\color{#d1242f}\text{Caution}$	$\color{#f85149}\text{Caution}$

Example 1 - Blockquote and Alerts

BLOCKQUOTE

Default blockquote text.

[!INFO] Not supported by GitHub (default blockquote text).

[!NOTE] Useful information that users should know, even when skimming content.

• More.

More.

[!TIP] Helpful advice for doing things better or more easily.

[!IMPORTANT] Key information users need to know to achieve their goal.

[!WARNING] Urgent info that needs immediate user attention to avoid problems.

[!CAUTION] Advises about risks or negative outcomes of certain actions.

Table 2 Rendered Colors - MM Github vs GitHub Light Default

ID	Kind	MM Style	MM Object	MM Color	GH Color	GH Object	GH Style
L00	default text	html, body	Text	$\color{#24292e}\text{\#24292e}$	$\color{#1f2328}\text{\#1f2328}$	Text	html, body
L01	[!INFO]	FilledBox	Fill	$\color{#d9edf7}\text{\#d9edf7}$	$\color{#d0d7de}\text{\#d0d7de}$	Edge	Blockquote
L02	[!INFO]	FilledBox	H5	$\color{#31708f}\text{\#31708f}$	$\color{#636c76}\text{\#636c76}$	H5	Blockquote
L03	[!INFO]	FilledBox	Text	$\color{#31708f}\text{\#31708f}$	$\color{#636c76}\text{\#636c76}$	Text	Blockquote
L04	[!NOTE]	FilledBox	Fill	$\color{#d9edf7}\text{\#d9edf7}$	$\color{#0969da}\text{\#0969da}$	Edge	Blockquote
L05	[!NOTE]	FilledBox	H5	$\color{#31708f}\text{\#31708f}$	$\color{#0969da}\text{\#0969da}$	H5	Blockquote
L06	[!NOTE]	FilledBox	Text	$\color{#31708f}\text{\#31708f}$	$\color{#1f2328}\text{\#1f2328}$	Text	Blockquote
L07	[!TIP]	FilledBox	Fill	$\color{#d9edf7}\text{\#d9edf7}$	$\color{#1a7f37}\text{\#1a7f37}$	Edge	Blockquote
L08	[!TIP]	FilledBox	H5	$\color{#31708f}\text{\#31708f}$	$\color{#1a7f37}\text{\#1a7f37}$	H5	Blockquote
L09	[!TIP]	FilledBox	Text	$\color{#31708f}\text{\#31708f}$	$\color{#1f2328}\text{\#1f2328}$	Text	Blockquote
L10	[!IMPORTANT]	FilledBox	Fill	$\color{#f2dede}\text{\#f2dede}$	$\color{#8250df}\text{\#8250df}$	Edge	Blockquote
L11	[!IMPORTANT]	FilledBox	H5	$\color{#a94442}\text{\#a94442}$	$\color{#8250df}\text{\#8250df}$	H5	Blockquote
L12	[!IMPORTANT]	FilledBox	Text	$\color{#a94442}\text{\#a94442}$	$\color{#1f2328}\text{\#1f2328}$	Text	Blockquote
L13	[!WARNING]	FilledBox	Fill	$\color{#fcf8e3}\text{\#fcf8e3}$	$\color{#bf8700}\text{\#bf8700}$	Edge	Blockquote
L14	[!WARNING]	FilledBox	H5	$\color{#8a6d3b}\text{\#8a6d3b}$	$\color{#9a6700}\text{\#9a6700}$	H5	Blockquote
L15	[!WARNING]	FilledBox	Text	$\color{#8a6d3b}\text{\#8a6d3b}$	$\color{#1f2328}\text{\#1f2328}$	Text	Blockquote
L16	[!CAUTION]	FilledBox	Fill	$\color{#f2dede}\text{\#f2dede}$	$\color{#cf222e}\text{\#cf222e}$	Edge	Blockquote
L17	[!CAUTION]	FilledBox	H5	$\color{#a94442}\text{\#a94442}$	$\color{#d1242f}\text{\#d1242f}$	H5	Blockquote
L18	[!CAUTION]	FilledBox	Text	$\color{#a94442}\text{\#a94442}$	$\color{#1f2328}\text{\#1f2328}$	Text	Blockquote

Table 3 Rendered Colors - MM Github Dark vs GitHub Dark Default

ID	Kind	MM Style	MM Object	MM Color	GH Color	GH Object	GH Style
D00	default text	html, body	Text	$\color{#e6edf3}\text{\#e6edf3}$	$\color{#e6edf3}\text{\#e6edf3}$	Text	html, body
D01	[!INFO]	Blockquote	Edge	$\color{#4682b4}\text{\#4682b4}$	$\color{#30363d}\text{\#30363d}$	Edge	Blockquote
D02	[!INFO]	Blockquote	H5	$\color{#31708f}\text{\#31708f}$	$\color{#8d96a0}\text{\#8d96a0}$	H5	Blockquote
D03	[!INFO]	Blockquote	Text	$\color{#31708f}\text{\#31708f}$	$\color{#8d96a0}\text{\#8d96a0}$	Text	Blockquote
D04	[!NOTE]	Blockquote	Edge	$\color{#4682b4}\text{\#4682b4}$	$\color{#1f6feb}\text{\#1f6feb}$	Edge	Blockquote
D05	[!NOTE]	Blockquote	H5	$\color{#31708f}\text{\#31708f}$	$\color{#4493f8}\text{\#4493f8}$	H5	Blockquote
D06	[!NOTE]	Blockquote	Text	$\color{#31708f}\text{\#31708f}$	$\color{#e6edf3}\text{\#e6edf3}$	Text	Blockquote
D07	[!TIP]	Blockquote	Edge	$\color{#4682b4}\text{\#4682b4}$	$\color{#238636}\text{\#238636}$	Edge	Blockquote
D08	[!TIP]	Blockquote	H5	$\color{#31708f}\text{\#31708f}$	$\color{#3fb950}\text{\#3fb950}$	H5	Blockquote
D09	[!TIP]	Blockquote	Text	$\color{#31708f}\text{\#31708f}$	$\color{#e6edf3}\text{\#e6edf3}$	Text	Blockquote
D10	[!IMPORTANT]	Blockquote	Edge	$\color{#daa520}\text{\#daa520}$	$\color{#8957e5}\text{\#8957e5}$	Edge	Blockquote
D11	[!IMPORTANT]	Blockquote	H5	$\color{#daa520}\text{\#daa520}$	$\color{#ab7df8}\text{\#ab7df8}$	H5	Blockquote
D12	[!IMPORTANT]	Blockquote	Text	$\color{#daa520}\text{\#daa520}$	$\color{#e6edf3}\text{\#e6edf3}$	Text	Blockquote
D13	[!WARNING]	Blockquote	Edge	$\color{#b22222}\text{\#b22222}$	$\color{#9e6a03}\text{\#9e6a03}$	Edge	Blockquote
D14	[!WARNING]	Blockquote	H5	$\color{#b22222}\text{\#b22222}$	$\color{#d29922}\text{\#d29922}$	H5	Blockquote
D15	[!WARNING]	Blockquote	Text	$\color{#b22222}\text{\#b22222}$	$\color{#e6edf3}\text{\#e6edf3}$	Text	Blockquote
D16	[!CAUTION]	Blockquote	Edge	$\color{#daa520}\text{\#daa520}$	$\color{#da3633}\text{\#da3633}$	Edge	Blockquote
D17	[!CAUTION]	Blockquote	H5	$\color{#daa520}\text{\#daa520}$	$\color{#f85149}\text{\#f85149}$	H5	Blockquote
D18	[!CAUTION]	Blockquote	Text	$\color{#daa520}\text{\#daa520}$	$\color{#e6edf3}\text{\#e6edf3}$	Text	Blockquote

mm-github-themes.zip

[RickStrahl]

Thanks for this detailed outline - this is very helpful in making changes.

However, keep in mind the themes in MM are custom - they are approximate and don't try to necessarily match every feature exactly. Github uses completely different rendering engine than MM does so there will always be some small difference. The theming is approximate.

If somebody wants to take a swipe at matching up the CSS themes that would be great. I'll take a look when I have some spare cycles but it's not high priority on my backlog.

[jcbrill]

However, keep in mind the themes in MM are custom - they are approximate and don't try to necessarily match every feature exactly. Github uses completely different rendering engine than MM does so there will always be some small difference. The theming is approximate.

The top post could be considered "Much ado about nothing". Feel free to close this issue at any time.

Only recently did I become interested in the MM Github themes due to an issue with a GitHub post containing math-mode color specifications that did not render correctly when using a GitHub dark theme due to my own incorrect assumptions.

As a placeholder, both manual and automatically generated markdown content was using $...\color{black}...$ for the "default" font color which worked fine with light themes but failed miserably with dark themes.

Being able to toggle between the Github light and dark themes in MM prior to posting to GitHub is very useful to me. In some cases, similar issues have arisen with Mermaid diagrams. It is easier to toggle between themes in MM than in GitHub.

For more elaborate styled-posts such as the colored text tables above, my typical iterative workflow is:

• Develop the content in MM.
• Post the content in a private repository to check the GH rendering.
• Fix any issues in MM and edit the GH post ad nauseam, until there are no issues with the GH rendering.
• Copy-and-paste the content in the ultimate GitHub destination.

When toggling between the MM light and dark themes, the important/critical/warning alert color differences were readily apparent.

The styling differences for alerts between the MM light and dark themes went against my preconceived expectations. I expected the only difference between the MM light and dark themes to be the colors. It is fine if that is not the intent. Expectations adjusted accordingly.

Following the MM documentation suggestion of copying MM preview themes and customizing the copies locally, custom local Github light and dark themes were created and updated for comparison purposes.

The file mm-github-themes.zip, attached at the end of the top post above, contains:

File	Description
mm-github-themes.md	Document containing the content of the top post
PreviewThemes\_Github	Custom local MM GitHub-like light theme files
PreviewThemes\_Github Dark	Custom local MM GitHub-like dark theme files

The two custom themes, _Github and _Github Dark (named with leading underscores so they are at the top of the theme pick list), contain the following changes:

• Color updates from Table 2 above for the light theme and Table 3 above for the dark theme.
• Alert blockquote-styling similar to GitHub.

The custom light and dark themes can easily be compared to the MM light and dark themes for content differences. Since css is not in my skill set, the custom themes are more verbose as I do not know an easier way to color the title and left edge of the blockquote and maintain the default font color for the body of the alert text similar to GitHub.

I was reluctant to issue a PR as the custom implementation could be wildly erroneous.

The two custom themes were developed by togging between the MM themes and a browser toggling the appearance between the GitHub default light and dark themes. The methodology is summarized in the two tables below.

Program	Provider	Light	Dark
MM	MM	Github	Github Dark
MM	Custom	_Github	_Github Dark
Browser	GitHub	Default Light	Default Dark

Program	Provider	Document	Mode	Theme
MM	MM	mm-github-themes.md	Light	Github
MM	Custom	mm-github-themes.md	Light	_Github
Browser	GitHub	top post of thread	Light	Light Default
MM	MM	mm-github-themes.md	Dark	Github Dark
MM	Custom	mm-github-themes.md	Dark	_Github Dark
Browser	GitHub	top post of thread	Dark	Dark Default

Again, feel free to close at any time.

[RickStrahl]

I actually did take a look at this and made some changes to the GitHub Dark theme to start with:

Took a bit of tweaking of the style sheet, and this has to be migrated over to all the other default styles and adjusted for colors. In the process also updated FontAwesome library to v6 so that we can match the icons more closely (ie. using 'regular' style icons, instead of 'solid').

However, the colors that are actually used by GitHub don't match the colors you have in your table. I used the actual GitHub colors. Some things don't appear to work - like [!INFO].

[jcbrill]

That looks great!

However, the colors that are actually used by GitHub don't match the colors you have in your table. I used the actual GitHub colors.

Likely user error then.

The computed rbg values for the GitHub default light/dark theme entities reported by chrome may have been used in some cases. Perhaps local configurations of system/github, etc affected methodology used.

Some things don't appear to work - like [!INFO].

It's always something with Github markdown.

[RickStrahl]

Those tags originally were DocFX tags, so [!INFO] might just not be supported, but is in the original DocFX spec. Certainly is a useful feature either way and I'm glad they added this.

Now I have to fix all the other themes as the styling has changed. Luckily it's mostly cut and paste and then adjusting the colors and these base colors should actually work for all backgrounds (or at least match the light and dark versions). At least with non-GitHub themes I won't have to match anything exactly :smile:

[RickStrahl]

And here is the light theme:

[RickStrahl]

Not sure I understand this comment:

As a placeholder, both manual and automatically generated markdown content was using $...\color{black}...$ for the "default" font color which worked fine with light themes but failed miserably with dark themes.

[jcbrill]

The changes to both the light and dark themes are very well done. Kudos.

Not sure I understand this comment:

As a placeholder, both manual and automatically generated markdown content was using $...\color{black}...$ for the "default" font color which worked fine with light themes but failed miserably with dark themes.

That is because it is not very well written.

Examples using math-mode colored text:

1. This $\color{red}\text{always red}$ is: $\color{red}\text{always red}$.
2. This $\color{black}\text{always black}$ is: $\color{black}\text{always black}$.
3. This $\color{}\text{the default color}$ is: $\color{}\text{the default color}$.
4. This $\text{the default color}$ is: $\text{the default color}$.

The always black black text at the end of item 2 "disappears" when using the GitHub default dark theme (i.e., black text on a black background).

This seems obvious after-the-fact. The fatal flaw was assuming that black text would always be correct. I was erroneously using the color black by assuming black was always close enough to the default text color which was a bad assumption.

Forcing colors that are too light are a problem with the light themes. Forcing colors that are too dark are a problem with the dark themes. The challenge is finding the Goldilocks ranges of colors that work well for both light and dark themes.