modify styles when changing mode

ka215 · Jun 26, 2024 · 437c084 · 437c084
1 parent 0743335
commit 437c084
Show file tree

Hide file tree

Showing 12 changed files with 348 additions and 152 deletions.
diff --git a/dists/css/sunorhc.timeline.css b/dists/css/sunorhc.timeline.css
diff --git a/dists/css/sunorhc.timeline.css.gz b/dists/css/sunorhc.timeline.css.gz
diff --git a/dists/js/Tester.js.gz b/dists/js/Tester.js.gz
diff --git a/dists/js/sunorhc.timeline.js.gz b/dists/js/sunorhc.timeline.js.gz
diff --git a/docs/assets/css/custom-style.css b/docs/assets/css/custom-style.css
@@ -1,3 +1,51 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        --color-black:    #151513;
+        --color-gray-900: #111827;
+        --color-gray-800: #1F2937;
+        --color-gray-700: #374151;
+        --color-gray-600: #4B5563;
+        --color-gray-500: #6B7280;
+        --color-gray-400: #9CA3AF;
+        --color-gray-300: #D1D5DB;
+        --color-gray-200: #E5E7EB;
+        --color-gray-100: #F3F4F6;
+        --color-gray-50:  #F9FAFB;
+        --color-white:    #FFFFFF;
+        --custom-duration: 280ms;
+    }
+
+    html {
+        background-color: #FFFFFF;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-black:    #FFFFFF;
+        --color-gray-900: #F9FAFB;
+        --color-gray-800: #F3F4F6;
+        --color-gray-700: #E5E7EB;
+        --color-gray-600: #D1D5DB;
+        --color-gray-500: #9CA3AF;
+        --color-gray-400: #6B7280;
+        --color-gray-300: #4B5563;
+        --color-gray-200: #374151;
+        --color-gray-100: #1F2937;
+        --color-gray-50:  #111827;
+        --color-white:    #151513;
+        --custom-duration: 75ms;
+    }
+
+    html {
+        background-color: #151513;
+    }
+}
+
+body {
+    background-color: transparent;
+}
+
 .github-corner {
     position: fixed;
     top: 0;
@@ -79,49 +127,51 @@
 
 body:not(.darkmode--activated) .fill-black,
 body.darkmode--activated .dark\:fill-black {
-    fill: #151513;
+    fill: var(--color-black);
 }
 
 body:not(.darkmode--activated) .fill-white,
 body.darkmode--activated .dark\:fill-white {
-    fill: #fff;
+    fill: var(--color-white);
 }
 
 body.darkmode--activated .dark\:text-white {
-    color: #fff;
+    color: var(--color-white);
 }
 
 body.darkmode--activated .dark\:bg-gray-900 {
-    background-color: rgb(17 24 39 / 1);
+    background-color: var(--color-gray-900);
 }
 
 body.darkmode--activated .dark\:bg-gray-700 {
-    background-color: #374151;
+    background-color: var(--color-gray-700);
 }
 
 body.darkmode--activated option {
-    background-color: rgb(17 24 39 / 1);
-    color: #fff;
+    background-color: var(--color-gray-900);
+    color: var(--color-white);
 }
 
 body.darkmode--activated optgroup {
-    background-color: rgb(17 24 39 / 1);
-    color: #999;
+    background-color: var(--color-gray-900);
+    color: var(--color-gray-400);
     font-weight: 400;
 }
 
 body:not(.darkmode--activated) .custom-duration {
-    transition-duration: 280ms;
+    transition-duration: var(--custom-duration);
 }
 
 body.darkmode--activated .custom-duration {
-    transition-duration: 75ms;
+    transition-duration: var(--custom-duration);
 }
 
 body.darkmode--activated .dark\:placeholder-gray-400::placeholder {
-    color: #9CA3AF;
+    color: var(--color-gray-400);
 }
 
+/* For Sunorhc.Timeline components */
+
 .sunorhc-timeline-sidebar span[data-sidebar-item-type="avatar"] img {
     border-radius: 4px;
 }
@@ -136,11 +186,11 @@ body.darkmode--activated .dark\:placeholder-gray-400::placeholder {
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
-    border-color: #D1D5DB;
+    border-color: var(--color-gray-300);
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     font-size: 0.875rem;
     line-height: 1.25rem;
     text-align: left;
-    color: #374151;
-    background-color: #F3F4F6;
+    color: var(--color-gray-700);
+    background-color: var(--color-gray-100);
 }
diff --git a/docs/assets/css/sunorhc.timeline.css b/docs/assets/css/sunorhc.timeline.css
diff --git a/docs/index.html b/docs/index.html
@@ -12,16 +12,16 @@
     <link href="https://fonts.googleapis.com/css2?family=Material+Icons" rel="stylesheet">
     <link href="https://use.fontawesome.com/releases/v6.5.2/css/all.css" rel="stylesheet">
     <link rel="stylesheet" type="text/css" href="./assets/css/ress.css">
-    <link rel="stylesheet" type="text/css" href="./assets/css/sunorhc.timeline.css?0495e14bad24b5fb3c4df4878b546042">
-    <link rel="stylesheet" type="text/css" href="./assets/css/custom-style.css?4da040dee1e0399d890e4bee8f4471c1">
+    <link rel="stylesheet" type="text/css" href="./assets/css/sunorhc.timeline.css?3221c904e5f69bd9f1734897ee05f3f2">
+    <link rel="stylesheet" type="text/css" href="./assets/css/custom-style.css?f3d571e05a0ae3932c7f54a1aa3fa940">
 </head>
 <body class="flex flex-col justify-between">
     <header role="banner" class="p-4 w-full bg-white text-center dark:bg-gray-950">
         <h1 class="flex justify-center items-center mb-4 text-3xl font-extrabold tracking-tight leading-none text-gray-900 md:text-4xl lg:text-5xl dark:text-white clear-font">
             <img src="./sunorhc.svg" class="h-10 w-10 mr-2 fill-current">
             <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">Sunorhc.Timeline</span>
         </h1>
-        <p class="mb-3 text-lg font-normal text-gray-900 lg:text-xl sm:px-16 xl:px-48 dark:text-white clear-font">
+        <p class="mb-3 text-lg font-normal text-gray-900 lg:text-xl sm:px-16 xl:px-48 clear-font">
             See the future, reflect on the past. Control time with <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">Sunorhc.Timeline</span>.
         </p>
         <p class="text-md font-normal text-gray-700 sm:px-16 xl:px-48 dark:text-gray-200 clear-font">
@@ -82,7 +82,7 @@ <h1 class="flex justify-center items-center mb-4 text-3xl font-extrabold trackin
         </div>
         <div id="sunorhc-timeline-tester"></div>
     </main>
-    
+
     <footer role="contentinfo" class="p-4 pb-8 w-full bg-white select-none dark:bg-gray-950">
       <hr class="my-6 h-px border-t-0 bg-transparent bg-gradient-to-r from-transparent via-neutral-500 to-transparent opacity-25 dark:via-neutral-400" />
       <span class="block text-sm text-gray-500 sm:text-center dark:text-gray-300 clear-font">
@@ -121,8 +121,27 @@ <h3 id="tester-modal-headline" class="text-xl font-medium text-gray-900 dark:tex
     <script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.7/lib/darkmode-js.min.js"></script>
     <script>new Darkmode({ bottom: '20px', right: '20px', left: 'unset', time: '0.3s', mixColor: '#fff', backgroundColor: '#fff', buttonColorDark: '#3f3f46', buttonColorLight: '#f4f4f5', saveInCookies: false, label: '🌓', autoMatchOsTheme: true }).showWidget()</script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.3.0/flowbite.min.js"></script>
-    <script src="./assets/js/sunorhc.timeline.js?8cdf108b11a53be0d2daea4381a5859f" type="application/javascript"></script>
+    <script src="./assets/js/sunorhc.timeline.js?8cdf108b11a53be0d2daea4381a5859f"></script>
     <script>
+/**
+ * Returns the elements of a given array depending on the browser window size.
+ * @param {any[]} vars
+ * @returns {any}
+ */
+function updateSizeVariable(vars) {
+  const width = window.innerWidth
+  if (width <= 600) {
+    // for small size as likes smart device.
+    return vars[0]
+  } else if (width <= 1024) {
+    // for medium size as likes tablet device.
+    return vars[1]
+  } else {
+    // for large size as likes pc etc.
+    return vars[2]
+  }
+}
+
 /**
  * Gets the time in milliseconds according to the specified date and time scale.
  * @param {string} scale 
@@ -360,6 +379,8 @@ <h3 id="tester-modal-headline" class="text-xl font-medium text-gray-900 dark:tex
       const autoScale = 'day'
       const autoStartDate = new Date(new Date().getTime() - getScaleTime('month') / 2)
       const autoEndDate = new Date(new Date().getTime() + getScaleTime('month') / 2)
+      const autoSidebarPlacement = updateSizeVariable(['left', 'left', 'both'])
+      const autoRulerPlacement = updateSizeVariable(['top', 'top', 'both'])
       const timelineOptions = {
         start: autoStartDate,
         //start: new Date(new Date().setHours(new Date().getHours() - 1, 0, 0, 0)),// now before a hour
@@ -377,7 +398,7 @@ <h3 id="tester-modal-headline" class="text-xl font-medium text-gray-900 dark:tex
         //timezone: 'Asia/Tokyo',
         scale: autoScale,
         sidebar: {
-          placement: 'both',
+          placement: autoSidebarPlacement,
           items: ((sidebarType = 1) => {
             switch(sidebarType) {
               case 1: return [
@@ -413,7 +434,7 @@ <h3 id="tester-modal-headline" class="text-xl font-medium text-gray-900 dark:tex
           })()
         },
         ruler: {
-          placement: 'both',
+          placement: autoRulerPlacement,
           minGrainWidth: 60,
           truncateLowers: true,
           firstDayOfWeek: 0,
@@ -578,7 +599,7 @@ <h3 class=\"font-bold text-md text-cyan-500\">%label%</h3>\
         console.log('Success:', window.SunorhcTimelineInstances, onFulfilled.getOptions())
       })
     })();</script>
-    <script src="./assets/js/Tester.js?beac154933a942e0d913ecf92c74c159" type="application/javascript"></script>
+    <script src="./assets/js/Tester.js?beac154933a942e0d913ecf92c74c159"></script>
     <script>Sunorhc.setupTester(document.getElementById('sunorhc-timeline-tester'))</script>
     <script>
       globalThis.customFunction = (eventData) => {

diff --git a/index.html b/index.html
@@ -20,7 +20,7 @@ <h1 class="flex justify-center items-center mb-4 text-3xl font-extrabold trackin
         <img src="/sunorhc.svg" class="h-10 w-10 mr-2 fill-current">
         <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">Sunorhc.Timeline</span>
       </h1>
-      <p class="mb-3 text-lg font-normal text-gray-900 lg:text-xl sm:px-16 xl:px-48 dark:text-white clear-font">
+      <p class="mb-3 text-lg font-normal text-gray-900 lg:text-xl sm:px-16 xl:px-48 clear-font">
         See the future, reflect on the past. Control time with <span class="text-transparent bg-clip-text bg-gradient-to-r to-emerald-600 from-sky-400">Sunorhc.Timeline</span>.
       </p>
       <p class="text-md font-normal text-gray-700 sm:px-16 xl:px-48 dark:text-gray-200 clear-font">

diff --git a/public/custom-style.css b/public/custom-style.css
@@ -1,3 +1,51 @@
+@media (prefers-color-scheme: light) {
+    :root {
+        --color-black:    #151513;
+        --color-gray-900: #111827;
+        --color-gray-800: #1F2937;
+        --color-gray-700: #374151;
+        --color-gray-600: #4B5563;
+        --color-gray-500: #6B7280;
+        --color-gray-400: #9CA3AF;
+        --color-gray-300: #D1D5DB;
+        --color-gray-200: #E5E7EB;
+        --color-gray-100: #F3F4F6;
+        --color-gray-50:  #F9FAFB;
+        --color-white:    #FFFFFF;
+        --custom-duration: 280ms;
+    }
+
+    html {
+        background-color: #FFFFFF;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --color-black:    #FFFFFF;
+        --color-gray-900: #F9FAFB;
+        --color-gray-800: #F3F4F6;
+        --color-gray-700: #E5E7EB;
+        --color-gray-600: #D1D5DB;
+        --color-gray-500: #9CA3AF;
+        --color-gray-400: #6B7280;
+        --color-gray-300: #4B5563;
+        --color-gray-200: #374151;
+        --color-gray-100: #1F2937;
+        --color-gray-50:  #111827;
+        --color-white:    #151513;
+        --custom-duration: 75ms;
+    }
+
+    html {
+        background-color: #151513;
+    }
+}
+
+body {
+    background-color: transparent;
+}
+
 .github-corner {
     position: fixed;
     top: 0;
@@ -79,49 +127,51 @@
 
 body:not(.darkmode--activated) .fill-black,
 body.darkmode--activated .dark\:fill-black {
-    fill: #151513;
+    fill: var(--color-black);
 }
 
 body:not(.darkmode--activated) .fill-white,
 body.darkmode--activated .dark\:fill-white {
-    fill: #fff;
+    fill: var(--color-white);
 }
 
 body.darkmode--activated .dark\:text-white {
-    color: #fff;
+    color: var(--color-white);
 }
 
 body.darkmode--activated .dark\:bg-gray-900 {
-    background-color: rgb(17 24 39 / 1);
+    background-color: var(--color-gray-900);
 }
 
 body.darkmode--activated .dark\:bg-gray-700 {
-    background-color: #374151;
+    background-color: var(--color-gray-700);
 }
 
 body.darkmode--activated option {
-    background-color: rgb(17 24 39 / 1);
-    color: #fff;
+    background-color: var(--color-gray-900);
+    color: var(--color-white);
 }
 
 body.darkmode--activated optgroup {
-    background-color: rgb(17 24 39 / 1);
-    color: #999;
+    background-color: var(--color-gray-900);
+    color: var(--color-gray-400);
     font-weight: 400;
 }
 
 body:not(.darkmode--activated) .custom-duration {
-    transition-duration: 280ms;
+    transition-duration: var(--custom-duration);
 }
 
 body.darkmode--activated .custom-duration {
-    transition-duration: 75ms;
+    transition-duration: var(--custom-duration);
 }
 
 body.darkmode--activated .dark\:placeholder-gray-400::placeholder {
-    color: #9CA3AF;
+    color: var(--color-gray-400);
 }
 
+/* For Sunorhc.Timeline components */
+
 .sunorhc-timeline-sidebar span[data-sidebar-item-type="avatar"] img {
     border-radius: 4px;
 }
@@ -136,11 +186,11 @@ body.darkmode--activated .dark\:placeholder-gray-400::placeholder {
     border-radius: 4px;
     border-style: solid;
     border-width: 1px;
-    border-color: #D1D5DB;
+    border-color: var(--color-gray-300);
     font-family: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
     font-size: 0.875rem;
     line-height: 1.25rem;
     text-align: left;
-    color: #374151;
-    background-color: #F3F4F6;
+    color: var(--color-gray-700);
+    background-color: var(--color-gray-100);
 }