Skip to content
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

Jump to bottom

Force light mode for notebook outputs #1812

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Force light mode for notebook outputs #1812

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 0 additions & 11 deletions src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,3 @@
0 0.2rem 0.5rem var(--pst-color-shadow),
0 0 0.0625rem var(--pst-color-shadow) !important;
}

/**
* Set background of some cell outputs to white-ish to make sure colors work
* This is because many libraries make output that only looks good on white
*/
@mixin cell-output-background {
color: var(--pst-color-on-background);
background-color: var(--pst-color-text-base);
border-radius: 0.25rem;
padding: 0.5rem;
}
56 changes: 37 additions & 19 deletions src/pydata_sphinx_theme/assets/styles/extensions/_notebooks.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,56 @@
* In the future, we might add dark theme support for specific packages.
*/

/*******************************************************************************
* nbsphinx
*/
html div.rendered_html,
// NBsphinx ipywidgets output selector
html .jp-RenderedHTMLCommon {
table {
table-layout: auto;
// For both nbsphinx and MyST-NB, force light mode because many notebook outputs
// do not support dark mode.

.bd-content {
// nbsphinx
.nboutput,
// MyST-NB
.cell_output {
@include theme-colors("light");
@include sd-colors-for-mode("light");
color-scheme: light;
color: var(--pst-color-text-base);
}
}

// Dark theme special-cases
html[data-theme="dark"] .bd-content {
@mixin cell-output-background {
background-color: var(--pst-color-background);
border-radius: 0.25rem;
padding: 0.5rem;
}

.nboutput {
.output_area.rendered_html {
.output_area {
@include cell-output-background;
}

.output_area.stderr {
background-color: var(--pst-color-danger);
}
}

div.cell_output {
img,
.text_html {
@include cell-output-background;
}
}
}

/*******************************************************************************
* nbsphinx
*/
html div.rendered_html,
// NBsphinx ipywidgets output selector
html .jp-RenderedHTMLCommon {
table {
table-layout: auto;
}
}

// Add extra padding to the final item in an nbsphinx container
Expand All @@ -44,16 +72,6 @@ div.cell_output .output {
overflow-x: auto;
}

// Dark theme special-cases
html[data-theme="dark"] .bd-content {
div.cell_output {
img,
.text_html {
@include cell-output-background;
}
}
}

// Prevent tables from scrunching together
.bd-content {
div.cell_input {
Expand Down
54 changes: 29 additions & 25 deletions src/pydata_sphinx_theme/assets/styles/extensions/_sphinx_design.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,38 +78,42 @@ $all-colors: map-merge($pst-semantic-colors, $extra-semantic-colors);
--sd-color-#{$name}-highlight: var(--pst-color-#{$name}-highlight);
}

// Now we override the --sd-color-* variables.
@each $mode in (light, dark) {
html[data-theme="#{$mode}"] {
// check if this color is defined differently for light/dark
@each $name in $sd-semantic-color-names {
$definition: map-get($all-colors, $name);
@if type-of($definition) == map {
@each $key, $value in $definition {
@if str-index($key, $mode) != null {
// since now we define the bg colours in the semantic colours and not
// by changing opacity, we need to check if the key contains bg and the
// correct mode (light/dark)
@if str-index($key, "bg") != null {
--sd-color-#{$name}-bg: #{$value};
// create local variable
$bg-var: --sd-color-#{$name}-bg;
$value: check-color($value);
--sd-color-#{$name}-bg-text: #{a11y-combination($value)};
} @else {
$value: check-color($value);
@include create-sd-colors($value, $name);
}
@mixin sd-colors-for-mode($mode) {
// check if this color is defined differently for light/dark
@each $name in $sd-semantic-color-names {
$definition: map-get($all-colors, $name);
@if type-of($definition) == map {
@each $key, $value in $definition {
@if str-index($key, $mode) != null {
// since now we define the bg colours in the semantic colours and not
// by changing opacity, we need to check if the key contains bg and the
// correct mode (light/dark)
@if str-index($key, "bg") != null {
--sd-color-#{$name}-bg: #{$value};
// create local variable
$bg-var: --sd-color-#{$name}-bg;
$value: check-color($value);
--sd-color-#{$name}-bg-text: #{a11y-combination($value)};
} @else {
$value: check-color($value);
@include create-sd-colors($value, $name);
}
}
} @else {
$value: map-get($all-colors, $name);
@include create-sd-colors($value, $name);
}
} @else {
$value: map-get($all-colors, $name);
@include create-sd-colors($value, $name);
}
}
}

// Now we override the --sd-color-* variables.
@each $mode in (light, dark) {
html[data-theme="#{$mode}"] {
@include sd-colors-for-mode($mode);
}
}

// Make sure the color border variables are set using our variables
@each $mode in (light, dark) {
html[data-theme="#{$mode}"] {
Expand Down