Improve theme integration#693
Conversation
|
Hi, I tried this with our docs that use |
|
This PR is just for preventing MyST-nb from messing up a theme’s table CSS. I re-titled #618 to be more clear. For E.g. sphinx-book-theme currently does html[data-theme="dark"] .bd-content div.cell_output .text_html:not(:has(table.dataframe)),
html[data-theme="dark"] .bd-content div.cell_output .widget-subarea,
html[data-theme="dark"] .bd-content div.cell_output img {
background-color: var(--some-light-color);
}It would have to remove the second selector ( But this PR is a very necessary pre-condition for anything to be able to work. MyST just injecting this CSS is really bad and needs to be fixed! |
|
@bsipocz is there any recorded reason why that CSS exists? If yes, we need to fix this in another way. If not, we should really remove this without replacement, just setting styles for |
|
@bsipocz OK, so no reason not to merge this now, right? |
no reason just the lack of time. don't have JB1 using repos any more, so it would help review to have before/after screenshot for these types of changes. |
|
I totally get that! We all have limited time and it can be hard. Regarding previewing changesThe Regarding the visual changes this PR causedThe effect is that the padding is reduced, but as said, it makes no sense that some of the table styling
if you want e.g. increase the padding of the pydata theme, that should happen in sphinx-book-theme and not in this extension, and should use similarly specific CSS selectors to affect the same tables, not all tables. the other visual changes caused by this PR is simply that this extension’s dark mode support is now better. it now supports themes that set |
myst-nb 1.4.0 (PR executablebooks/MyST-NB#693) changed its dark mode CSS from html[data-theme="dark"] selectors to a CSS space-toggle technique that falls back to @media (prefers-color-scheme) when no data-theme attribute is present. Since quantecon-book-theme uses body.dark-theme class (not data-theme) for dark mode, mystnb never detects the theme mode and falls through to the OS color scheme preference, causing dark code cell backgrounds on light-themed sites for users with OS dark mode enabled. Fix: Set data-theme="light" on <html> by default and toggle it to data-theme="dark" when the contrast button is activated. This is the standard mechanism used by pydata-sphinx-theme, Furo, and sphinx-book-theme. Closes #372
…literal-color (#373) * FIX: Set data-theme attribute on <html> for mystnb 1.4+ compatibility myst-nb 1.4.0 (PR executablebooks/MyST-NB#693) changed its dark mode CSS from html[data-theme="dark"] selectors to a CSS space-toggle technique that falls back to @media (prefers-color-scheme) when no data-theme attribute is present. Since quantecon-book-theme uses body.dark-theme class (not data-theme) for dark mode, mystnb never detects the theme mode and falls through to the OS color scheme preference, causing dark code cell backgrounds on light-themed sites for users with OS dark mode enabled. Fix: Set data-theme="light" on <html> by default and toggle it to data-theme="dark" when the contrast button is activated. This is the standard mechanism used by pydata-sphinx-theme, Furo, and sphinx-book-theme. Closes #372 * UPDATE: Regenerate all visual snapshots (8 files) * fix: override pydata-sphinx-theme .nf color rule activated by data-theme attribute pydata-sphinx-theme has a rule scoped to html[data-theme=light] that sets .highlight .nf color to #0078a1 with !important. This was dormant before we set data-theme on <html>. It overrode our custom function name color (#06287e) from _code.scss since :where() has zero specificity. Add a counter-rule with higher specificity to preserve our custom highlighting when qetheme_code_style is enabled. * fix: increase specificity of custom highlighting to beat pydata's Pygments rules pydata-sphinx-theme's overwrite_pygments_css scopes ALL Pygments rules to html[data-theme="light"] and html[data-theme="dark"] at specificity (0,3,1). Our :where() wrapper gave zero specificity, so setting data-theme activated pydata's Pygments rules which overrode ALL our custom token colors. Replace :where(body:not(.use-pygments-style)) with html body:not(.use-pygments-style) which gives specificity (0,3,2), beating pydata's (0,3,1). Applied to both _code.scss and _syntax.scss. Remove the previous .nf-specific override since higher base specificity now handles all tokens. * UPDATE: Regenerate all visual snapshots (3 files) * Add inline_literal_box option to control inline code box styling Add configurable theme option (default: False) that controls whether inline code elements (code.literal) show pydata-sphinx-theme's background box and border styling. When False, the boxes are stripped to match the theme's original look. Set inline_literal_box: True in html_theme_options to re-enable the box styling. * Document inline_literal_box option in code highlighting docs * UPDATE: Regenerate all visual snapshots (4 files) * Add --qe-literal-color to text color scheme system Integrate inline code literal (code.literal) color into the color scheme system alongside emphasis, strong, and definition colors: - Seoul256: #af5f5f (muted rust) / #d78787 (soft rose dark) - Gruvbox: #9d0006 (dark red) / #fb4934 (bright red dark) - None: inherits text color Overridable via --qe-literal-color CSS variable. * Apply Copilot review: add contrast ratios and fix leading space in body class --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Fixes #618