Merge pull request #32 from dniccum/bugfix/light-mode-and-dark-mode-n…

…ot-functioning-properly Bugfix/light mode and dark mode not functioning properly
dniccum · Feb 28, 2023 · 8e05226 · 8e05226
2 parents c53f56a + 7f1d383
commit 8e05226
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 7 deletions.
diff --git a/dist/css/tool.css b/dist/css/tool.css
diff --git a/dist/js/tool.js b/dist/js/tool.js
diff --git a/resources/js/components/Sidebar.vue b/resources/js/components/Sidebar.vue
@@ -28,7 +28,7 @@
                 if ((item.route.length > 0 && this.$page.url.endsWith(item.route)) || item.isHome && this.$page.url.endsWith('documentation')) {
                     return 'doc-text-primary-500 hover:doc-text-primary-700';
                 } else {
-                    return 'doc-text-gray-300 dark:doc-text-gray-100 hover:doc-text-primary-200';
+                    return 'doc-text-gray-700 dark:doc-text-gray-100 hover:dark:doc-text-primary-200';
                 }
             },
             parseRoute(item) {

diff --git a/resources/js/pages/Tool.vue b/resources/js/pages/Tool.vue
@@ -60,11 +60,11 @@ export default {
                 break;
         }
 
-        setTimeout(() => {
+        document.addEventListener('DOMContentLoaded', (event) => {
             document.querySelectorAll('div.documentation-content pre code').forEach((block) => {
-                highlightjs.highlightElement(block);
+                highlightjs.highlightBlock(block);
             });
-        }, 500)
+        });
     },
     computed: {
         docPageTitle() {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -1,9 +1,17 @@
 // tailwind.config.js
 module.exports = {
     content: ["./resources/**/*.{vue,js,php}"],
+    safelist: [
+        'doc-text-primary-500',
+        'hover:doc-text-primary-700',
+        'doc-text-gray-700',
+        'dark:doc-text-gray-100',
+        'dark:hover:doc-text-primary-200',
+    ],
     corePlugins: {
         preflight: false,
     },
+    darkMode: 'media',
     theme: {
         extend: {
             colors: {
@@ -49,6 +57,9 @@ module.exports = {
                         h4: {
                             fontSize: '1.1em',
                         },
+                        h5: {
+                            fontSize: '1.03em',
+                        },
                         'p, ul, ol, h1, h2, h3': {
                             marginBottom: theme('spacing.3'),
                         },
@@ -115,7 +126,7 @@ module.exports = {
                 'invert': {
                     css: {
                         'h1, h2, h3': {
-                            'color': 'rgb(var(--colors-gray-100))',
+                            color: 'rgb(var(--colors-gray-100))',
                         },
                         'h4, h5, h6, ol, ul, p, blockquote': {
                             color: 'rgb(var(--colors-gray-300))',