From 58975874e91a8fd19ac0ecad52f7c9b933383827 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Tue, 6 Sep 2022 10:28:39 +0200 Subject: [PATCH 1/5] add some documentation --- docs/user_guide/light-dark.rst | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/docs/user_guide/light-dark.rst b/docs/user_guide/light-dark.rst index 992a8bb3b..b93aa01db 100644 --- a/docs/user_guide/light-dark.rst +++ b/docs/user_guide/light-dark.rst @@ -100,6 +100,29 @@ Change the theme and a new image should be displayed. .. image:: https://source.unsplash.com/200x200/daily?cute+dog :class: only-light +Use non theme-dependent content +-------------------------------- + +by design Pydata-sphinx-theme will add a white background to any image that is not specifying the :code:`only-dark` class when displayed in the dark theme. If your image is suitable for both light and dark theme, please use the following **CSS helper class** :code:`dark-light` to make your image theme agnostic. + +the image without speicfying the helper class: + +.. code-block:: rst + + .. image:: https://source.unsplash.com/200x200/daily?cute+cat + +.. image:: https://source.unsplash.com/200x200/daily?cute+cat + +and the same image with it: + +.. code-block:: rst + + .. image:: https://source.unsplash.com/200x200/daily?cute+cat + :class: dark-light + +.. image:: https://source.unsplash.com/200x200/daily?cute+cat + :class: dark-light + Define custom JavaScript to react to theme changes -------------------------------------------------- From 92670a4e138541b825750f7c57e1d6a83bac9293 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Tue, 6 Sep 2022 10:32:04 +0200 Subject: [PATCH 2/5] add a class selector --- src/pydata_sphinx_theme/assets/styles/variables/_color.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss index 4de6d7757..d2a8654a0 100644 --- a/src/pydata_sphinx_theme/assets/styles/variables/_color.scss +++ b/src/pydata_sphinx_theme/assets/styles/variables/_color.scss @@ -108,10 +108,10 @@ $pst-semantic-colors: ( filter: brightness(0.8) contrast(1.2); } /* Give images a light background in dark mode in case they have - * transparency and black text (unless they have class .only-dark, in + * transparency and black text (unless they have class .only-dark or .dark-light, in * which case assume they're already optimized for dark mode). */ - .bd-content img:not(.only-dark) { + .bd-content img:not(.only-dark):not(.dark-light) { background: rgb(255, 255, 255); border-radius: 0.25rem; } From ad129740a7c018a388361a88b6eace019661df97 Mon Sep 17 00:00:00 2001 From: 12rambau Date: Tue, 6 Sep 2022 10:45:28 +0200 Subject: [PATCH 3/5] set padding to show the background --- docs/user_guide/light-dark.rst | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/user_guide/light-dark.rst b/docs/user_guide/light-dark.rst index b93aa01db..387e333ee 100644 --- a/docs/user_guide/light-dark.rst +++ b/docs/user_guide/light-dark.rst @@ -110,18 +110,20 @@ the image without speicfying the helper class: .. code-block:: rst .. image:: https://source.unsplash.com/200x200/daily?cute+cat + :class: p-2 .. image:: https://source.unsplash.com/200x200/daily?cute+cat + :class: p-2 and the same image with it: .. code-block:: rst .. image:: https://source.unsplash.com/200x200/daily?cute+cat - :class: dark-light + :class: dark-light p-2 .. image:: https://source.unsplash.com/200x200/daily?cute+cat - :class: dark-light + :class: dark-light p-2 Define custom JavaScript to react to theme changes -------------------------------------------------- From 4ea142de107a7d7eaf0b953740e3fc509adc568b Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 7 Sep 2022 10:08:47 +0200 Subject: [PATCH 4/5] Update documentation --- docs/user_guide/light-dark.rst | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/user_guide/light-dark.rst b/docs/user_guide/light-dark.rst index 387e333ee..b80df93ef 100644 --- a/docs/user_guide/light-dark.rst +++ b/docs/user_guide/light-dark.rst @@ -71,8 +71,8 @@ For example to define a different background color for both the light and dark t A complete list of the colors used in this theme can be found in the :doc:`CSS style section `. -Use theme-dependent content ---------------------------- +Theme-dependent images and content +---------------------------------- It is possible to use different content for light and dark mode, so that the content only shows up when a particular theme is active. This is useful if your content depends on the theme's style, such as a PNG image with a light or a dark background. @@ -100,12 +100,14 @@ Change the theme and a new image should be displayed. .. image:: https://source.unsplash.com/200x200/daily?cute+dog :class: only-light -Use non theme-dependent content --------------------------------- +Images and content that work in both themes +------------------------------------------- -by design Pydata-sphinx-theme will add a white background to any image that is not specifying the :code:`only-dark` class when displayed in the dark theme. If your image is suitable for both light and dark theme, please use the following **CSS helper class** :code:`dark-light` to make your image theme agnostic. +For images without the :code:`only-dark` class, when the **dark theme** is activated, a white background will automatically be added to ensure the image contents are visible. +If your image is suitable for both light and dark theme, add the CSS class :code:`dark-light` to make your image theme-agnostic. -the image without speicfying the helper class: +For example, here's an image without adding this helper class. +Change to the dark theme and a grey background will be present. .. code-block:: rst @@ -115,7 +117,7 @@ the image without speicfying the helper class: .. image:: https://source.unsplash.com/200x200/daily?cute+cat :class: p-2 -and the same image with it: +Here's the same image with this class added: .. code-block:: rst From 2c7d6d8ae2732927a9c45d50e46148ee27c07a76 Mon Sep 17 00:00:00 2001 From: Chris Holdgraf Date: Wed, 7 Sep 2022 01:10:28 -0700 Subject: [PATCH 5/5] Update docs/user_guide/light-dark.rst --- docs/user_guide/light-dark.rst | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user_guide/light-dark.rst b/docs/user_guide/light-dark.rst index b80df93ef..6d7275503 100644 --- a/docs/user_guide/light-dark.rst +++ b/docs/user_guide/light-dark.rst @@ -71,7 +71,7 @@ For example to define a different background color for both the light and dark t A complete list of the colors used in this theme can be found in the :doc:`CSS style section `. -Theme-dependent images and content +Theme-dependent images and content ---------------------------------- It is possible to use different content for light and dark mode, so that the content only shows up when a particular theme is active.