Implement dark mode on install, papers, logos and page.eml (-carbon footprint -privacy -code of conduct pages)

src/ocamlorg_frontend/css/partials/tags.css

@@ -1,3 +1,3 @@
 .tag {
-  @apply text-blue-500 h-8 inline-flex items-center text-sm px-3 border border-blue-500 rounded-3xl mr-2 mb-2 whitespace-nowrap;
+  @apply text-primary dark:text-dark-primary h-8 inline-flex items-center text-sm px-3 border border-primary dark:border-dark-primary bg-primary_25 dark:bg-dark-primary_20 rounded-md mr-2 mb-2 whitespace-nowrap;
 }

src/ocamlorg_frontend/css/styles.css

@@ -136,6 +136,11 @@ body {
   padding: 0.2rem 0rem;
 }
 
+.dark :is(h1:target, h2:target, h3:target, h4:target, h5:target, h6:target) {
+  background:#003357;
+  padding: 0.2rem 0rem;
+}
+
 .prose :is(h1, h2, h3, h4, h5, h6)[id]:hover::before {
   content: " ";
   @apply absolute top-0 h-full border-l-4 border-gray-400 -ml-3;

src/ocamlorg_frontend/pages/install.eml

@@ -6,17 +6,24 @@ Layout.render
 ~canonical:"" @@
 <div class="lg:py-8 py-6">
   <div class="container-fluid" x-data='{ operating_system: detect_os () }'>
-    <div class="prose mb-6">
-      <h1 class="sr-only">
+    <div class="prose dark:prose-invert mb-6">
+      <h1 class="sr-only ">
         Install OCaml
       </h1>
-      <div class="flex gap-2">
+      <div class="hidden lg:flex gap-2">
         <button class="btn flex gap-2" :class='operating_system == "linux_mac_bsd"? "": "btn-ghost"' @click="operating_system = 'linux_mac_bsd'"> Linux, macOS or *BSD</button>
         <button class="btn flex gap-2" :class='operating_system == "win"? "": "btn-ghost"' @click="operating_system = 'win'"><%s! Icons.microsoft_windows "w-6 h-6" %> Windows</button>
       </div>
+      <div class="w-full flex md:hidden">
+% let render_multi_button ~title ~active_tab ~class_ =
+      <button x-on:click='operating_system = "<%s active_tab %>"' class="flex flex-auto justify-center py-4 text-sm border <%s class_ %>" :class='operating_system === "<%s active_tab %>" ? "bg-primary dark:bg-dark-primary text-white dark:text-dark-title border-primary dark:border-dark-primary" : "text-content dark:text-dark-separator_30 border-card_border dark:border-dark-separator_30"'><%s title %></button>
+% in
+        <% render_multi_button ~title:"Linux, macOS or *BSD" ~active_tab:"linux_mac_bsd" ~class_:"rounded-l rounded-l-lg border-r-0"; %>
+        <% render_multi_button ~title:"Windows" ~active_tab:"win" ~class_:"rounded-r rounded-r-lg"; %>
+      </div>
     </div>
 
-    <div class="prose my-6">
+    <div class="prose dark:prose-invert my-6">
       <p>If you need more explicit instructions than provided on this quick-install page, you can find
         <a href="<%s Url.installing_ocaml %>">a more detailed explanation of the installation process here</a>.
       </p>
@@ -25,7 +32,7 @@ Layout.render
     <div
       class="grid gap-6 xl:grid-cols-2 xl:gap-16"
       x-show="(operating_system == 'linux_mac_bsd')">
-      <div class="prose">
+      <div class="prose dark:prose-invert">
         <h2>
           Install OCaml on Linux, macOS, or *BSD
         </h2>
@@ -89,7 +96,7 @@ Layout.render
         <p>Congratulations, you have now installed OCaml!</p>
       </div>
       <div>
-        <div class="prose">
+        <div class="prose dark:prose-invert">
           <h2>Set Up an OCaml Development Environment</h2>
 
           <p>
@@ -107,7 +114,7 @@ Layout.render
     </div>
 
     <div x-show="operating_system == 'win'">
-      <div class="prose">
+      <div class="prose dark:prose-invert">
         <h2>
           Install OCaml on Windows
         </h2>

src/ocamlorg_frontend/pages/logos.eml

@@ -3,21 +3,21 @@ Layout.render
 ~title:"OCaml Logos"
 ~description:"Here are some of the logos related to the OCaml programming language."
 ~canonical:Url.about @@
-<div class="intro-section-simple">
+<div class="intro-section-simple dark:dark-intro-section-simple">
   <div class="container-fluid">
-    <div class="text-center w-full lg:w-2/3 m-auto">
-      <h1 class="font-bold mb-6">The OCaml Logo</h1>
-      <p><a href="#guidelines">Brand Guidelines</a> |  <a href="#assets">Assets</a> | <a href="#license">License</a> </p>
+    <div class="w-full m-auto">
+      <h1 class="text-title dark:text-dark-title font-bold mb-2">The OCaml Logo</h1>
+      <p class="text-content dark:text-dark-content text-xl lg:max-w-[80%]"><a href="#guidelines">Brand Guidelines</a> |  <a href="#assets">Assets</a> | <a href="#license">License</a> </p>
       <div class="flex items-center justify-center space-x-8 mt-11 lg:space-x-24">
       </div>
     </div>
   </div>
 </div>
 
-<div class="bg-legacy-default dark:bg-legacy-dark-default">
+<div class="bg-white dark:bg-dark-background">
  <div class="py-4 lg:py-10">
     <div class="container-fluid">
-      <div class="prose lg:prose-lg mx-auto max-w-5xl">
+      <div class="prose dark:prose-invert lg:prose-lg mx-auto max-w-5xl">
         <div class="space-y-7">
 
           <h2 id="guidelines">Brand Guidelines</h2>
@@ -29,14 +29,16 @@ Layout.render
           <p>The logo should be linked to the OCaml website, <a href='https://ocaml.org/'>ocaml.org</a>. The logo is available in <a href='https://github.com/ocaml/ocaml-logo/tree/master/Colour'>several formats</a> and <a href='https://github.com/ocaml/ocaml-logo'>colors</a> (e.g. adapt the <code>width</code> or change the part after <code>logo/</code> to match the one of the file you want in the <a href='https://github.com/ocaml/ocaml-logo'>repository</a>).</p>
 
           <div class="mx-12 my-12">
-            <img class="h-24 max-width-100 p-4" src="<%s Ocamlorg_static.Asset.url "logo-with-name.svg" %>" alt="logo-with-name">
+            <img class="h-24 max-width-100 p-4 dark:hidden" src="<%s Ocamlorg_static.Asset.url "logo-with-name.svg" %>" alt="logo-with-name">
+            <img class="h-24 max-width-100 p-4 hidden dark:inline" src="<%s Ocamlorg_static.Asset.url "logo-with-name-white.svg" %>" alt="OCaml">
               </div>
                <p class="text-black"><a href="https://github.com/ocaml/ocaml-logo/blob/master/Colour/SVG/colour-logo.svg">svg</a> | <a href="https://github.com/ocaml/ocaml-logo/blob/master/Colour/PNG/colour-logo.png">png</a> | <a href="https://github.com/ocaml/ocaml-logo/blob/master/Colour/JPEG/colour-logo.jpg">jpg</a> | <a href="https://github.com/ocaml/ocaml-logo">more</a></p>
 
               <p>The following <a href='<%s Ocamlorg_static.Asset.url "policies/logos/OCaml_Sticker.svg" %>'>SVG file</a> is suitable to make stickers. It is released under the same <a href='https://github.com/ocaml/ocaml.org/blob/main/LICENSE'>liberal license</a> as the logo so do not hesitate to print your own stickers to promote OCaml!</p>
 
               <div class="mx-12 my-12">
-                <img class="h-32 max-width-100 p-4" src="<%s Ocamlorg_static.Asset.url "policies/logos/OCaml_Sticker.svg" %>" alt="logo">
+                <img class="h-32 max-width-100 p-4 dark:hidden" src="<%s Ocamlorg_static.Asset.url "policies/logos/OCaml_Sticker.svg" %>" alt="logo">
+                <img class="h-32 max-width-100 p-4 hidden dark:inline" src="<%s Ocamlorg_static.Asset.url "policies/logos/OCaml_Sticker_darkmode.svg" %>" alt="OCaml">
               </div>
 
               <p class="text-black"><a href="https://github.com/ocaml/ocaml.org/blob/main/asset/policies/logos/OCaml_Sticker.svg">svg</a> |</p>

src/ocamlorg_frontend/pages/page.eml

@@ -1,17 +1,17 @@
 let render ~title ~description ~meta_title ~meta_description ~content ~canonical =
 Layout.render ~title:meta_title ~description:meta_description ~canonical @@
-<div class="intro-section-simple">
+<div class="intro-section-simple dark:dark-intro-section-simple">
   <div class="container-fluid">
-    <div class="text-center w-full lg:w-2/3 m-auto">
-      <h1 class="font-bold mb-6"><%s! title %></h1>
-      <p><%s! description %></p>
+    <div class="w-full m-auto">
+      <h1 class="font-bold mb-2 text-title dark:text-dark-title"><%s! title %></h1>
+      <p class="text-content dark:text-dark-content"><%s! description %></p>
     </div>
   </div>
 </div>
-<div class="bg-legacy-default dark:bg-legacy-dark-default">
-  <div class="py-10 lg:py-28">
+<div class="bg-white dark:bg-dark-background">
+  <div class="py-5 lg:py-14">
     <div class="container-fluid">
-      <div class="prose prose-orange lg:prose-lg mx-auto max-w-5xl">
+      <div class="prose dark:prose-invert prose-orange lg:prose-lg mx-auto max-w-5xl">
         <%s! content %>
       </div>
     </div>