Add dark mode + fix logo centering bug

sergi0g commented 2 months ago

Hey @JonasHiltl! I really liked your project!

To make it even better, I believe it needs dark mode.

This pull request:

Adds dark mode
Fixes a bug where the logo is not centered when a link is provided

Here's a preview:

If you have any questions, feel free to ask!

JonasHiltl commented 2 months ago

@sergi0g thanks, nice PR! In the future I want the dark mode to be configurable through the config, e.g. dark, light, automatic. But for the mean time having automatic dark mode is good. LGTM

JonasHiltl commented 2 months ago

I have created the 0.1.3 release which includes this PR

sergi0g commented 2 months ago

Hello @JonasHiltl!

Thanks for merging my PR!

In the future I want the dark mode to be configurable through the config, e.g. dark, light, automatic. But for the mean time having automatic dark mode is good.

I wish I could do that myself, but my Go skills are pretty bad at the moment. If and when you decide to implement the config, here are my suggested changes:

$ git diff internal/handler/web/tailwind.config.js internal/handler/web/views/layout/main.templ 
diff --git a/internal/handler/web/tailwind.config.js b/internal/handler/web/tailwind.config.js
index 0f03f79..1659abe 100644
--- a/internal/handler/web/tailwind.config.js
+++ b/internal/handler/web/tailwind.config.js
@@ -19,5 +19,6 @@ module.exports = {
   plugins: [
     require('@tailwindcss/typography'),
   ],
+  darkMode: 'selector',
 }

diff --git a/internal/handler/web/views/layout/main.templ b/internal/handler/web/views/layout/main.templ
index 5de27f3..5fb8185 100644
--- a/internal/handler/web/views/layout/main.templ
+++ b/internal/handler/web/views/layout/main.templ
@@ -3,6 +3,7 @@ package layout
 type MainArgs struct {
        Title string
        Description string
+       Theme string
 }

 templ Main(args MainArgs) {
@@ -20,6 +21,15 @@ templ Main(args MainArgs) {
                        <link rel="stylesheet" type="text/css" media="screen" href="/static/base.css"/>
                        <link rel="stylesheet" href="https://rsms.me/inter/inter.css"/>
                        <script src="https://unpkg.com/htmx.org@1.9.12" integrity="sha384-ujb1lZYygJmzgSwoxRggbCHcjc0rB2XoQrxeTUQyRjrOnlCoYta87iKBWq3EsdM2" crossorigin="anonymous"></script>
+                       if args.Theme == "system" {
+                               <script>
+                               if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+                                       document.documentElement.classList.add('dark')
+                               }
+                               </script>
+                       } else if args.Theme == "dark" {
+                               document.documentElement.classList.add('dark')
+                       }
                </head>
                <body class="flex flex-col dark:bg-black">
                        { children... }

I'm not sure where to implement the config item (it looks like I have to add it in many places and I'm not that familiar with the codebase), so I'll leave it up to you!

JonasHiltl commented 2 months ago

@sergi0g Thanks for your suggestion, I will keep it in mind when implementing the config.

JonasHiltl / openchangelog

Add dark mode + fix logo centering bug #5