Add dark mode (#24)

Adds a dark mode option. Enable with `--dark-mode`. ![image](https://user-images.githubusercontent.com/8276147/215351169-d29dc7e0-ebdb-4e56-b897-02acb151d367.png) --------- Signed-off-by: Georgia Stuart <[email protected]>
georgiastuart · Jan 29, 2023 · 0fbcbf2 · 0fbcbf2
1 parent 16ffd16
commit 0fbcbf2
Show file tree

Hide file tree

Showing 19 changed files with 68 additions and 50 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -29,6 +29,7 @@ jobs:
           - {arg: "--journals-per-page=1", suffix: "-full-pg-journal"}
           - {arg: "--journals-per-page=2", suffix: "-half-pg-journal"}
           - {arg: "--journals-per-page=4", suffix: "-quarter-pg-journal"}
+        dark-mode: [{arg: "--dark-mode", suffix: "-dark-mode"}, {arg: "--no-dark-mode", suffix: ""}]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -47,12 +48,12 @@ jobs:
       - name: Install playwright browsers
         run: playwright install
       - name: Build planner pages 
-        run: npm run build -- ${{ matrix.date-ranges.arg }} ${{ matrix.personal-goals.arg }} ${{ matrix.work-goals.arg }} ${{ matrix.daily-pages.arg }} ${{ matrix.weekly-pages.arg }} ${{ matrix.journal-pages.arg }} --file-suffix="-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}"
+        run: npm run build -- ${{ matrix.date-ranges.arg }} ${{ matrix.personal-goals.arg }} ${{ matrix.work-goals.arg }} ${{ matrix.daily-pages.arg }} ${{ matrix.weekly-pages.arg }} ${{ matrix.journal-pages.arg }} ${{ matrix.dark-mode.arg }} --file-suffix="-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}${{ matrix.dark-mode.suffix }}"
       - name: Upload planner pdf to artifacts
         uses: actions/upload-artifact@v3
         with:
-          name: planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}.pdf
-          path: dest/planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}.pdf
+          name: planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}${{ matrix.dark-mode.suffix }}.pdf
+          path: dest/planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}${{ matrix.dark-mode.suffix }}.pdf
   deploy:
     needs: build
     runs-on: ubuntu-latest

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -11,7 +11,7 @@ jobs:
       fail-fast: false
       matrix:
         python-version: ["3.10"]
-        date-ranges: [{arg: "2022-11-01 2022-12-31", suffix: "2022-nov-dec"}]
+        date-ranges: [{arg: "2023-02-01 2023-02-28", suffix: "2023-feb"}]
         personal-goals: [{arg: "--personal-goals", suffix: ""}, {arg: "--no-personal-goals", suffix: "-no-personal-goals"}]
         work-goals: [{arg: "--work-goals", suffix: ""}, {arg: "--no-work-goals", suffix: "-no-work-goals"}]
         daily-pages: [{arg: "--daily-pages", suffix: ""}, {arg: "--no-daily-pages", suffix: "-no-daily"}]
@@ -21,6 +21,7 @@ jobs:
           - {arg: "--journals-per-page=1", suffix: "-full-pg-journal"}
           - {arg: "--journals-per-page=2", suffix: "-half-pg-journal"}
           - {arg: "--journals-per-page=4", suffix: "-quarter-pg-journal"}
+        dark-mode: [{arg: "--dark-mode", suffix: "-dark-mode"}, {arg: "--no-dark-mode", suffix: ""}]
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -39,9 +40,9 @@ jobs:
       - name: Install playwright browsers
         run: playwright install
       - name: Build planner pages 
-        run: npm run build -- ${{ matrix.date-ranges.arg }} ${{ matrix.personal-goals.arg }} ${{ matrix.work-goals.arg }} ${{ matrix.daily-pages.arg }} ${{ matrix.weekly-pages.arg }} ${{ matrix.journal-pages.arg }} --file-suffix="-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}"
+        run: npm run build -- ${{ matrix.date-ranges.arg }} ${{ matrix.personal-goals.arg }} ${{ matrix.work-goals.arg }} ${{ matrix.daily-pages.arg }} ${{ matrix.weekly-pages.arg }} ${{ matrix.journal-pages.arg }} ${{ matrix.dark-mode.arg }} --file-suffix="-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}${{ matrix.dark-mode.suffix }}"
       - name: Upload planner pdf to artifacts
         uses: actions/upload-artifact@v3
         with:
