From d144c01b6759d35d5652aba41d935b4c04b5dc07 Mon Sep 17 00:00:00 2001
From: oyenuga17 <64274826+oyenuga17@users.noreply.github.com>
Date: Mon, 12 Feb 2024 12:01:15 +0100
Subject: [PATCH] Implement dark mode on install, papers, logos and page.eml
 (-carbon footprint -privacy -code of conduct pages) (#2032)

* implement dark mode and redesign on papers

* implement darkmode on logos and page.eml
(-carbon footprint,
-privacy
-code of conduct pages)

* adjust styles

* implement dark mode on install Ocaml

* corrections

* more correction

* update tag background color dark mode

---------

Co-authored-by: sabine <sabine@users.noreply.github.com>
---
 .../policies/logos/OCaml_Sticker_darkmode.svg | 116 ++++++++++++++++++
 src/ocamlorg_frontend/css/partials/tags.css   |   2 +-
 src/ocamlorg_frontend/css/styles.css          |   5 +
 src/ocamlorg_frontend/pages/install.eml       |  21 ++--
 src/ocamlorg_frontend/pages/logos.eml         |  18 +--
 src/ocamlorg_frontend/pages/page.eml          |  14 +--
 src/ocamlorg_frontend/pages/papers.eml        |  52 ++++----
 tailwind.config.js                            |   1 +
 8 files changed, 181 insertions(+), 48 deletions(-)
 create mode 100644 asset/policies/logos/OCaml_Sticker_darkmode.svg

diff --git a/asset/policies/logos/OCaml_Sticker_darkmode.svg b/asset/policies/logos/OCaml_Sticker_darkmode.svg
new file mode 100644
index 0000000000..98d3dc20f2
--- /dev/null
+++ b/asset/policies/logos/OCaml_Sticker_darkmode.svg
@@ -0,0 +1,116 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 20.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+     width="100px" height="100px" viewBox="0 0 150 150" style="enable-background:new 0 0 141.7 141.7;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#E0E0E0;}
+	.st2{fill:url(#SVGID_1_);}
+	.st3{fill:url(#SVGID_2_);}
+	.st4{fill:url(#SVGID_3_);}
+	.st5{fill:url(#SVGID_4_);}
+	.st6{font-family:'MyriadPro-Regular';}
+	.st7{font-size:12px;}
+</style>
+<g>
+	<path class="st0" d="M73.9,89.8c-0.2-1.2,0.2-2.4-0.2-3.6c-0.3-1-1-1.1-1.5-1.9c-1.3-2.1-2.5-4.9-2.7-7.5c-0.1-2.3-1-4.5-1.1-6.8
+		c-0.1-1.1,0.1-2.3,0-3.4c0-0.5-0.1-1-0.2-1.6c0-0.1-0.1-0.7-0.2-1l0.3-0.7c-0.1-0.2,2.5-0.2,3.3-0.2c1.3,0,2.6,0.1,3.9,0.1
+		c2.7,0.1,5.2,0.1,7.8-0.3c5.9-0.9,8.6-3.3,9.9-4.3c5.4-3.9,7.8-10.2,7.8-10.2c0.9-2,0.9-5.5,2.8-7.1c2.2-1.9,6-1.7,8.6-2.9
+		c1.5-0.7,2.6-1,4.1-0.7c1.1,0.2,3.2,1.6,3.7-0.3c-0.4-0.2-0.5-0.7-0.7-0.9c2.1-0.2,0-5.1-0.8-6.1c-1.3-1.5-3.5-2.2-5.8-2.8
+		c-2.7-0.7-5.2-1.6-7.8-1.1c-4.5,0.9-4.2-1.7-6.8-1.7c-3.2,0-8.8,0.2-9.8,3.2c-0.5,1.4-0.9,1.5-1.7,2.6c-0.7,0.9,0.1,1.8-0.2,2.9
+		c-0.4,1.1-0.9,5-1.4,6.4c-0.9,2.3-2,5.2-4,5.2c-2.8,0.3-5,0.4-7.3-0.4c-1.4-0.5-3.7-1.3-4.8-1.7c-5.2-2.2-6.1-4.6-6.1-4.6
+		c-0.6-0.9-2-2.4-2.6-4.4c-0.6-2.1-1.6-3.9-2-5.1c-0.4-1.2-1.5-3-2.3-5c-1-2.6-2.5-4.5-3.6-5.4c-1.6-1.4-3.1-3.7-6.4-3
+		c-0.6,0.1-2.7,0.2-4.4,1.6c-1.1,0.9-1.5,2.9-2.5,4.5c-0.6,0.9-1.6,3.6-2.6,5.9c-0.7,1.6-1,2.7-1.7,3.3c-0.6,0.4-1.3,1-2.1,0.7
+		c-0.5-0.2-1.1-0.5-1.6-1c-0.8-0.6-2.5-3.6-3.6-5.7c-0.9-1.9-2.9-4.7-4-6.3c-1.6-2.2-2.6-2.8-5-2.8c-5.2,0-5.6,2.9-7.9,7.2
+		c-1,1.9-1.4,4.8-3.4,7.1c-1.2,1.3-4.8,6.8-7.4,7.7v0l0,0v38.8l0,0.1v-0.2c0.2-0.5,0.3-1,0.5-1.4c1-2.1,3.3-4.1,4.6-6.2
+		c0.7-1.2,1.5-2.3,1.9-3.6c0.4-1.1,0.6-2.7,1.2-3.6c0.7-1.1,1.8-1.5,2.9-1.7c1.8-0.3,3.3,2.5,5.5,3.6c1,0.4,5.4,2,6.7,2.3
+		c2.2,0.5,4.6,1,6.8,1.4c1.2,0.2,2.3,0.4,3.6,0.5c1.1,0.1,5.2,0.2,5.5,0.5c-2.1,1.1-3.3,4.1-4.1,6.2c-0.8,2.2-1.4,4.7-2.4,6.8
+		c-1.1,2.4-3.4,3.4-3.1,6.2c0.1,1.1,0.3,2.3,0.1,3.5c-0.2,1.3-0.7,2.3-1.1,3.5c-0.5,1.6-1.1,6.9-1.8,8.5l4.6-0.6l0,0
+		c0.5-1.2,1-6.2,1.1-6.7c0.9-2.5,2-4.6,3.7-6.5c1.7-1.9,1.6-4.3,2.6-6.6c1.1-2.4,2.5-4.3,3.9-6.6c2.5-4.1,4.1-9.2,9.4-10.3
+		c0.6-0.1,3.8,2.2,5.2,3.6c1.6,1.6,3.4,3.4,4.5,5.6c2.1,4.2,3.8,10.3,4.5,13.6c0.4,1.9,0.7,2,2,3.6c0.6,0.7,1.8,2.9,2.2,3.7
+		c0.4,0.9,1,2.9,1.5,4c0.3,0.6,1.1,2.5,1.6,4.2l4.3-0.1c0,0,0.1,0,0.1,0c0,0,0,0,0,0c0,0,0-0.1,0-0.1C75.9,99.5,74.6,94.6,73.9,89.8
+		z"/>
+	<path class="st1" d="M71.1,64.9L71.1,64.9C71.1,64.7,71.1,64.7,71.1,64.9z"/>
+	<g>
+		<g>
+			
+				<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-686.854" y1="80.5562" x2="-686.854" y2="80.3999" gradientTransform="matrix(1 0 0 -1 758 145.28)">
+				<stop  offset="0" style="stop-color:#F29104"/>
+				<stop  offset="1" style="stop-color:#EC6813"/>
+			</linearGradient>
+			<path class="st2" d="M71.1,64.9L71.1,64.9C71.1,64.7,71.1,64.7,71.1,64.9z"/>
+			<g>
+				
+					<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-705.428" y1="79.4728" x2="-705.428" y2="40.6105" gradientTransform="matrix(1 0 0 -1 758 145.28)">
+					<stop  offset="0" style="stop-color:#F29104"/>
+					<stop  offset="1" style="stop-color:#EC6813"/>
+				</linearGradient>
+				<path class="st3" d="M72.1,99.9c-0.5-1-1.1-3.1-1.5-4c-0.4-0.8-1.6-3-2.2-3.7c-1.3-1.5-1.6-1.6-2-3.6c-0.7-3.4-2.4-9.4-4.5-13.6
+					c-1.1-2.2-2.9-4-4.5-5.6c-1.4-1.4-4.6-3.7-5.2-3.6c-5.3,1-6.9,6.2-9.4,10.3c-1.4,2.3-2.8,4.2-3.9,6.6c-1,2.2-0.9,4.7-2.6,6.6
+					c-1.7,1.9-2.9,4-3.7,6.5c-0.2,0.5-0.6,5.5-1.1,6.7c0,0,0,0,0,0l7.8-0.5c7.3,0.5,5.2,3.3,16.5,2.7l17.9-0.6l0,0
+					C73.2,102.4,72.4,100.5,72.1,99.9z"/>
+			</g>
+			<g>
+				<g>
+					
+						<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="-686.9772" y1="164.3948" x2="-686.9771" y2="40.6383" gradientTransform="matrix(1 0 0 -1 758 145.28)">
+						<stop  offset="0" style="stop-color:#F29104"/>
+						<stop  offset="1" style="stop-color:#EC6813"/>
+					</linearGradient>
+					<path class="st4" d="M124.1-19.1H17.9C8-19.1,0-11.1,0-1.2v39v0c2.6-0.9,6.2-6.4,7.4-7.7c2-2.3,2.4-5.3,3.4-7.1
+						c2.3-4.2,2.7-7.2,7.9-7.2c2.4,0,3.4,0.6,5,2.8c1.1,1.5,3.1,4.4,4,6.3c1.1,2.2,2.8,5.1,3.6,5.7c0.6,0.4,1.1,0.8,1.6,1
+						c0.8,0.3,1.5-0.3,2.1-0.7c0.7-0.6,1-1.7,1.7-3.3c1-2.3,2-4.9,2.6-5.9c1-1.6,1.4-3.6,2.5-4.5c1.6-1.4,3.8-1.5,4.4-1.6
+						c3.3-0.7,4.8,1.6,6.4,3c1.1,1,2.5,2.9,3.6,5.4c0.8,2,1.8,3.9,2.3,5c0.4,1.1,1.4,2.9,2,5.1c0.6,1.9,2,3.4,2.6,4.4
+						c0,0,0.9,2.4,6.1,4.6c1.1,0.5,3.4,1.3,4.8,1.7c2.3,0.8,4.5,0.7,7.3,0.4c2,0,3.1-2.9,4-5.2c0.5-1.4,1.1-5.3,1.4-6.4
+						c0.3-1.1-0.5-1.9,0.2-2.9c0.8-1.1,1.3-1.2,1.7-2.6c1-3.1,6.6-3.2,9.8-3.2c2.7,0,2.3,2.6,6.8,1.7c2.6-0.5,5.1,0.3,7.8,1.1
+						c2.3,0.6,4.5,1.3,5.8,2.8c0.8,1,2.9,5.9,0.8,6.1c0.2,0.2,0.4,0.7,0.7,0.9c-0.5,1.9-2.5,0.5-3.7,0.3c-1.5-0.3-2.6,0-4.1,0.7
+						c-2.6,1.1-6.3,1-8.6,2.9c-1.9,1.6-1.9,5.1-2.8,7.1c0,0-2.5,6.3-7.8,10.2c-1.4,1-4.1,3.4-9.9,4.3c-2.6,0.4-5.1,0.4-7.8,0.3
+						c-1.3-0.1-2.6-0.1-3.9-0.1c-0.8,0-3.4-0.1-3.3,0.2l-0.3,0.7c0,0.2,0.1,0.8,0.2,1c0.1,0.6,0.1,1.1,0.2,1.6c0,1.1-0.1,2.3,0,3.4
+						c0.1,2.3,1,4.4,1.1,6.8c0.1,2.6,1.4,5.4,2.7,7.5c0.5,0.8,1.2,0.9,1.5,1.9c0.4,1.1,0,2.4,0.2,3.6c0.7,4.7,2.1,9.7,4.2,14
+						c0,0,0,0.1,0,0.1c0,0,0,0,0,0c2.6-0.4,5.3-1.4,8.7-1.9c6.3-0.9,15-0.5,20.6-1c14.2-1.3,21.9,5.8,34.6,2.9V-1.2
+						C142-11.1,134-19.1,124.1-19.1z M71.1,64.9C71.1,64.7,71.1,64.7,71.1,64.9L71.1,64.9z"/>
+				</g>
+			</g>
+			<g>
+				
+					<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="-738.3776" y1="85.364" x2="-738.3776" y2="41.4928" gradientTransform="matrix(1 0 0 -1 758 145.28)">
+					<stop  offset="0" style="stop-color:#F29104"/>
+					<stop  offset="1" style="stop-color:#EC6813"/>
+				</linearGradient>
+				<path class="st5" d="M32.8,81.3c1-2.2,1.6-4.6,2.4-6.8c0.8-2.1,2-5.1,4.1-6.2c-0.3-0.3-4.4-0.4-5.5-0.5
+					c-1.2-0.1-2.4-0.3-3.6-0.5c-2.2-0.4-4.7-0.9-6.8-1.4c-1.3-0.3-5.8-1.9-6.7-2.3c-2.3-1-3.8-3.9-5.5-3.6c-1.1,0.2-2.2,0.6-2.9,1.7
+					c-0.6,0.9-0.8,2.5-1.2,3.6c-0.5,1.2-1.3,2.4-1.9,3.6C3.8,71,1.5,72.9,0.5,75C0.3,75.5,0.2,76,0,76.5v0.2v7.9v14v2
+					c1.2,0.2,2.4,0.4,3.7,0.8c10,2.7,12.4,2.9,22.2,1.8l0.9-0.1v0c0.7-1.6,1.3-6.9,1.8-8.5c0.4-1.3,0.9-2.3,1.1-3.5
+					c0.2-1.2,0-2.4-0.1-3.5C29.4,84.7,31.7,83.7,32.8,81.3z"/>
+			</g>
+		</g>
+	</g>
+</g>
+<text transform="matrix(1 0 0 1 8.0118 124.3814)" class="st6 st7"> </text>
+<path class="st1" d="M36.1,128.9c-1.4,0-2.7-0.2-3.8-0.7c-1.2-0.5-2.1-1.2-3-2.1c-0.8-0.9-1.5-2.1-1.9-3.4c-0.5-1.3-0.7-2.9-0.7-4.5
+	c0-1.7,0.2-3.2,0.7-4.5c0.5-1.3,1.1-2.4,1.9-3.3c0.8-0.9,1.8-1.6,3-2.1c1.2-0.5,2.4-0.7,3.8-0.7c1.4,0,2.7,0.2,3.8,0.7
+	c1.2,0.5,2.1,1.2,3,2.1c0.8,0.9,1.5,2,1.9,3.4c0.5,1.3,0.7,2.8,0.7,4.5c0,1.7-0.2,3.2-0.7,4.5c-0.5,1.3-1.1,2.5-1.9,3.4
+	c-0.8,0.9-1.8,1.6-3,2.1C38.8,128.7,37.5,128.9,36.1,128.9z M36.1,124.9c1.4,0,2.5-0.6,3.4-1.8c0.8-1.2,1.2-2.9,1.2-5
+	c0-2.1-0.4-3.7-1.2-4.9c-0.8-1.2-2-1.7-3.4-1.7c-1.4,0-2.5,0.6-3.4,1.7c-0.8,1.2-1.2,2.8-1.2,4.9c0,2.1,0.4,3.8,1.2,5
+	C33.6,124.3,34.7,124.9,36.1,124.9z"/>
+<path class="st1" d="M47.2,118.3c0-1.7,0.3-3.2,0.8-4.6c0.5-1.3,1.2-2.5,2.1-3.4c0.9-0.9,2-1.6,3.1-2.1c1.2-0.5,2.5-0.7,3.8-0.7
+	c1.3,0,2.5,0.3,3.5,0.8c1,0.5,1.9,1.2,2.6,1.9l-2.6,2.9c-0.5-0.5-1.1-0.9-1.6-1.1c-0.5-0.3-1.2-0.4-1.9-0.4c-0.7,0-1.4,0.2-2,0.5
+	c-0.6,0.3-1.2,0.7-1.6,1.3c-0.5,0.6-0.8,1.3-1.1,2.1c-0.3,0.8-0.4,1.8-0.4,2.8c0,2.1,0.5,3.8,1.4,5c0.9,1.2,2.1,1.8,3.7,1.8
+	c0.8,0,1.6-0.2,2.2-0.5c0.6-0.3,1.2-0.8,1.7-1.3l2.6,2.8c-0.9,1-1.9,1.8-3,2.3c-1.1,0.5-2.3,0.8-3.6,0.8c-1.3,0-2.6-0.2-3.8-0.7
+	c-1.2-0.5-2.2-1.1-3.1-2s-1.6-2-2.1-3.3C47.4,121.6,47.2,120,47.2,118.3z"/>
+<path class="st1" d="M65.1,124.2c0-1.7,0.7-2.9,2.1-3.9c1.4-0.9,3.7-1.6,6.8-1.9c0-0.7-0.3-1.3-0.6-1.7c-0.4-0.4-1-0.6-1.8-0.6
+	c-0.7,0-1.4,0.1-2,0.4c-0.7,0.3-1.4,0.6-2.2,1l-1.7-3.1c1-0.6,2.1-1.1,3.2-1.5c1.1-0.4,2.3-0.6,3.5-0.6c2,0,3.6,0.6,4.7,1.7
+	c1.1,1.2,1.6,3,1.6,5.4v9h-3.8l-0.4-1.6h-0.1c-0.7,0.6-1.4,1.1-2.1,1.4c-0.8,0.4-1.6,0.6-2.5,0.6c-0.7,0-1.4-0.1-1.9-0.4
+	c-0.6-0.2-1.1-0.6-1.5-1c-0.4-0.4-0.7-0.9-0.9-1.5C65.2,125.5,65.1,124.8,65.1,124.2z M69.5,123.8c0,0.5,0.2,0.9,0.5,1.1
+	c0.3,0.2,0.8,0.4,1.3,0.4c0.6,0,1-0.1,1.4-0.3c0.4-0.2,0.8-0.6,1.2-1v-2.8c-1.7,0.2-2.8,0.6-3.5,1C69.9,122.7,69.5,123.2,69.5,123.8
+	z"/>
+<path class="st1" d="M81.4,113.1h3.8l0.3,2h0.1c0.7-0.7,1.4-1.2,2.1-1.7c0.7-0.5,1.6-0.7,2.7-0.7c1.1,0,2,0.2,2.7,0.7
+	c0.7,0.5,1.2,1.1,1.6,2c0.7-0.7,1.4-1.3,2.2-1.9c0.8-0.5,1.7-0.8,2.8-0.8c1.7,0,2.9,0.6,3.7,1.7c0.8,1.1,1.2,2.7,1.2,4.7v9.8H100
+	v-9.2c0-1.1-0.2-1.9-0.5-2.4c-0.3-0.4-0.8-0.6-1.5-0.6c-0.8,0-1.7,0.5-2.7,1.5v10.7h-4.7v-9.2c0-1.1-0.2-1.9-0.5-2.4
+	c-0.3-0.4-0.8-0.6-1.5-0.6c-0.8,0-1.7,0.5-2.7,1.5v10.7h-4.7V113.1L81.4,113.1z"/>
+<g>
+	<path class="st1" d="M107.4,106.2h4.7v17.6c0,0.5,0.1,0.8,0.3,1c0.2,0.2,0.4,0.3,0.6,0.3c0.1,0,0.2,0,0.3,0c0.1,0,0.2,0,0.3-0.1
+		l0.6,3.5c-0.3,0.1-0.6,0.2-1,0.3c-0.4,0.1-0.9,0.1-1.4,0.1c-0.8,0-1.5-0.1-2-0.4c-0.6-0.3-1-0.6-1.3-1.1c-0.3-0.5-0.6-1-0.7-1.7
+		c-0.1-0.6-0.2-1.4-0.2-2.2L107.4,106.2L107.4,106.2z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/css/partials/tags.css b/src/ocamlorg_frontend/css/partials/tags.css
index e7cf7fbea6..362d8a5fed 100644
--- a/src/ocamlorg_frontend/css/partials/tags.css
+++ b/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_10 rounded-md mr-2 mb-2 whitespace-nowrap;
 }
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/css/styles.css b/src/ocamlorg_frontend/css/styles.css
index 50a8389782..24fc59f6ce 100644
--- a/src/ocamlorg_frontend/css/styles.css
+++ b/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;
diff --git a/src/ocamlorg_frontend/pages/install.eml b/src/ocamlorg_frontend/pages/install.eml
index e11da4cf48..daa4d93419 100644
--- a/src/ocamlorg_frontend/pages/install.eml
+++ b/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>
diff --git a/src/ocamlorg_frontend/pages/logos.eml b/src/ocamlorg_frontend/pages/logos.eml
index 7b0d21d660..3034cd211e 100644
--- a/src/ocamlorg_frontend/pages/logos.eml
+++ b/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>
diff --git a/src/ocamlorg_frontend/pages/page.eml b/src/ocamlorg_frontend/pages/page.eml
index a6c3ca1618..29b0541139 100644
--- a/src/ocamlorg_frontend/pages/page.eml
+++ b/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>
diff --git a/src/ocamlorg_frontend/pages/papers.eml b/src/ocamlorg_frontend/pages/papers.eml
index 5e90a041b7..b6a953bfca 100644
--- a/src/ocamlorg_frontend/pages/papers.eml
+++ b/src/ocamlorg_frontend/pages/papers.eml
@@ -4,39 +4,39 @@ Layout.render
 ~description:"A selection of papers grouped by popular categories."
 ~canonical:Url.papers
 ~active_top_nav_item:Header.Learn @@
-<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">Papers</h1>
-            <p>
+        <div class="w-full m-auto">
+            <h1 class="font-bold text-title dark:text-dark-title mb-2"">Papers</h1>
+            <p class="text-content dark:text-dark-content text-xl lg:max-w-[80%]">
                 With its strong academic roots, OCaml is known to be a spearhead in the development of Programming Language Theory.
                 This page contains a selection of papers that have influenced OCaml and other functional programming languages.
             </p>
         </div>
     </div>
 </div>
-<div class="bg-pattern lg:py-32 py-20 ">
+<div class="section-blue-gradient dark:dark-section-blue-gradient lg:py-12 py-8">
     <div class="container-fluid">
         <div class=" ">
-            <div class="text-center">
-                <h2 class="font-bold text-primary mb-16">Recommended Papers</h2>
+            <div class="">
+                <h2 class="font-bold text-white dark:text-dark-title mb-8">Recommended Papers</h2>
             </div>
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                 <% recommended_papers |> List.iter (fun (paper : Data.Paper.t) -> %>
-                    <a href="<%s paper.links |> List.hd |> (fun x -> x.uri) %>" class="flex-1 p-6 pb-4 border border-gray-200 rounded-xl text-legacy-default bg-legacy-default dark:bg-legacy-dark-default legacy-card-hover">
-                        <div class="font-semibold text-base mb-3">
+                    <a href="<%s paper.links |> List.hd |> (fun x -> x.uri) %>" class="flex-1 p-6 pb-4 rounded-xl bg-white card dark:dark-card">
+                        <div class="font-semibold text-base mb-3 text-title dark:text-dark-title">
                             <%s paper.title %>
                         </div>
-                        <div class="truncate">
+                        <div class="truncate text-content dark:text-dark-content">
                             <%s paper.abstract %>
                         </div>
-                        <div class="font-bold text-sm mt-3">
+                        <div class="text-sm mt-3 text-content dark:text-dark-content">
                             <%s String.concat ", " paper.authors %>
                         </div>
-                        <div class="flex mt-5">
+                        <div class="flex mt-5 flex-wrap">
                             <% paper.tags |> List.iter (fun (tag : string) -> %>
                             <div
-                                class="tag tag-blue">
+                                class="tag">
                                 <%s tag %>
                             </div>
                             <% ); %>
@@ -47,12 +47,12 @@ Layout.render
         </div>
     </div>
 </div>
-<div class="bg-legacy-default dark:bg-legacy-dark-default">
+<div class="bg-white dark:bg-dark-background">
     <div class="py-10 lg:py-28">
         <div class="container-fluid">
             <div class="flex justify-between items-center flex-col md:flex-row">
                 <% let paper_num = match List.length papers with 0 -> "No Paper" | 1 -> "1 Paper" | l -> Printf.sprintf "%i Papers" l in %>
-                <h5 class="font-bold mb-5 md:mb-0"><%s paper_num %></h5>
+                <h5 class="font-bold text-title dark:text-dark-title mb-5 md:mb-0"><%s paper_num %></h5>
                 <form action="<%s Url.papers %>" method="GET">
                     <%s! Forms.search_input
                         ~name:"q"
@@ -73,7 +73,7 @@ Layout.render
                 </div>
                 <% | _ -> %>
                 <table class="max-w-5xl lg:max-w-full align-top block lg:table">
-                    <thead class="hidden lg:table-header-group bg-legacy-body-700 text-legacy-default text-left rounded-xl">
+                    <thead class="hidden lg:table-header-group text-title dark:text-dark-title text-left rounded-xl">
                         <tr>
                             <th class="py-4 px-6 rounded-l-lg text-x w-2/5">Title</th>
                             <th class="py-4 px-6">Years</th>
@@ -84,34 +84,36 @@ Layout.render
                     </thead>
                     <tbody class="block lg:table-row-group">
                         <% papers |> List.iter (fun (paper : Data.Paper.t) -> %>
-                            <tr class="flex flex-col lg:table-row mb-4 lg:mb-0 border-b border-b-zinc-200 lg:border-none">
+                            <tr class="flex flex-col lg:table-row mb-4 lg:mb-0 border-b  dark:border-b-dark-separator_30 lg:border-none">
                                 <td class="py-0 lg:py-4 px-6 font-semibold">
-                                    <div class="text-xl lg:text-base font-semibold">
+                                    <div class="text-xl text-title dark:text-dark-title lg:text-base font-semibold">
                                         <%s paper.title %>
                                     </div>
-                                    <div class="font-normal text-sm mt-2 text-legacy-lighter">
+                                    <div class="font-normal text-sm mt-2 text-content dark:text-dark-content">
                                         <%s paper.abstract %>
                                     </div>
                                 </td>
-                                <td class="pt-4 lg:py-4 px-6 font-medium align-top">
+                                <td class="pt-4 lg:py-4 px-6 font-medium align-top text-title dark:text-dark-title">
                                     <%i paper.year %>
                                 </td>
-                                <td class="pt-4 lg:py-4 px-6 font-medium align-top">
+                                <td class="pt-4 lg:py-4 px-6 font-medium align-top text-title dark:text-dark-title">
                                     <div class="flex flex-wrap">
                                         <% paper.tags |> List.iter (fun (tag : string) -> %>
                                             <div
-                                                class="tag tag-blue">
+                                                class="tag">
                                                 <%s tag %>
                                             </div>
                                             <% ); %>
                                     </div>
                                 </td>
-                                <td class="pt-4 lg:py-4 px-6 font-medium align-top">
-                                    <%s String.concat ", " paper.authors %>
+                                <td class="pt-4 lg:py-4 px-6 font-medium align-top text-title dark:text-dark-title">
+                                    <% paper.authors |> List.iter (fun (author) -> %>
+                                    <li><%s author %></li>
+                                        <% ); %>
                                 </td>
                                 <td class="py-4 px-6 align-top">
                                     <% paper.links |> List.iter (fun (link : Data.Paper.link) -> %>
-                                        <a href="<%s link.uri %>" class="text-primary font-medium block whitespace-nowrap">
+                                        <a href="<%s link.uri %>" class="text-primary dark:text-dark-white dark:underline hover:text-underline dark:hover:text-dark-primary font-medium block whitespace-nowrap">
                                             <%s link.description %>
                                         </a>
                                         <% ); %>
diff --git a/tailwind.config.js b/tailwind.config.js
index 286fc2de83..bb9ed69c12 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -31,6 +31,7 @@ const figma_colors = {
       primary: "#C24F1E",
       primary_40: "#D5400066",
       primary_20: "#D5400033",
+      primary_10: "#D5400019",
       primary_nav_block_hover_10:"#C24F1E1A",
 
       secondary: "#00838A",