From ac241b08cd186dbdd441dbb3141ddc6cbdbe8539 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Sat, 18 Sep 2021 22:59:12 +0200
Subject: [PATCH] style: fix dark mode for Lexique and more
---
...{AppDarkMode.vue => AppDarkModeToggle.vue} | 0
components/global/Alert.vue | 35 +++++++++----------
components/global/Lexique.vue | 12 +++++--
components/layout/LayoutFooter.vue | 2 +-
components/layout/LayoutHeader.vue | 2 +-
plugins/vue-tailwind.js | 4 +--
6 files changed, 31 insertions(+), 24 deletions(-)
rename components/app/{AppDarkMode.vue => AppDarkModeToggle.vue} (100%)
diff --git a/components/app/AppDarkMode.vue b/components/app/AppDarkModeToggle.vue
similarity index 100%
rename from components/app/AppDarkMode.vue
rename to components/app/AppDarkModeToggle.vue
diff --git a/components/global/Alert.vue b/components/global/Alert.vue
index 2abc4855..146b5784 100644
--- a/components/global/Alert.vue
+++ b/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>
diff --git a/components/global/Lexique.vue b/components/global/Lexique.vue
index bb88a3d7..6498efb6 100644
--- a/components/global/Lexique.vue
+++ b/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>
diff --git a/components/layout/LayoutFooter.vue b/components/layout/LayoutFooter.vue
index 3bdc1e8e..6904d55d 100644
--- a/components/layout/LayoutFooter.vue
+++ b/components/layout/LayoutFooter.vue
@@ -1,6 +1,6 @@
<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">
diff --git a/components/layout/LayoutHeader.vue b/components/layout/LayoutHeader.vue
index 4e9ce456..6aebdb88 100644
--- a/components/layout/LayoutHeader.vue
+++ b/components/layout/LayoutHeader.vue
@@ -11,7 +11,7 @@
<LayoutHeaderMenu />
- <AppDarkMode />
+ <AppDarkModeToggle />
<LayoutHeaderMenuAvatar />
</div>
diff --git a/plugins/vue-tailwind.js b/plugins/vue-tailwind.js
index 178a64d1..266f1416 100644
--- a/plugins/vue-tailwind.js
+++ b/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: {
--
GitLab