-          name: planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}.pdf
-          path: dest/planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}.pdf
+          name: planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}${{ matrix.dark-mode.suffix }}.pdf
+          path: dest/planner-${{ matrix.date-ranges.suffix }}${{ matrix.daily-pages.suffix }}${{ matrix.weekly-pages.suffix }}${{ matrix.personal-goals.suffix }}${{ matrix.work-goals.suffix }}${{ matrix.journal-pages.suffix }}${{ matrix.dark-mode.suffix }}.pdf
diff --git a/README.md b/README.md
@@ -90,7 +90,7 @@ technique, set margins to none and enable background images.
 
 ```
 usage: Python Planner Generator [-h] [--start-time START_TIME] [--end-time END_TIME] [--file-suffix FILE_SUFFIX] [--work-goals | --no-work-goals] [--personal-goals | --no-personal-goals]
-                                [--daily-pages | --no-daily-pages] [--weekly-pages | --no-weekly-pages] [--journals-per-page {0,1,2,4}]
+                                [--daily-pages | --no-daily-pages] [--weekly-pages | --no-weekly-pages] [--journals-per-page {0,1,2,4}] [--dark-mode | --no-dark-mode]
                                 start end
 
 GoodNotes 5 Optimized PDF Planner
@@ -111,4 +111,5 @@ options:
   --daily-pages, --no-daily-pages
   --weekly-pages, --no-weekly-pages
   --journals-per-page {0,1,2,4}
+  --dark-mode, --no-dark-mode
 ```
diff --git a/src/generator.py b/src/generator.py
@@ -16,10 +16,13 @@ def generate_html(planner_html, out_file):
   with open(out_file, 'w') as fp:
     fp.write(planner_html)
 
-def generate_pdf(html_file, css_file, out_file):
+def generate_pdf(html_file, css_file, out_file, dark_mode: bool):
   with sync_playwright() as p:
     browser = p.chromium.launch()
-    page = browser.new_page()
+    if dark_mode:
+      page = browser.new_page(color_scheme='dark')
+    else:
+      page = browser.new_page(color_scheme='light')
     page.goto(f"file://{abspath(html_file)}")
     page.add_style_tag(path=abspath(css_file))
     page.pdf(path=abspath(out_file), width='18.83in', height='11.77in', print_background=True)
@@ -319,6 +322,7 @@ def build_journal_page(inp_date, j2_template: j2.Template):
   parser.add_argument('--daily-pages', action=BooleanOptionalAction, default=True) 
   parser.add_argument('--weekly-pages', action=BooleanOptionalAction, default=True) 
   parser.add_argument('--journals-per-page', default=0, type=int, choices=[0, 1, 2, 4])
+  parser.add_argument('--dark-mode', action=BooleanOptionalAction, default=False)
 
   args = parser.parse_args()
 
@@ -371,4 +375,4 @@ def build_journal_page(inp_date, j2_template: j2.Template):
   planner = build_planner(pages, env)
 
   generate_html(planner, f'./dest/index{args.file_suffix}.html')
-  generate_pdf(f'dest/index{args.file_suffix}.html', f'dest/main.css', f'dest/planner{args.file_suffix}.pdf')
+  generate_pdf(f'dest/index{args.file_suffix}.html', f'dest/main.css', f'dest/planner{args.file_suffix}.pdf', args.dark_mode)
diff --git a/src/input.css b/src/input.css
@@ -26,12 +26,16 @@
   @apply font-playfair text-2xl h-5mm items-center text-center;
 }
 
