Merge branch 'dark_theme' into 'develop'

Dark theme

See merge request smilei/smilei!135

doc/Sphinx/Overview/highlights.rst

@@ -88,7 +88,7 @@ Following is a comparison of the accelerated electron spectra at the end of thes
 In the green line it is shown the result of the previously known averaged ionization model. Without the longitudinal
 momentum initialization, few electrons obtained through ionization are trapped and accelerated in the plasma wave.
 The red line shows the result with the new averaged ionization model implemented in :program:`Smilei`, which accurately reproduces 
-the spectrum obtained with the simulation without an envelope model (blue line). 
+the spectrum obtained with the *standard laser* simulation without an envelope model. 
 
 
 The envelope simulation required an amount of computing resources orders of magnitude smaller than those required by the simulation without a 
@@ -145,7 +145,7 @@ an amount of resources greater by at least an order of magnitude.
 
 The laser (in red) propagates through a low density plasma and drives a nonlinear Langmuir wave (in blue) that 
 propagates at a velocity close to that of light in its wake. In this simulation, a moving window is used 
-so we can follow the laser as it propagates through the plasma. We see electrons (in white) being self-injected 
+so we can follow the laser as it propagates through the plasma. We see electrons being self-injected 
 in this wakefield where they see a strong electric field that accelerates them up to ultra-relativistic (GeV) energy level.
 
 An animation generated from the simulation data can be found `here <https://www.youtube.com/watch?v=-LX_yT29nAU>`_ 
@@ -230,7 +230,7 @@ shows how this balancing reduces the time of the simulation.
     :align: center
 
 The red curve is the best situation obtained in the previous section, while
-the black curve corresponds to the DLB algorithm enabled.
+the curves with dynamic load balancing are indicated as *DLB*.
 
 The portion of the box belonging to each MPI process varies when the load balancing
 occurs. The following figure shows how each of these portions evolve with time.
@@ -239,7 +239,7 @@ occurs. The following figure shows how each of these portions evolve with time.
 
 The four panels correspond to four timesteps during the simulation.
 The colorscale represents the log-scaled load of each patch.
-The black lines show the borders of each MPI process' portion of the box.
+The lines show the borders of each MPI process' portion of the box.
 The MPI processes that are close to the hotspot tend to handle a smaller portion
 of the box.
 
@@ -266,7 +266,7 @@ with a total of :math:`\sim 1.4` billion quasi-particles in the box.
 The following figure (top panel) shows half of the simulation box in the
 y-direction, and the laser field is reported at three different times.
 The reflected laser pulse (at time :math:`t_2`) shows a different spectral content than
-the incident pulse (at time :math:`t_0`). The plasma electron density is shown in black.
+the incident pulse (at time :math:`t_0`).
 A close-up view of the interaction region is given in the bottom panel, illustrating
 the electron bunches being pulled out from the plasma surface.
 
@@ -317,8 +317,8 @@ A 2-dimensional simulation, in conditions close to actual experiments, ran
 on a box size of 1024 µm x 512 µm for  10 ps
 with 25 billion quasi-particles. The following figure shows the evolution
 of the pump and seed intensities in the head-on collision at three different times.
-The blue-yellow maps correspond to the plasma density while the white-red maps
-correspond to the lasers intensity.
+Surfaces corresponding to the laser intensity are overlaid on top of surfaces
+corresponding to the plasma density.
 
 .. image:: /_static/pump_seed.jpg
     :align: center

doc/Sphinx/Overview/releases.rst

@@ -32,6 +32,10 @@ Changes made in the repository (not released)
   * Changed coordinate reference for 2D probe in 3D or AM geometry
     (zero is the box origin projected orthogonally on the probe plane).
 
+* Documentation:
+
+  * Dark theme (click the switch on the bottom left, or set browser preferences).
+
 * Bug fixes:
 
   * ``dump_minutes`` often failed to write some checkpoint files.

doc/Sphinx/conf.py

@@ -146,7 +146,7 @@
 
 # The name of an image file (relative to this directory) to place at the top
 # of the sidebar.
-html_logo = "../logo/smileiLogo.svg"
+html_logo = "_static/smileiLogo.svg"
 
 # The name of an image file (within the static path) to use as favicon of the
 # docs.  This file should be a Windows icon file (.ico) being 16x16 or 32x32

doc/Sphinx/smilei_theme/layout.html

@@ -65,7 +65,7 @@
             {%- if entry == title %}
         </ul>
                 {{ toc }}
-        <ul>
+        <ul id="smallScreenMenuAfterTOC">
             {%- else %}
             <li class="outer">
                 <a href="{{ url }}">{{ entry }}</a>
@@ -162,16 +162,15 @@
               <g transform="translate(0,-932.36216)" >
                 <circle
                    r="25" cy="977.51044" cx="38.078663"
