Implement dark mode on homepage and tutorial search page (ocaml#2069)

* implement darkmode on home page * change legacy colors on -toc.eml -tutorial_search.eml * implement darkmode on tutorial_search.eml * few modification on tutorial_search.eml * corections on tutorial_search.eml and home.eml * corrections on search bar top navigation * more correction * more corrections * light mode correction on search navigation
Sudha247 · Feb 27, 2024 · 73bf067 · 73bf067
1 parent 3244fb5
commit 73bf067
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 123 deletions.
diff --git a/src/ocamlorg_frontend/components/forms.eml b/src/ocamlorg_frontend/components/forms.eml
@@ -1,6 +1,6 @@
 let search_input ?button_attrs ?input_attrs ?dropdown_html ~label ~name _class =
   let form_dropdown html = 
-    <div class="dropdown w-full lg:w-[32rem] xl:w-[32rem] z-10 absolute rounded-md mt-12 shadow-2xl top-1 p-2 bg-white dark:bg-dark-background shadow-3xl">
+    <div class="dropdown w-full lg:w-[32rem] xl:w-[32rem] z-10 absolute rounded-md mt-12 shadow-2xl top-1 p-2 bg-white dark:bg-dark-background shadow-3xl dark:outline dark:outline-1 dark:outline-primary">
         <%s! html %>
     </div>
   in

diff --git a/src/ocamlorg_frontend/components/icons.eml b/src/ocamlorg_frontend/components/icons.eml
@@ -38,7 +38,7 @@ let beaker class_ =
 
 let book class_ =
   <svg xmlns="http://www.w3.org/2000/svg" class="<%s class_ %>" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-    <path d="M2.46875 15.1935L2.5293 4.46692H1.31836V18.1154C2.98242 17.6857 4.65234 17.4122 6.33398 17.4005C7.88672 17.3908 9.43945 17.6075 10.9961 18.1349C10.0293 17.3517 8.95117 16.7755 7.80078 16.4005C6.35156 15.9279 4.78516 15.7716 3.17969 15.9083C2.81641 15.9376 2.5 15.6681 2.46875 15.3068C2.46484 15.2677 2.46484 15.2306 2.46875 15.1935ZM20.2383 3.90638C20.2344 3.87513 20.2305 3.84192 20.2305 3.80677C20.2305 3.77356 20.2324 3.74036 20.2383 3.70716V1.53528C18.7148 1.39075 17.1445 1.55872 15.7734 2.07825C14.4922 2.56458 13.3867 3.36341 12.668 4.50794V16.879C13.7852 16.1329 14.9277 15.5197 16.1016 15.1017C17.4395 14.6251 18.8145 14.3986 20.2383 14.5118V3.90638ZM21.5566 3.14856H23.3418C23.7051 3.14856 24 3.44349 24 3.80677V18.9747C24 19.338 23.7051 19.6329 23.3418 19.6329C23.2676 19.6329 23.1953 19.6212 23.1289 19.5978C21.293 19.0724 19.4688 18.7228 17.6621 18.7111C15.9004 18.6993 14.1406 19.0099 12.373 19.7892C12.2637 19.8615 12.1328 19.9005 11.998 19.8986C11.8652 19.9005 11.7344 19.8615 11.623 19.7892C9.85742 19.0079 8.0957 18.6993 6.33398 18.7111C4.52734 18.7228 2.70508 19.0724 0.867188 19.5978C0.800781 19.6212 0.728516 19.6329 0.654297 19.6329C0.294922 19.6349 0 19.34 0 18.9767V3.80677C0 3.44349 0.294922 3.14856 0.658203 3.14856H2.53516L2.54688 0.949345C2.54883 0.632939 2.77148 0.37122 3.07031 0.30872C4.80273 -0.0526083 6.9082 0.0372355 8.75391 0.744267C10.0293 1.23255 11.1875 2.01184 12.0332 3.13685C12.8867 2.08802 14.0273 1.33411 15.3105 0.847782C17.0645 0.181767 19.0879 0.0216105 20.9922 0.300907C21.3203 0.347782 21.5547 0.630986 21.5547 0.951298V3.14856H21.5566ZM13.3066 18.0353C14.7617 17.5783 16.2148 17.3908 17.668 17.3986C19.3496 17.4083 21.0195 17.6837 22.6836 18.1134V4.46692H21.5566V15.2521C21.5566 15.6154 21.2617 15.9103 20.8984 15.9103C20.8457 15.9103 20.7949 15.9044 20.7461 15.8927C19.3047 15.6661 17.9082 15.8536 16.5449 16.34C15.4473 16.7325 14.3691 17.3185 13.3066 18.0353ZM11.3516 16.7521V4.48841C10.6621 3.27161 9.54688 2.45716 8.28711 1.97474C6.85938 1.42786 5.25586 1.30481 3.85742 1.50403L3.7832 14.5529C5.30859 14.4982 6.80078 14.6915 8.20508 15.1505C9.32227 15.5138 10.3809 16.047 11.3516 16.7521Z" fill="#D54000"/>
+    <path d="M2.46875 15.1935L2.5293 4.46692H1.31836V18.1154C2.98242 17.6857 4.65234 17.4122 6.33398 17.4005C7.88672 17.3908 9.43945 17.6075 10.9961 18.1349C10.0293 17.3517 8.95117 16.7755 7.80078 16.4005C6.35156 15.9279 4.78516 15.7716 3.17969 15.9083C2.81641 15.9376 2.5 15.6681 2.46875 15.3068C2.46484 15.2677 2.46484 15.2306 2.46875 15.1935ZM20.2383 3.90638C20.2344 3.87513 20.2305 3.84192 20.2305 3.80677C20.2305 3.77356 20.2324 3.74036 20.2383 3.70716V1.53528C18.7148 1.39075 17.1445 1.55872 15.7734 2.07825C14.4922 2.56458 13.3867 3.36341 12.668 4.50794V16.879C13.7852 16.1329 14.9277 15.5197 16.1016 15.1017C17.4395 14.6251 18.8145 14.3986 20.2383 14.5118V3.90638ZM21.5566 3.14856H23.3418C23.7051 3.14856 24 3.44349 24 3.80677V18.9747C24 19.338 23.7051 19.6329 23.3418 19.6329C23.2676 19.6329 23.1953 19.6212 23.1289 19.5978C21.293 19.0724 19.4688 18.7228 17.6621 18.7111C15.9004 18.6993 14.1406 19.0099 12.373 19.7892C12.2637 19.8615 12.1328 19.9005 11.998 19.8986C11.8652 19.9005 11.7344 19.8615 11.623 19.7892C9.85742 19.0079 8.0957 18.6993 6.33398 18.7111C4.52734 18.7228 2.70508 19.0724 0.867188 19.5978C0.800781 19.6212 0.728516 19.6329 0.654297 19.6329C0.294922 19.6349 0 19.34 0 18.9767V3.80677C0 3.44349 0.294922 3.14856 0.658203 3.14856H2.53516L2.54688 0.949345C2.54883 0.632939 2.77148 0.37122 3.07031 0.30872C4.80273 -0.0526083 6.9082 0.0372355 8.75391 0.744267C10.0293 1.23255 11.1875 2.01184 12.0332 3.13685C12.8867 2.08802 14.0273 1.33411 15.3105 0.847782C17.0645 0.181767 19.0879 0.0216105 20.9922 0.300907C21.3203 0.347782 21.5547 0.630986 21.5547 0.951298V3.14856H21.5566ZM13.3066 18.0353C14.7617 17.5783 16.2148 17.3908 17.668 17.3986C19.3496 17.4083 21.0195 17.6837 22.6836 18.1134V4.46692H21.5566V15.2521C21.5566 15.6154 21.2617 15.9103 20.8984 15.9103C20.8457 15.9103 20.7949 15.9044 20.7461 15.8927C19.3047 15.6661 17.9082 15.8536 16.5449 16.34C15.4473 16.7325 14.3691 17.3185 13.3066 18.0353ZM11.3516 16.7521V4.48841C10.6621 3.27161 9.54688 2.45716 8.28711 1.97474C6.85938 1.42786 5.25586 1.30481 3.85742 1.50403L3.7832 14.5529C5.30859 14.4982 6.80078 14.6915 8.20508 15.1505C9.32227 15.5138 10.3809 16.047 11.3516 16.7521Z" fill="currentColor"/>
   </svg>
 
 let pencil_note class_ = 

diff --git a/src/ocamlorg_frontend/components/toc.eml b/src/ocamlorg_frontend/components/toc.eml
@@ -39,8 +39,8 @@ let render (t : t) =
                 <ol>
                   <% items |> List.iter begin fun item -> %>
                   <li>
-                    <a href="<%s item.href %>" class="text-legacy-default py-1 md:py-0 pl-8 pr-1 block transition-colors border-l-4 border-t-2 border-b-2 border-r-2 border-transparent rounded"
-                      :class='isWithin(scrollY, "<%s item.href %>", sectionYPositions) ? "font-semibold border-l-primary text-primary bg-legacy-primary-200": "hover:text-primary"'
+                    <a href="<%s item.href %>" class="text-title dark:text-dark-title py-1 md:py-0 pl-8 pr-1 block transition-colors border-l-4 border-t-2 border-b-2 border-r-2 border-transparent rounded"
+                      :class='isWithin(scrollY, "<%s item.href %>", sectionYPositions) ? "font-semibold border-l-primary dark:border-l-dark-primary text-primary dark:text-dark-primary bg-primary_nav_block_hover_10 dark:bg-primary_nav_block_hover_10": "hover:text-primary dark:hover:text-dark-primary"'
                       :style='isWithin(scrollY, "<%s item.href %>", sectionYPositions) ? "letter-spacing: -0.012em;" : ""'
                     >
                       <%s! item.title %>

diff --git a/src/ocamlorg_frontend/components/tutorial_search.eml b/src/ocamlorg_frontend/components/tutorial_search.eml
@@ -10,7 +10,7 @@ Learn_layout.single_column_layout
 ~canonical:Url.tutorial_search
 ~active_top_nav_item:Header.Community
 ~current:Guides @@
-<div class="bg-legacy-default dark:bg-legacy-dark-default">
+<div class="bg-white dark:bg-dark-background">
   <div class="py-7 lg:py-5">
     <div class="container-fluid">
       <div class="flex flex-col lg:px-28 gap-2 max-w-5xl">
@@ -23,7 +23,7 @@ Learn_layout.single_column_layout
                   "mb-4" %>
           </form>
 
-          <div class="prose max-w-5xl mb-2 lg:mb-4">
+          <div class="prose dark:prose-invert max-w-5xl mb-2 lg:mb-4">
             <h1 class="font-bold text-2xl">
               <% (match total with
                 | 0 -> %> No search results for "<%s search %>"
@@ -40,25 +40,25 @@ Learn_layout.single_column_layout
           </div>
 
           <% if List.length documents > 0 then ( %>
-            <div class="text-legacy-lighter mb-2 lg:mb-4">
+            <div class="text-content dark:text-dark-content mb-2 lg:mb-4">
               Showing <%i ((page - 1) * 50 + 1) %> - <%i (min (page * 50) total) %>
             </div>
           <ol class="flex flex-col">
             <% documents |> List.iter (fun (doc : Data.Tutorial.search_document) -> %>
-            <li class="border-gray-200 border-b py-6 md:py-8">
+            <li class="border-separator_20 dark:border-dark-separator_30 border-b py-6 md:py-8 group">
                 <a href="<%s doc.slug %><%s match doc.section with | None -> "" | Some heading -> heading.id %>">
-                  <h2 class="text-primary text-2xl"><%s! Search.highlight_search_terms ~class_:"bg-legacy-search-term-highlight" ~search doc.title %></h2>
+                  <h2 class="text-primary dark:text-dark-primary text-2xl group-hover:underline"><%s! Search.highlight_search_terms ~class_:"bg-tertiary_lighter dark:bg-[#003357] dark:text-dark-white" ~search doc.title %></h2>
                   <% match doc.section with | None -> () | Some heading -> ( %>
-                  <h3 class="mb-2 mt-4 leading-7 text-title text-base">
-                    <%s! Icons.hashtag "w-6 h-6 p-0.5 mr-2 inline-block border rounded-md text-white bg-black" %>
-                    <%s! Search.highlight_search_terms ~class_:"bg-legacy-search-term-highlight" ~search heading.title %>
+                  <h3 class="mb-2 mt-4 leading-7 text-title dark:text-dark-title text-base">
+                    <%s! Icons.hashtag "w-6 h-6 p-0.5 mr-2 inline-block border rounded-md text-white bg-code_window dark:bg-dark-background_navigation" %>
+                    <%s! Search.highlight_search_terms ~class_:"bg-tertiary_lighter dark:bg-[#003357] dark:text-dark-white" ~search heading.title %>
                   </h3>
                   <% ); %>
-                  <p class="mt-4 text-content text-base leading-7">
-                    <%s! Search.highlight_search_terms ~class_:"bg-legacy-search-term-highlight" ~search (Search.display_surrounding_text ~search doc.content) %>
+                  <p class="mt-4 text-content dark:text-dark-content text-base leading-7">
+                    <%s! Search.highlight_search_terms ~class_:"bg-tertiary_lighter dark:bg-[#003357] dark:text-dark-white" ~search (Search.display_surrounding_text ~search doc.content) %>
                   </p>
               </a>
-              <div class="mt-5 inline-block px-5 whitespace-nowrap py-0.5 text-primary font-normal bg-legacy-primary-100 border border-primary rounded"><%s! doc.category %></div>
+              <div class="mt-5 inline-block px-5 whitespace-nowrap py-0.5 text-primary dark:text-dark-primary font-normal bg-primary_25 dark:bg-dark-primary_nav_block_hover_10 border border-primary dark:border-dark-primary rounded"><%s! doc.category %></div>
             </li>
             <% ); %>
           </ol>