+.mini-cal-date-outside {
+  @apply mini-cal-date text-slate-300 dark:text-zinc-600;
+}
+
 .monthly-cal-day {
   @apply flex-grow flex font-bold font-playfair text-2xl h-10mm items-end justify-center text-center pb-2;
 }
 
 .monthly-cal-date {
-  @apply font-bold font-playfair text-2xl border-t border-l border-slate-800 pl-2 pb-2;
+  @apply font-bold font-playfair text-2xl border-t border-l border-slate-800 dark:border-zinc-400 pl-2 pb-2;
 }
 
 .monthly-cal .monthly-cal-date:nth-child(7n) {
@@ -69,3 +73,7 @@
 .reflection-header {
   @apply font-bold font-playfair text-4xl flex h-5mm items-center;
 }
+
+.lines {
+  @apply border-b border-slate-800 dark:border-zinc-400;
+}
diff --git a/src/templates/annual_goals.html.j2 b/src/templates/annual_goals.html.j2
@@ -5,7 +5,7 @@
 <div class="flex flex-col">
 <div class="area-header flex items-center"><div class="align-middle"><i class="{{ area[1] }} pr-2 text-2xl"></div></i><div>{{ area[0].lower() }}</div></div>
 {% for i in range(10) %}
-<div class="border-b border-slate-800 h-5mm"></div>
+<div class="lines h-5mm"></div>
 {% endfor %}
 </div>
 {% endfor %}

diff --git a/src/templates/annual_overview.html.j2 b/src/templates/annual_overview.html.j2
@@ -2,7 +2,7 @@
   <div class="flex flex-col">
     <div class="annual-title"><div class="mx-auto">{{ year }}</div></div>
     {% for i in range(25) %}
-      <div class="border-b border-slate-800 h-5mm"></div>
+      <div class="lines h-5mm"></div>
     {% endfor %}
     </div>
   <div class="col-span-4">
@@ -24,7 +24,7 @@
           {% if cal_date[2] %}
           <div class="mini-cal-date"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
           {% else %}
-          <div class="mini-cal-date text-slate-300"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
+          <div class="mini-cal-date-outside"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
           {% endif %}
           {% endfor %}
       </div>

diff --git a/src/templates/daily.html.j2 b/src/templates/daily.html.j2
@@ -1,4 +1,4 @@
-<div class="px-4 pb-4 border-b border-slate-800 text-6xl flex font-playfair font-bold">
+<div class="px-4 pb-4 lines text-6xl flex font-playfair font-bold">
 <a class="pr-2" href="#{{ date.strftime('%Y-%m') }}">{{ date.strftime('%-d %B ').lower() }}</a>
 <a href="#{{ date.strftime('%Y') }}">{{ date.strftime('%Y').lower() }}</a>
 <span class="flex-grow inline-block"></span>
@@ -10,9 +10,9 @@
       <div class="mx-auto">agenda</div>
     </div>
     {% for time in times %}
-    <div class="h-5mm border-b border-slate-800 pb-1 font-playfair text-base font-bold flex items-center"><div>{{ time }}</div></div>
+    <div class="h-5mm lines pb-1 font-playfair text-base font-bold flex items-center"><div>{{ time }}</div></div>
     {% if not loop.last %}
-    <div class="h-5mm border-b border-slate-800"></div>
+    <div class="h-5mm lines"></div>
     {% endif %}
     {% endfor %}
   </div>
@@ -22,7 +22,7 @@
       <div class="mx-auto">highlight</div>
     </div>
     {% for i in range(2) %}
-    <div class="h-5mm border-b border-slate-800"></div>
+    <div class="h-5mm lines"></div>
     {% endfor %}
     <div class="daily-heading">
       <div class="mx-auto">to do</div>
@@ -31,8 +31,8 @@
       {% for i in range(2) %} 
       <div>
       {% for j in range(10) %}
-      <div class="h-5mm border-b border-slate-800 flex items-center">
-        <div class="h-4 w-4 rounded-full border border-slate-800"></div>
+      <div class="h-5mm lines flex items-center">
+        <div class="h-4 w-4 rounded-full border border-slate-800 dark:border-white"></div>
       </div>
       {% endfor %}
       </div>
@@ -43,14 +43,14 @@
       <div class="flex flex-col">
         <div class="daily-heading"><div class="mx-auto">food</div></div>
         {% for i in range(7) %}
-        <div class="h-5mm border-b border-slate-800"></div>
+        <div class="h-5mm lines"></div>
         {% endfor %}
       </div>
 
       <div class="flex flex-col">
         <div class="daily-heading"><div class="mx-auto">learned today</div></div>
         {% for i in range(7) %}
-        <div class="h-5mm border-b border-slate-800"></div>
+        <div class="h-5mm lines"></div>
         {% endfor %}
       </div>
     </div>
@@ -59,7 +59,7 @@
   <div class="flex flex-col">
     <div class="daily-heading"><div class="mx-auto">notes</div></div>
     {% for i in range(14 - ((mini_cal|length) // 7 % 5)) %}
-    <div class="h-5mm border-b border-slate-800"></div>
+    <div class="h-5mm lines"></div>
     {% endfor %}
     <div class="daily-heading"><div class="mx-auto">
       <a href="#{{ date.strftime('%Y-%m') }}">{{ date.strftime('%B').lower() }}</a>
@@ -75,12 +75,12 @@
         {% for cal_date in mini_cal %}
         {% if cal_date[2] %}
         {% if cal_date[1] == date.strftime('%Y-%m-%d') %}
-        <div class="mini-cal-date"><div class="bg-slate-200 aspect-square h-full rounded-full mx-auto"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div></div>
+        <div class="mini-cal-date"><div class="bg-slate-200 dark:bg-zinc-700 aspect-square h-full rounded-full mx-auto"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div></div>
         {% else %}
         <div class="mini-cal-date"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
         {% endif %}
         {% else %}
-        <div class="mini-cal-date text-slate-300"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
+        <div class="mini-cal-date text-slate-300 dark:text-zinc-600"><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
         {% endif %}
         {% endfor %}
     </div>

diff --git a/src/templates/frame.html.j2 b/src/templates/frame.html.j2
@@ -2,7 +2,7 @@
   <div class="m-6">
   {{ content|safe }}
   </div>
-  <div class="absolute bottom-0 right-0 text-slate-300 text-2xl pr-6">  
+  <div class="absolute bottom-0 right-0 text-slate-300 dark:text-zinc-600 text-2xl pr-6">  
   {% if journal_link %}
   <a href="#{{ journal_link }}"><i class="fa-solid fa-book pl-2"></i></a>
   {% endif %}

diff --git a/src/templates/full_planner.html.j2 b/src/templates/full_planner.html.j2
@@ -11,7 +11,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
     <script src="https://kit.fontawesome.com/dc644d3ad5.js" crossorigin="anonymous"></script>
   </head>
-  <body class="text-slate-800">
+  <body class="text-slate-800 dark:text-white dark:bg-zinc-800">
     {% for page in pages %}
       {{ page|safe }}
     {% endfor %}

diff --git a/src/templates/journal_pages.html.j2 b/src/templates/journal_pages.html.j2
@@ -8,17 +8,17 @@
             <a href="#{{ days[0].strftime('%Y-W%W')}}">{{ days[0].strftime('W%-W').lower() }}</a>
           </div>
         </div>
-        <div class="border-y border-slate-800 h-5mm flex items-center">
+        <div class="border-y border-slate-800 dark:border-white h-5mm flex items-center">
           {% include "snippets/journal_icons.html" %}
         </div>
         {% for i in range(lines[journals_per_page]) %}
-        <div class="border-b border-slate-800 h-5mm"></div>
+        <div class="lines h-5mm"></div>
         {% endfor %}
       </div>
       <div>
         <div class="h-5mm"></div>
         {% for i in range(lines[journals_per_page] + 2) %}
-        <div class="border-b border-slate-800 h-5mm"></div>
+        <div class="lines h-5mm"></div>
         {% endfor %}
       </div>
     </div>
@@ -32,11 +32,11 @@
               <a href="#{{ day.strftime('%Y-W%W')}}">{{ day.strftime('W%-W').lower() }}</a>
             </div>
           </div>
-          <div class="border-y border-slate-800 h-5mm flex items-center">
+          <div class="border-y border-slate-800 dark:border-white h-5mm flex items-center">
             {% include "snippets/journal_icons.html" %}
           </div>
           {% for i in range(lines[journals_per_page]) %}
-          <div class="border-b border-slate-800 h-5mm"></div>
+          <div class="lines h-5mm"></div>
           {% endfor %}
         </div>
       {% endfor %}

diff --git a/src/templates/monthly.html.j2 b/src/templates/monthly.html.j2
@@ -4,7 +4,7 @@
   <a href="#{{ month.strftime('%Y') }}">{{ month.strftime('%b %Y').lower() }}</a>
   </div>
   {% for i in range(24) %}
-  <div class="border-b border-slate-800 h-5mm"></div>
+  <div class="lines h-5mm"></div>
   {% endfor %}
 </div>
 <div class="col-span-7">
@@ -22,23 +22,23 @@
     <div><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
     <div class="flex-grow"></div>
     {% if loop.index0 % 7 == 0 %}
-    <div class="text-base text-slate-300"><a href="#{{ cal_date[4] }}">{{ cal_date[3] }}</a></div>
+    <div class="text-base text-slate-300 dark:text-zinc-600"><a href="#{{ cal_date[4] }}">{{ cal_date[3] }}</a></div>
     {% endif %}
     </div>
     {% else %}
-    <div class="monthly-cal-date h-20mm flex flex-col text-slate-300">
+    <div class="monthly-cal-date h-20mm flex flex-col text-slate-300 dark:text-zinc-600">
     <div><a href="#{{ cal_date[1] }}">{{ cal_date[0] }}</a></div>
     <div class="flex-grow"></div>
     {% if loop.index0 % 7 == 0 %}
-    <div class="text-base text-slate-300"><a href="#{{ cal_date[4] }}">{{ cal_date[3] }}</a></div>
+    <div class="text-base text-slate-300 dark:text-zinc-600"><a href="#{{ cal_date[4] }}">{{ cal_date[3] }}</a></div>
     {% endif %}
     </div>
     {% endif %}
     {% endfor %}
 </div>
 {% if mini_cal|length // 7 < 6 %}
 {% for i in range(4) %}
-<div class="h-5mm border-b border-slate-800"></div>
+<div class="h-5mm lines"></div>
 {% endfor %}
 {% endif %}
 </div>

diff --git a/src/templates/monthly_goals.html.j2 b/src/templates/monthly_goals.html.j2
@@ -5,7 +5,7 @@
 <div class="flex flex-col">
 <div class="area-header flex items-center"><div class="align-middle"><i class="{{ area[1] }} pr-2 text-2xl"></div></i><div>{{ area[0].lower() }}</div></div>
 {% for i in range(10) %}
-<div class="border-b border-slate-800 h-5mm"></div>
+<div class="lines h-5mm"></div>
 {% endfor %}
 </div>
 {% endfor %}

diff --git a/src/templates/monthly_work_goals.html.j2 b/src/templates/monthly_work_goals.html.j2
@@ -1,6 +1,6 @@
 <div class="flex flex-col">
 <div class="annual-goals-header"><div class="mx-auto"><a href="#{{ first.strftime('%Y-%m') }}">{{ first.strftime('%B %Y').lower() }} work goals</a></div></div>
 {% for i in range(22) %}
-<div class="border-b border-slate-800 h-5mm"></div>
+<div class="lines h-5mm"></div>
 {% endfor %}
 </div>
diff --git a/src/templates/snippets/journal_icons.html b/src/templates/snippets/journal_icons.html
@@ -1,5 +1,5 @@
 <div class="flex-grow grid grid-cols-2">
-  <div class="flex-grow flex justify-around border-r-2 border-slate-800 text-xl">
+  <div class="flex-grow flex justify-around border-r-2 border-slate-800 dark:border-white text-xl">
     <i class="fa-regular fa-face-smile"></i>
     <i class="fa-regular fa-face-grin-beam"></i>
     <i class="fa-regular fa-face-meh"></i>

diff --git a/src/templates/weekly.html.j2 b/src/templates/weekly.html.j2
@@ -3,15 +3,15 @@
   <div class="weekly-day-heading mx-auto">{{ days[0].strftime('%Y W%-W') }}</div>
   <div class="weekly-day-heading mx-auto"><a href="#{{ days[0].strftime('%Y-%m') }}">{{ days[0].strftime('%B').lower() }}</a></div>
   {% for i in range(13) %}
-  <div class="h-5mm border-b border-slate-800"></div>
+  <div class="h-5mm lines"></div>
   {% endfor %}
   <div class="weekly-day-heading mx-auto">habits</div>
   {% for i in range(5) %}
-  <div class="h-5mm border-b border-slate-800"></div>
+  <div class="h-5mm lines"></div>
   <div class="grid grid-cols-7 h-5mm">
     {% for day in ['m', 't', 'w', 't', 'f', 's', 's'] %}
     <div class="flex items-center">
-      <div class="h-6 mx-auto w-6 bg-slate-200 rounded-full font-playfair font-bold text-center text-slate-400">{{ day }}</div>
+      <div class="h-6 mx-auto w-6 bg-slate-200 dark:bg-zinc-600 rounded-full font-playfair font-bold text-center text-slate-400 dark:text-white">{{ day }}</div>
     </div>
     {% endfor %}
   </div>
@@ -21,9 +21,9 @@
 <div class="flex flex-col">
 <div class="weekly-day-heading mx-auto"><a href="#{{ days[i].strftime('%Y-%m-%d') }}">{{ days[i].strftime('%-d %a').lower() }}</a></div>
 {% for time in times %}
-<div class="h-5mm border-b border-slate-800 pb-1 font-playfair text-base font-bold flex items-center text-slate-300"><div>{{ time }}</div></div>
+<div class="h-5mm lines pb-1 font-playfair text-base font-bold flex items-center text-slate-300 dark:text-zinc-600"><div>{{ time }}</div></div>
 {% if not loop.last %}
-<div class="h-5mm border-b border-slate-800"></div>
+<div class="h-5mm lines"></div>
 {% endif %}
 {% endfor %}
 </div>