-                   style="opacity:1;fill:none;stroke:#ffffff;stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+                   style="opacity:1;fill:none;stroke:#ffffff;stroke:var(--header_text);stroke-width:10;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
                 <rect
                    transform="matrix(0.36717877,0.93015039,-0.93427297,0.35655858,0,0)"
-                   rx="4.9996676" ry="7.4995141"
-                   y="316.16959" x="947.6142"
+                   rx="4.9996676" ry="7.4995141" x="947.6142" y="316.16959"
                    height="14.117695" width="46.476151"
-                   style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;" />
+                   style="opacity:1;fill:#ffffff;fill:var(--header_text);fill-opacity:1;stroke:none;" />
                 <path
                    d="m 41.383282,962.25996 a 15,15 0 0 1 11.660107,11.6355"
-                   style="opacity:1;fill:none;stroke:#ffffff;stroke-width:3;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
+                   style="opacity:1;fill:none;stroke:#ffffff;stroke:var(--header_text);stroke-width:3;stroke-linecap:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
               </g>
             </svg>
         </div>
@@ -180,21 +179,18 @@
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 80 120">
               <g
-                 transform="translate(0,-932.36216)">
-                <path
-                   d="m 10,962.36216 60,60.00004"
-                   style="fill:none;stroke:#ffffff;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
-                <path
-                   d="M 70,962.36216 10,1022.3622"
-                   style="fill:none;stroke:#ffffff;stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none" />
+                 transform="translate(0,-932.36216)"
+                 style="fill:none;stroke:#ffffff;stroke:var(--header_text);stroke-width:10;stroke-linecap:round;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none">
+                <path d="m 10,962.36216 60,60.00004" />
+                <path d="M 70,962.36216 10,1022.3622" />
               </g>
             </svg>
         </div>
 
-        <div id="smallScreenMenuButton" onclick="toggleSmallScreenMenu(event)">
+        <div id="smallScreenMenuButton" onclick="event.preventDefault(); toggleSmallScreenMenu(event)">
             <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
                viewBox="-20 -20 140 140">
-              <g  style="fill:#ffffff;stroke:none;">
+              <g  style="fill:#ffffff; fill:var(--header_text);stroke:none;">
                 <circle cx="15" cy="20" r="5" />
                 <circle cx="35" cy="20" r="5" />
                 <circle cx="85" cy="20" r="5" />
@@ -226,6 +222,9 @@
 
 {%- block footer %}
     <div class="footer">
+      <div>
+        <input type="button" id="themebutton"  value="" onclick="switchTheme('')" />
+      </div>
       <div>
       <a href="site.html">Site index</a>
       </div>
@@ -261,6 +260,30 @@
         for( var i=0; i<menus.length; i++ )
             menus[i].active = false;
 
+        // Manage theme
+        var theme="light";
+        function switchTheme(type) {
+            if( type == "dark" || ( ! type && theme == "light" ) ) {
+                theme = "dark";
+                document.documentElement.setAttribute('theme', 'dark');
+                window.name = "dark_theme"
+                localStorage.setItem("_theme","dark")
+            } else {
+                theme = "light";
+                document.documentElement.setAttribute('theme', 'light');
+                window.name = "light_theme"
+                localStorage.setItem("_theme","light")
+            }
+        }
+        if( window.name && window.name == "light_theme" ) {
+            switchTheme("light");
+        } else if ( window.name && window.name == "dark_theme" ) {
+            switchTheme("dark");
+        } else if( stored_theme = localStorage.getItem("_theme") ) {
+            switchTheme(stored_theme);
+        } else if( window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+            switchTheme("dark");
+        }
 
         var ul = nav_list.getElementsByTagName("ul")[0], li;
         var keep_nav = false;
@@ -295,7 +318,6 @@
         }
 
         function toggleSmallScreenMenu(e) {
-            e.preventDefault();
             if( smallScreenMenu.className != "on" ) {
                 smallScreenMenu.className = "on";
                 smallScreenMenuButton.className = "pushed";
@@ -307,6 +329,16 @@
             }
         }
 
+        if (smallScreenMenuAfterTOC = document.getElementById("smallScreenMenuAfterTOC")) {
+            var smallScreenMenuTOC = smallScreenMenuAfterTOC.previousElementSibling
+                .getElementsByTagName("li")[0].getElementsByTagName("ul")[0].getElementsByTagName("li");
+            for (var i = 0; i < smallScreenMenuTOC.length; i++) {
+                if (smallScreenMenuTOC[i].tagName = "a") {
+                    smallScreenMenuTOC[i].addEventListener("click", function(event){ toggleSmallScreenMenu(event); } );
+                }
+            }
+        }
+
         function prepareMenu(menu_id) {
             var menu = document.getElementById(menu_id);
             menu.timer1 = setTimeout(function(a){ return function(){thisMenuOnly(a)};}(menu_id), 100);