From 0679d967c34c27faa590f131aea6da6c915aa58e Mon Sep 17 00:00:00 2001
From: Chris Kankiewicz <Chris@ChrisKankiewicz.com>
Date: Thu, 8 Dec 2022 08:41:36 -0700
Subject: [PATCH] Fixed code block colors in dark mode

---
 app/resources/js/app.js                    |  2 ++
 app/resources/js/components/Application.js |  8 +++-----
 app/resources/sass/app.scss                |  3 ---
 app/resources/sass/markdown.scss           | 12 ------------
 app/views/layouts/app.twig                 |  5 ++++-
 webpack.mix.js                             |  3 +++
 6 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/app/resources/js/app.js b/app/resources/js/app.js
index 24c535c..a51ec43 100644
--- a/app/resources/js/app.js
+++ b/app/resources/js/app.js
@@ -5,6 +5,8 @@ import hljs from 'highlight.js';
 import Application from './components/Application.js';
 import FileInfoModal from './components/FileInfoModal.js';
 
+Alpine.store('theme', 'light');
+
 Alpine.data('application', Application);
 Alpine.data('fileInfoModal', FileInfoModal);
 
diff --git a/app/resources/js/components/Application.js b/app/resources/js/components/Application.js
index 64f94fa..9f46389 100644
--- a/app/resources/js/components/Application.js
+++ b/app/resources/js/components/Application.js
@@ -1,18 +1,16 @@
 export default () => ({
-    theme: 'light',
-
     init() {
         const [cookie, theme] = document.cookie.match(/theme=(dark|light)/) || [null, null];
 
-        this.theme = theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
+        this.$store.theme = theme || (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
 
         if (cookie === undefined) {
-            this.storeThemeCookie(this.theme);
+            this.storeThemeCookie(this.$store.theme);
         }
     },
 
     toggleTheme() {
-        this.theme = this.theme == 'light' ? 'dark' : 'light';
+        this.$store.theme = this.$store.theme == 'light' ? 'dark' : 'light';
     },
 
     storeThemeCookie(theme) {
diff --git a/app/resources/sass/app.scss b/app/resources/sass/app.scss
index 7f6c62f..d07d299 100644
--- a/app/resources/sass/app.scss
+++ b/app/resources/sass/app.scss
@@ -7,9 +7,6 @@ $fa-font-path: "./webfonts";
 @import "~@fortawesome/fontawesome-free/scss/brands.scss";
 @import "~@fortawesome/fontawesome-free/scss/solid.scss";
 
-// Code highlighting
-@import "~highlight.js/scss/github.scss";
-
 // Fonts
 @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Work+Sans&display=swap");
 
diff --git a/app/resources/sass/markdown.scss b/app/resources/sass/markdown.scss
index 46f8f47..42bca0d 100644
--- a/app/resources/sass/markdown.scss
+++ b/app/resources/sass/markdown.scss
@@ -61,14 +61,6 @@
         @apply mt-4;
     }
 
-    code {
-        @apply bg-gray-200 rounded-sm font-mono p-1 overflow-y-auto;
-    }
-
-    pre > code {
-        @apply block p-4 text-sm whitespace-pre;
-    }
-
     hr {
         @apply border-t-2 border-gray-400 my-4;
     }
@@ -121,10 +113,6 @@
         @apply border-gray-800;
     }
 
-    code {
-        @apply bg-gray-800;
-    }
-
     hr {
         @apply border-gray-800;
     }
diff --git a/app/views/layouts/app.twig b/app/views/layouts/app.twig
index fe086fe..9c0b581 100644
--- a/app/views/layouts/app.twig
+++ b/app/views/layouts/app.twig
@@ -9,6 +9,9 @@
 <link rel="preconnect" href="https://fonts.gstatic.com">
 <link rel="stylesheet" href="{{ asset('app.css') }}">
 
+<link x-data rel="stylesheet" href="{{ asset('hljs-github.css') }}" :disabled="$store.theme !== 'light'">
+<link x-data rel="stylesheet" href="{{ asset('hljs-github-dark.css') }}" :disabled="$store.theme !== 'dark'">
+
 <script src="{{ asset('app.js') }}" defer></script>
 
 {% if config('google_analytics_id', false) %}
@@ -21,7 +24,7 @@
 
 <title>{{ title }} &bull; {{ config('site_title') }}</title>
 
-<div class="{{ theme }}" x-data="application" x-effect="storeThemeCookie(theme)" :class="{ 'dark': theme === 'dark' }">
+<div class="{{ theme }}" x-data="application" x-effect="storeThemeCookie($store.theme)" :class="{ 'dark': $store.theme === 'dark' }">
     <div class="flex flex-col min-h-screen font-sans dark:bg-gray-800">
         {% block content %}{% endblock %}
     </div>
diff --git a/webpack.mix.js b/webpack.mix.js
index 70e5f91..f0a369b 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -16,6 +16,9 @@ mix.js('app/resources/js/app.js', 'app/assets/app.js');
 
 mix.copyDirectory('app/resources/images', 'app/assets/images');
 
+mix.copy('node_modules/highlight.js/styles/github.css', 'app/assets/hljs-github.css');
+mix.copy('node_modules/highlight.js/styles/github-dark.css', 'app/assets/hljs-github-dark-dimmed.css');
+
 mix.copy(
     'node_modules/@fortawesome/fontawesome-free/webfonts/fa-{brands,solid}-*',
     'app/assets/webfonts'