Major:add-light&dark mode button,minor:fix-toptoscroll,hamburger-menu…

…-close,search-icon
OneBusAway · Mar 12, 2024 · 488c244 · 488c244
1 parent 4304292
commit 488c244
Show file tree

Hide file tree

Showing 7 changed files with 41 additions and 13 deletions.
diff --git a/frontend/styles/index.css b/frontend/styles/index.css
@@ -35,7 +35,7 @@ button.DocSearch.DocSearch-Button {
 }
 
 .DocSearch-Search-Icon {
-  @apply !h-5 !w-5;
+  @apply !h-5 !w-5 !text-zinc-400 dark:text-zinc-500;
 }
 
 .DocSearch-Button-Placeholder {

diff --git a/src/_layouts/default.erb b/src/_layouts/default.erb
@@ -1,14 +1,12 @@
-<!doctype html>
-<html lang="<%= site.locale %>" class='h-full'>
+<!DOCTYPE html>
+<html lang="<%= site.locale %>"  x-data="{ themeMode: window.localStorage.getItem('mode') || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light') }" :class="{'dark':themeMode=='dark','hidden':!themeMode}" class='hidden h-full' >
   <head>
     <%= render "head", locals: { metadata: site.metadata, title: data.title } %>
   </head>
   <body class="flex min-h-full bg-white antialiased dark:bg-zinc-900" x-data="{nav_open: false}" :class="{'overflow-hidden': nav_open}">
     <div class="w-full">
       <div class="h-full lg:ml-72 xl:ml-80">
-        <header
-          class="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex"
-          >
+        <header class="contents lg:pointer-events-none lg:fixed lg:inset-0 lg:z-40 lg:flex">
           <div class="contents lg:pointer-events-auto lg:block lg:w-72 lg:overflow-y-auto lg:border-r lg:border-zinc-900/10 xl:w-80 lg:dark:border-white/10">
             <div class="hidden lg:flex sticky top-0 z-20 py-2 px-6 backdrop-blur-sm dark:backdrop-blur bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]" style="--bg-opacity-light:0.5;--bg-opacity-dark:0.2">
               <%= render 'site_logo' %>

diff --git a/src/_partials/_footer.erb b/src/_partials/_footer.erb
@@ -41,7 +41,7 @@
       </a>
     </div>
   </div>
-  <button id="scrollToTopBtn" title="Scroll to Top" class="fixed bottom-4 lg:bottom-8 right-4 lg:right-8 z-50 shadow-md bg-green-500 dark:bg-green-500/70 text-white cursor-pointer px-4 py-2 rounded-lg text-lg hidden">
+  <button id="scrollToTopBtn" title="Scroll to Top" class="fixed bottom-4 lg:bottom-8 right-4 lg:right-8 z-50 shadow-md bg-green-500 dark:bg-green-500/70 dark:text-white bg-opacity-50 backdrop-blur-md  cursor-pointer  rounded-full text-lg hidden">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-8 h-8">
       <path stroke-linecap="round" stroke-linejoin="round" d="m15 11.25-3-3m0 0-3 3m3-3v7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
     </svg>

diff --git a/src/_partials/_head.erb b/src/_partials/_head.erb
@@ -14,13 +14,13 @@
 <link
   rel="stylesheet"
   href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/default.min.css"
-  media="screen and (prefers-color-scheme: light)"
->
+    :disabled="themeMode === 'dark'">
 
 <link
   rel="stylesheet"
   href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/styles/atom-one-dark.min.css"
-  media="screen and (prefers-color-scheme: dark)"
+    :disabled="themeMode !== 'dark'"
+
 >
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
 <link rel="stylesheet" href="<%= asset_path 'css' %>" />

diff --git a/src/_partials/_navbar.erb b/src/_partials/_navbar.erb
@@ -1,4 +1,4 @@
-<nav class="lg:p-6  pt-8 lg:pt-0 lg:w-auto lg:block fixed lg:static top-0 z-10 bg-white dark:bg-zinc-900 transition-all duration-500 max-w-[600px]"
+<nav class="lg:p-6  pt-8 lg:pt-0 lg:w-auto lg:block fixed lg:static top-0 z-10 bg-white dark:bg-zinc-900 transition-[width,padding,margin] duration-500 max-w-[600px]"
      :class="{ 'w-full  p-6 pr-0 ': nav_open, 'w-0 p-0 overflow-hidden': !nav_open }">
 
   <ul role="list" class='max-h-[100svh] pb-12 lg:pb-0 overflow-y-scroll lg:max-h-fit lg:overflow-auto'>

diff --git a/src/_partials/_top_bar.erb b/src/_partials/_top_bar.erb
@@ -12,7 +12,7 @@
       class="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
       :class="{ 'hidden': nav_open }"
       aria-label="Toggle navigation">
-      <svg viewBox="0 0 10 9" fill="none" stroke-linecap="round" aria-hidden="true" class="w-2.5 stroke-zinc-900 dark:stroke-white">
+      <svg viewBox="0 0 10 9" fill="none" stroke-linecap="round" aria-hidden="true" class="w-[15px] stroke-zinc-900 dark:stroke-white">
         <path d="M.5 1h9M.5 8h9M.5 4.5h9"></path>
       </svg>
     </button>
@@ -24,7 +24,7 @@
       class="hidden h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 dark:hover:bg-white/5"
       :class="{ '!flex':nav_open }"
       aria-label="Toggle navigation">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" aria-hidden="true" class="w-2.5 stroke-zinc-900 dark:stroke-white fill-black dark:fill-white">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-linecap="round" aria-hidden="true" class="w-[15px] stroke-zinc-900 dark:stroke-white fill-black dark:fill-white">
         <path d="M24 20.188l-8.315-8.209 8.2-8.282-3.697-3.697-8.212 8.318-8.31-8.203-3.666 3.666 8.321 8.24-8.206 8.313 3.666 3.666 8.237-8.318 8.285 8.203z"/>
       </svg>
     </button>
@@ -35,11 +35,40 @@
   <div class="flex items-center gap-5">
     <nav class="block">
       <div role="list" class="flex items-center gap-8">
+
+        <button @click="themeMode = (themeMode === 'dark' ? 'light' : 'dark'); localStorage.setItem('mode', themeMode);" class=" p-2 text-white  rounded-full dark:bg-white focus:outline-none">
+            <%# dark_mode_icon %>
+            <div class="dark:hidden rounded-full ">
+              <svg xmlns="http://www.w3.org/2000/svg"   version="1.1" width="20" height="20" viewBox="0 0 256 256" xml:space="preserve" >
+              <g style="" transform="translate(1.4065934065934016 1.4065934065934016) scale(2.81 2.81)" >
+                <path d="M 87.823 60.7 c -0.463 -0.423 -1.142 -0.506 -1.695 -0.214 c -15.834 8.398 -35.266 2.812 -44.232 -12.718 c -8.966 -15.53 -4.09 -35.149 11.101 -44.665 c 0.531 -0.332 0.796 -0.963 0.661 -1.574 c -0.134 -0.612 -0.638 -1.074 -1.259 -1.153 c -9.843 -1.265 -19.59 0.692 -28.193 5.66 C 13.8 12.041 6.356 21.743 3.246 33.35 S 1.732 57.08 7.741 67.487 c 6.008 10.407 15.709 17.851 27.316 20.961 C 38.933 89.486 42.866 90 46.774 90 c 7.795 0 15.489 -2.044 22.42 -6.046 c 8.601 -4.966 15.171 -12.43 18.997 -21.586 C 88.433 61.79 88.285 61.123 87.823 60.7 z" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(0,0,0); fill-rule: nonzero; opacity: 1;" transform=" matrix(1 0 0 1 0 0) " stroke-linecap="round" />
+              </g>
+              </svg>
+            </div>
+              <%# light_mode_icon %>
+            <div class="hidden dark:block">
+              <svg version="1.1" width="16" height="16" viewBox="0 0 256 256" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
+              <g transform="translate(1.4066 1.4066) scale(2.81)" stroke-linecap="round">
+                <path d="m89 46h-10.37c-0.553 0-1-0.448-1-1s0.447-1 1-1h10.37c0.553 0 1 0.448 1 1s-0.447 1-1 1z"/>
+                <path d="m11.37 46h-10.37c-0.552 0-1-0.448-1-1s0.448-1 1-1h10.37c0.552 0 1 0.448 1 1s-0.448 1-1 1z"/>
+                <path d="m45 12.37c-0.552 0-1-0.448-1-1v-10.37c0-0.552 0.448-1 1-1s1 0.448 1 1v10.37c0 0.552-0.448 1-1 1z"/>
+                <path d="m45 90c-0.552 0-1-0.447-1-1v-10.37c0-0.553 0.448-1 1-1s1 0.447 1 1v10.37c0 0.553-0.448 1-1 1z"/>
+                <path d="m76.112 77.112c-0.256 0-0.512-0.098-0.707-0.293l-7.332-7.332c-0.391-0.391-0.391-1.023 0-1.414s1.023-0.391 1.414 0l7.332 7.332c0.391 0.391 0.391 1.023 0 1.414-0.195 0.196-0.451 0.293-0.707 0.293z"/>
+                <path d="m21.22 22.22c-0.256 0-0.512-0.098-0.707-0.293l-7.333-7.333c-0.391-0.391-0.391-1.023 0-1.414s1.023-0.391 1.414 0l7.333 7.333c0.391 0.391 0.391 1.023 0 1.414-0.196 0.195-0.451 0.293-0.707 0.293z"/>
+                <path d="m68.78 22.22c-0.256 0-0.512-0.098-0.707-0.293-0.391-0.391-0.391-1.023 0-1.414l7.332-7.333c0.391-0.391 1.023-0.391 1.414 0s0.391 1.023 0 1.414l-7.332 7.333c-0.195 0.195-0.451 0.293-0.707 0.293z"/>
+                <path d="m13.887 77.112c-0.256 0-0.512-0.098-0.707-0.293-0.391-0.391-0.391-1.023 0-1.414l7.333-7.332c0.391-0.391 1.023-0.391 1.414 0s0.391 1.023 0 1.414l-7.333 7.332c-0.195 0.196-0.451 0.293-0.707 0.293z"/>
+                <path d="m45 65.478c-11.292 0-20.478-9.187-20.478-20.478 0-11.292 9.186-20.478 20.478-20.478 11.291 0 20.478 9.186 20.478 20.478 0 11.291-9.187 20.478-20.478 20.478zm0-38.956c-10.188 0-18.478 8.289-18.478 18.478s8.29 18.478 18.478 18.478 18.478-8.29 18.478-18.478-8.29-18.478-18.478-18.478z"/>
+              </g>
+              </svg>
+            </div>
+        </button>
+
         <a class="group" href="https://www.github.com/onebusaway/onebusaway-docs" title="Edit this Page">
           <svg viewBox="0 0 20 20" aria-hidden="true" class="h-5 w-5 fill-zinc-700 dark:fill-zinc-200 transition group-hover:fill-zinc-900 dark:group-hover:fill-zinc-50">
             <path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.667c-4.605 0-8.334 3.823-8.334 8.544 0 3.78 2.385 6.974 5.698 8.106.417.075.573-.182.573-.406 0-.203-.011-.875-.011-1.592-2.093.397-2.635-.522-2.802-1.002-.094-.246-.5-1.005-.854-1.207-.291-.16-.708-.556-.01-.567.656-.01 1.124.62 1.281.876.75 1.292 1.948.93 2.427.705.073-.555.291-.93.531-1.143-1.854-.213-3.791-.95-3.791-4.218 0-.929.322-1.698.854-2.296-.083-.214-.375-1.09.083-2.265 0 0 .698-.224 2.292.876a7.576 7.576 0 0 1 2.083-.288c.709 0 1.417.096 2.084.288 1.593-1.11 2.291-.875 2.291-.875.459 1.174.167 2.05.084 2.263.53.599.854 1.357.854 2.297 0 3.278-1.948 4.005-3.802 4.219.302.266.563.78.563 1.58 0 1.143-.011 2.061-.011 2.35 0 .224.156.491.573.405a8.365 8.365 0 0 0 4.11-3.116 8.707 8.707 0 0 0 1.567-4.99c0-4.721-3.73-8.545-8.334-8.545Z"></path>
           </svg>
         </a>
+
       </div>
     </nav>
   </div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     './src/**/*.{html,md,liquid,erb,serb,rb}',
     './frontend/javascript/**/*.js',
   ],
+  darkMode: 'selector',
   theme: {
     fontSize: {
       '2xs': ['0.75rem', { lineHeight: '1.25rem' }],