style: fix dark mode for Lexique and more

components/global/Alert.vue

@@ -45,13 +45,12 @@ export default {
   @apply m-0 !important;
 }
 .alert a {
-  @apply text-gray-700 !important;
-}
-.dark-mode .alert a {
-  @apply text-gray-300 !important;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert strong {
-  @apply text-current;
+  @apply text-current !important;
+  filter: brightness(1.25);
 }
 .alert-content pre code {
   background-color: inherit !important;
@@ -69,13 +68,13 @@ export default {
 .alert-info .alert-content {
   @apply text-blue-700;
 }
-.dark-mode .alert-info {
+.dark .alert-info {
   @apply bg-blue-900 border-blue-700;
 }
-.dark-mode .alert-info code {
+.dark .alert-info code {
   @apply bg-blue-800;
 }
-.dark-mode .alert-info .alert-content {
+.dark .alert-info .alert-content {
   @apply text-blue-300;
 }
 /* Success */
@@ -91,13 +90,13 @@ export default {
 .alert-success .alert-content {
   @apply text-green-700;
 }
-.dark-mode .alert-success {
+.dark .alert-success {
   @apply bg-green-900 border-green-700;
 }
-.dark-mode .alert-success code {
+.dark .alert-success code {
   @apply bg-green-800;
 }
-.dark-mode .alert-success .alert-content {
+.dark .alert-success .alert-content {
   @apply text-green-300;
 }
 /* Warning */
@@ -113,13 +112,13 @@ export default {
 .alert-warning .alert-content {
   @apply text-yellow-700;
 }
-.dark-mode .alert-warning {
-  @apply bg-yellow-900 border-yellow-700;
+.dark .alert-warning {
+  @apply bg-yellow-800 border-yellow-600;
 }
-.dark-mode .alert-warning code {
+.dark .alert-warning code {
   @apply bg-yellow-800;
 }
-.dark-mode .alert-warning .alert-content {
+.dark .alert-warning .alert-content {
   @apply text-yellow-300;
 }
 /* Danger */
@@ -135,13 +134,13 @@ export default {
 .alert-danger .alert-content {
   @apply text-red-700;
 }
-.dark-mode .alert-danger {
+.dark .alert-danger {
   @apply bg-red-900 border-red-700;
 }
-.dark-mode .alert-danger code {
+.dark .alert-danger code {
   @apply bg-red-800;
 }
-.dark-mode .alert-danger .alert-content {
+.dark .alert-danger .alert-content {
   @apply text-red-300;
 }
 </style>

components/global/Lexique.vue

@@ -14,7 +14,7 @@
     <client-only>
       <div
         v-if="document"
-        class="tooltip absolute bg-blue-100 border-blue-200 border invisible opacity-0 left-1/2 px-4 py-3 rounded-xl shadow-2xl text-gray-600 text-sm z-50"
+        class="tooltip absolute bg-blue-100 border-blue-200 border invisible opacity-0 left-1/2 px-4 py-3 rounded-xl shadow-2xl text-gray-600 text-sm z-50 dark:bg-blue-900 dark:text-gray-100 dark:border-blue-800"
       >
         <span class="triangle absolute"></span>
 
@@ -24,7 +24,9 @@
 
         <span>{{ document.description }}</span>
 
-        <span class="block font-light mt-3 text-xs text-purple-800">
+        <span
+          class="block font-light mt-3 text-xs text-purple-800 dark:text-purple-500"
+        >
           {{ $t('lexique.tooltipReadmore') }}
         </span>
       </div>
@@ -112,4 +114,10 @@ abbr {
   top: 2px;
   left: -10px;
 }
+.dark .triangle {
+  border-bottom-color: #1e40af;
+}
+.dark .triangle:before {
+  border-bottom-color: #1e3a8a;
+}
 </style>

components/layout/LayoutFooter.vue

 <template>
   <div
-    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 p-6 text-white z-10"
+    class="flex flex-wrap justify-center bg-gradient-to-r from-purple-600 to-purple-400 p-6 text-white z-10 dark:from-purple-900 dark:to-purple-700 dark:text-gray-100"
   >
     <div class="container">
       <div class="flex flex-wrap mb-4 w-full">

components/layout/LayoutHeader.vue

@@ -11,7 +11,7 @@
 
         <LayoutHeaderMenu />
 
-        <AppDarkMode />
+        <AppDarkModeToggle />
 
         <LayoutHeaderMenuAvatar />
       </div>

plugins/vue-tailwind.js

@@ -74,10 +74,10 @@ const settings = {
     component: TAlert,
     props: {
       fixedClasses: {
-        wrapper: 'relative flex items-center p-4 border-l-4  rounded shadow-sm',
+        wrapper: 'relative flex items-center p-4 border-l-4 rounded shadow-sm',
         body: 'flex-grow',
         close:
-          'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded  focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
+          'absolute relative flex items-center justify-center ml-4 flex-shrink-0 w-6 h-6 transition duration-100 ease-in-out rounded focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50',
         closeIcon: 'fill-current h-4 w-4',
       },
       classes: {