DOC: improve (dark) theme getting started tutorials (#52097)

Author: stijnvanhoey

doc/source/_static/css/getting_started.css

@@ -10,6 +10,14 @@
   font-size: 0.9rem;
 }
 
+.gs-data-header {
+  background-color: var(--pst-color-on-surface);
+}
+
+.gs-data-list {
+  background-color: var(--pst-color-on-background);
+}
+
 .gs-data-title .badge {
   margin: 10px;
   padding: 5px;
@@ -57,45 +65,33 @@
   margin-top: -5px;
 }
 .gs-callout-remember {
-  border-left-color: #f0ad4e;
+  border-left-color: var(--pst-color-secondary);
   align-items: center;
   font-size: 1.2rem;
 }
 .gs-callout-remember h4 {
-  color: #f0ad4e;
+  color:  var(--pst-color-secondary);
 }
 
 /* reference to user guide */
 .gs-torefguide {
   align-items: center;
   font-size: 0.9rem;
+  background-color: var(--pst-color-on-background);
+  border-radius: .25rem;
+  padding: 2px;
 }
 
 .gs-torefguide .badge {
-  background-color: #130654;
-  margin: 10px 10px 10px 0px;
+  background-color: var(--pst-color-primary);
+  margin: 10px 10px 10px 10px;
   padding: 5px;
 }
 
-.gs-torefguide a {
-  margin-left: 5px;
-  color: #130654;
-  border-bottom: 1px solid #FFCA00f3;
-  box-shadow: 0px -10px 0px #FFCA00f3 inset;
-}
-
 .gs-torefguide p {
   margin-top: 1rem;
 }
 
-.gs-torefguide a:hover {
-  margin-left: 5px;
-  color: grey;
-  text-decoration: none;
-  border-bottom: 1px solid #b2ff80f3;
-  box-shadow: 0px -10px 0px #b2ff80f3 inset;
-}
-
 /* question-task environment */
 
 ul.task-bullet, ol.custom-bullet{
@@ -113,14 +109,14 @@ ul.task-bullet > li:before {
     margin-left:-2em;
     background-position:center;
     background-repeat:no-repeat;
-    background-color: #130654;
+    background-color: var(--pst-color-primary);
     border-radius: 50%;
     background-size:100%;
     background-image:url('../question_mark_noback.svg');
   }
 
 ul.task-bullet > li {
-  border-left: 1px solid #130654;
+  border-left: 1px solid var(--pst-color-primary);
   padding-left:1em;
 }
 
@@ -132,7 +128,7 @@ ul.task-bullet > li > p:first-child {
 /* Getting started index page */
 
 .comparison-card {
-  background:#FFF;
+  background-color: var(--pst-color-background);
   border-radius:0;
   padding: 30px 10px 10px 10px;
   margin: 10px 0px;
@@ -146,6 +142,7 @@ ul.task-bullet > li > p:first-child {
   margin: 10px;
   margin-bottom: 20px;
   height: 72px;
+  background: none !important;
 }
 
 .comparison-card-excel .card-img-top, .comparison-card-stata .card-img-top, .comparison-card-sas .card-img-top {
@@ -154,7 +151,7 @@ ul.task-bullet > li > p:first-child {
 
 .comparison-card .card-footer {
   border: none;
-  background-color: transparent;
+  background-color: var(--pst-color-background);
 }
 
 .install-block {
@@ -236,15 +233,16 @@ ul.task-bullet > li > p:first-child {
 
 .tutorial-card .card-header {
   cursor: pointer;
-  background-color: transparent;
+  background-color: var(--pst-color-surface);
+  border: 1px solid var(--pst-color-border)
 }
 
 .tutorial-card .card-body {
-  background-color: transparent;
+  background-color: var(--pst-color-on-background);
 }
 
 .tutorial-card .badge {
-  background-color: #130654;
+  background-color: var(--pst-color-primary);
   margin: 10px 10px 10px 10px;
   padding: 5px;
 }
@@ -253,8 +251,9 @@ ul.task-bullet > li > p:first-child {
   margin: 0px;
 }
 
+
 .tutorial-card .gs-badge-link a {
-  color: white;
+  color: var(--pst-color-text-base);
   text-decoration: none;
 }
 

doc/source/_static/css/pandas.css

@@ -25,6 +25,7 @@ table {
 .intro-card .card-img-top {
   margin: 10px;
   height: 52px;
+  background: none !important;
 }
 
 .intro-card .card-header {
@@ -48,5 +49,5 @@ table {
 }
 
 .card, .card img {
-  background-color: transparent !important;
+  background-color: var(--pst-color-background);
 }

doc/source/getting_started/index.rst

@@ -537,6 +537,7 @@ Are you familiar with other software for manipulating tabular data? Learn
 the pandas-equivalent operations compared to software you already know:
 
 .. panels::
+    :img-top-cls: dark-light
     :card: + comparison-card text-center shadow
     :column: col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex
 

doc/source/getting_started/intro_tutorials/02_read_write.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 
@@ -198,7 +198,7 @@ The method :meth:`~DataFrame.info` provides technical information about a
 
 .. raw:: html
 
-    <div class="d-flex flex-row bg-light gs-torefguide">
+    <div class="d-flex flex-row gs-torefguide">
         <span class="badge badge-info">To user guide</span>
 
 For a complete overview of the input and output possibilities from and to pandas, see the user guide section about :ref:`reader and writer functions <io>`.

doc/source/getting_started/intro_tutorials/03_subset_data.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 

doc/source/getting_started/intro_tutorials/04_plotting.rst

@@ -16,13 +16,13 @@ How do I create plots in pandas?
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/air_quality_no2.rst
 

doc/source/getting_started/intro_tutorials/05_add_columns.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/air_quality_no2.rst
 

doc/source/getting_started/intro_tutorials/06_calculate_statistics.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 

doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
 
 .. include:: includes/titanic.rst
 
@@ -27,7 +27,7 @@
 .. raw:: html
 
         </li>
-        <li class="list-group-item">
+        <li class="list-group-item gs-data-list">
             <div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
                 <span class="badge badge-dark">Air quality data</span>
             </div>

doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst

@@ -9,13 +9,13 @@
 .. raw:: html
 
     <div class="card gs-data">
-        <div class="card-header">
+        <div class="card-header gs-data-header">
             <div class="gs-data-title">
                 Data used for this tutorial:
             </div>
         </div>
         <ul class="list-group list-group-flush">
-            <li class="list-group-item">
+            <li class="list-group-item gs-data-list">
                 <div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
                     <span class="badge badge-dark">Air quality Nitrate data</span>
                 </div>
@@ -49,7 +49,7 @@ Westminster* in respectively Paris, Antwerp and London.
 .. raw:: html
 
         </li>
-        <li class="list-group-item">
+        <li class="list-group-item gs-data-list">
             <div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
                 <span class="badge badge-dark">Air quality Particulate matter data</span>
             </div>