Skip to content

Improve output cells in dark mode #679

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bsipocz merged 4 commits into from
Jul 2, 2025
Merged

Improve output cells in dark mode #679

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
b95b302
Add palettes to pick colors logically in light and dark theme
jaladh-singhal Jul 2, 2025
6d16973
Make plain outputs borderless if highlighted
jaladh-singhal Jul 2, 2025
79fbaaa
[pre-commit.ci] auto fixes from pre-commit.com hooks
pre-commit-ci[bot] Jul 2, 2025
b55284f
Fix typo
jaladh-singhal Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 49 additions & 12 deletions myst_nb/static/mystnb.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,60 @@
/* Variables */
:root {
--mystnb-source-bg-color: #f7f7f7;
--mystnb-stdout-bg-color: #fcfcfc;
--mystnb-stderr-bg-color: #fdd;
--mystnb-traceback-bg-color: #fcfcfc;
--mystnb-source-border-color: #ccc;
/*
Following palettes are generated by using https://m2.material.io/design/color/the-color-system.html#tools-for-picking-colors
- neutral palette with #fcfcfc and danger palette with #ffdddd as base colors.
50 means lightest, 900 means darkest; less used intermediate shades are omitted
but can be added when needed by accessing full palette from the above link.
*/
--mystnb-neutral-palette-50: #fcfcfc;
--mystnb-neutral-palette-100: #f7f7f7;
--mystnb-neutral-palette-400: #cccccc;
--mystnb-neutral-palette-500: #afafaf;
--mystnb-neutral-palette-800: #505050;
--mystnb-neutral-palette-900: #2d2d2d;

--mystnb-danger-palette-50: #ffdddd;
--mystnb-danger-palette-100: #f5acad;
--mystnb-danger-palette-400: #c42029;
--mystnb-danger-palette-500: #b40008;
--mystnb-danger-palette-800: #850010;
--mystnb-danger-palette-900: #680010;

/* MyST-NB specific variables; colors should be logically picked from palettes */
--mystnb-source-bg-color: var(--mystnb-neutral-palette-100);
--mystnb-stdout-bg-color: var(--mystnb-neutral-palette-50);
--mystnb-stderr-bg-color: var(--mystnb-danger-palette-50);
--mystnb-traceback-bg-color: var(--mystnb-neutral-palette-50);
--mystnb-source-border-color: var(--mystnb-neutral-palette-400);
--mystnb-source-margin-color: green;
--mystnb-stdout-border-color: #f7f7f7;
--mystnb-stderr-border-color: #f7f7f7;
--mystnb-traceback-border-color: #ffd6d6;
--mystnb-stdout-border-color: var(--mystnb-neutral-palette-100);
--mystnb-stderr-border-color: var(--mystnb-neutral-palette-100);
--mystnb-traceback-border-color: var(--mystnb-danger-palette-100);
--mystnb-hide-prompt-opacity: 70%;
--mystnb-source-border-radius: .4em;
--mystnb-source-border-width: 1px;
--mystnb-scrollbar-width: 0.3rem;
--mystnb-scrollbar-height: 0.3rem;
--mystnb-scrollbar-thumb-color: #c1c1c1;
--mystnb-scrollbar-thumb-hover-color: #a0a0a0;
--mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-400);
--mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-500);
--mystnb-scrollbar-thumb-border-radius: 0.25rem;
}

/* Override colors in dark theme */
html[data-theme="dark"] {
--mystnb-source-bg-color: var(--mystnb-neutral-palette-800);
--mystnb-stdout-bg-color: var(--mystnb-neutral-palette-900);
--mystnb-stderr-bg-color: var(--mystnb-danger-palette-900);
--mystnb-traceback-bg-color: var(--mystnb-neutral-palette-900);
--mystnb-source-border-color: var(--mystnb-neutral-palette-500);
--mystnb-stdout-border-color: var(--mystnb-neutral-palette-800);
--mystnb-stderr-border-color: var(--mystnb-neutral-palette-800);
--mystnb-traceback-border-color: var(--mystnb-danger-palette-800);
--mystnb-scrollbar-thumb-color: var(--mystnb-neutral-palette-500);
--mystnb-scrollbar-thumb-hover-color: var(--mystnb-neutral-palette-400);
}


/* Whole cell */
div.container.cell {
padding-left: 0;
Expand Down Expand Up @@ -73,8 +109,9 @@ div.cell_output div.output>div.highlight {
box-shadow: none;
}

.cell_output .output.text_plain,
.cell_output .output.stream {
.cell_output .output.text_plain:not(:has(.highlight)),
.cell_output .output.stream:not(:has(.highlight)) {
/* plain (or stream of) output, not containing a pygments-highlighted block */
background: var(--mystnb-stdout-bg-color);
border: 1px solid var(--mystnb-stdout-border-color);
}
Expand Down
⚡