changed darkMode coloring to tw-zinc color

Rene-Roscher · Rene-Roscher · commit 3a5987414acf · 2023-02-13T05:17:24.000+01:00
diff --git a/.gitignore b/.gitignore
@@ -9,3 +9,4 @@
 .env
 .env.backup
 .phpunit.result.cache
+.idea
diff --git a/resources/css/_scroll.scss b/resources/css/_scroll.scss
@@ -0,0 +1,23 @@
+.light {
+  *::-webkit-scrollbar {
+    width: 13px;
+  }
+  *::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    @apply bg-gray-200/50 rounded-full border-solid border-white
+  }
+}
+
+.dark {
+  *::-webkit-scrollbar {
+    width: 13px;
+  }
+  *::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  *::-webkit-scrollbar-thumb {
+    @apply bg-zinc-800/50 rounded-full border-solid border-zinc-900
+  }
+}
diff --git a/resources/css/app.scss b/resources/css/app.scss
@@ -1,19 +1,22 @@
 @import 'https://github.com/tailwindcss/base';
+@import 'https://github.com/tailwindcss/components';
+@import 'https://github.com/tailwindcss/utilities';
+@import "scroll";
 
 .light {
     @import 'https://github.com/highlight.js/styles/a11y-light';
+    .hljs {
+        @apply bg-white;
+    }
 }
 
 .dark {
     @import 'https://github.com/highlight.js/styles/a11y-dark';
+    .hljs {
+        @apply bg-zinc-900;
+    }
 }
 
-@import 'https://github.com/tailwindcss/components';
-@import 'https://github.com/tailwindcss/utilities';
-
-.hljs {
-    @apply bg-white;
-}
 .hljs-ln td.hljs-ln-numbers {
     @apply text-gray-400 pr-3 inline-block w-full text-right;
 }
diff --git a/resources/views/_editor.blade.php b/resources/views/_editor.blade.php
@@ -1,6 +1,6 @@
 <div class="h-full font-mono text-sm">
     <textarea
-        name="code" class="dark:bg-dark text-gray-900 dark:text-white w-full h-full resize-none outline-none"
+        name="code" class="dark:bg-zinc-900 text-gray-900 dark:text-white w-full h-full resize-none outline-none"
         placeholder="<?php&#10;&#10;echo 'Share your snippet here!';"
     >{{ optional($paste ?? null)->code }}</textarea>
 </div>
diff --git a/resources/views/components/main.blade.php b/resources/views/components/main.blade.php
@@ -1,6 +1,6 @@
 <div class="flex flex-col min-w-0 flex-1 overflow-hidden">
     <div class="lg:hidden print:hidden">
-        <div class="flex items-center justify-between bg-gray-50 dark:bg-gray-700 border-b border-gray-200 dark:border-gray-900 px-4 py-1.5">
+        <div class="flex items-center justify-between bg-gray-50 dark:bg-zinc-800 border-b border-gray-200 dark:border-gray-900 px-4 py-1.5">
             <div>
                 <a href="{{ route('home') }}">
                     <img class="h-8 w-auto dark:hidden" src="{{ asset('images/laravelio-icon.svg') }}" alt="Laravel.io">
diff --git a/resources/views/components/nav.blade.php b/resources/views/components/nav.blade.php
@@ -13,7 +13,7 @@
         <div class="flex-1 w-14" aria-hidden="true">
             <!-- Force sidebar to shrink to fit close icon -->
         </div>
-        <div tabindex="0" class="origin-top-right relative shrink-0 flex flex-col max-w-xs w-full bg-gray-50 dark:bg-gray-700 focus:outline-none">
+        <div tabindex="0" class="origin-top-right relative shrink-0 flex flex-col max-w-xs w-full bg-gray-50 dark:bg-zinc-800 focus:outline-none">
             <div class="absolute top-0 left-0 -ml-12 pt-2">
                 <button
                     type="button"
@@ -36,7 +36,7 @@ class="ml-1 flex items-center justify-center h-10 w-10 rounded-full focus:outlin
 <div :class="{'hidden': !isOpen }" class="lg:flex lg:shrink-0 print:hidden">
     <div class="flex flex-col w-64">
         <!-- Sidebar component, swap this element with another sidebar if you like -->
-        <div class="flex flex-col h-0 flex-1 border-r border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-gray-700">
+        <div class="flex flex-col h-0 flex-1 border-r border-gray-200 dark:border-gray-900 bg-gray-50 dark:bg-zinc-800">
             <div class="flex-1 flex flex-col pt-8 pb-4 px-6 overflow-y-auto">
                 <x-sidebar>{!! $slot !!}</x-sidebar>
             </div>
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
@@ -29,7 +29,7 @@
     @include('layouts.favicons')
     @include('layouts.fathom')
 </head>
-<body class="dark:bg-dark">
+<body class="dark:bg-zinc-900">
 
 @yield('content')
 
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,9 +5,6 @@ module.exports = {
     darkMode: 'class',
     theme: {
         extend: {
-            colors: {
-                dark: '#2b2b2b',
-            },
             fontFamily: {
                 sans: ['Inter var', ...defaultTheme.fontFamily.sans],
             },

-Original file line number
+Diff line change
@@ @@ -1,19 +1,22 @@ @@
 @import 'tailwindcss/base';
 +@import 'tailwindcss/components';
 +@import 'tailwindcss/utilities';
 +@import "scroll";
 .light {
     @import 'highlight.js/styles/a11y-light';
 +    .hljs {
 +        @apply bg-white;
 +    }
+}
 .dark {
     @import 'highlight.js/styles/a11y-dark';
 +    .hljs {
 +        @apply bg-zinc-900;
 +    }
+}
 -@import 'tailwindcss/components';
 -@import 'tailwindcss/utilities';
+-
 -.hljs {
 -    @apply bg-white;
 -}
 .hljs-ln td.hljs-ln-numbers {
     @apply text-gray-400 pr-3 inline-block w-full text-right;
+}