[TASK] support dark mode second draft

This commit is contained in:
Marie Birner
2023-11-04 19:33:36 +01:00
parent 2fd053efed
commit 97897437a9
16 changed files with 102 additions and 93 deletions

View File

@ -10,3 +10,4 @@
@import 'components/alert';
@import 'components/status';
@import 'components/chart';
@import 'components/search';

View File

@ -6,7 +6,7 @@
}
&-dark {
@apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-950 focus-visible:outline-primary-950;
@apply bg-primary-900 hover:bg-primary-950 dark:bg-primary-600 dark:hover:bg-primary-500 focus-visible:outline-primary-950;
}
&-gray {

View File

@ -258,7 +258,7 @@ select {
}
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
@apply bg-gray-100;
@apply bg-gray-100 dark:bg-primary-950;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted::after, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
opacity: 0.5;
@ -307,6 +307,8 @@ select {
border: 0;
border-radius: 0;
max-width: 100%;
@apply bg-transparent;
}
.choices__input:focus {
outline: 0;

View File

@ -1,6 +1,6 @@
.link {
&-primary {
@apply text-primary-600 hover:text-primary-900 underline;
@apply text-primary-600 dark:text-primary-200 hover:text-primary-900 hover:dark:text-primary-300 underline;
}
&-dark {

View File

@ -0,0 +1,13 @@
.search {
&-bar {
@apply w-full relative block rounded-md border-0 py-1.5 px-2 bg-white dark:bg-black text-gray-900 dark:text-white ring-1 ring-inset ring-gray-300 dark:ring-black placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 mb-2 md:mb-0;
}
&-wrapper {
@apply bg-gray-200 dark:bg-primary-600 p-3 mt-4 rounded-t-md;
}
&-result {
@apply bg-gray-200 dark:bg-primary-600 text-primary-950 dark:text-white pb-3 px-3 text-right;
}
}

View File

@ -40,5 +40,6 @@ export default {
},
},
plugins: [],
important: true,
}