fix: dark mode issues on form preview (#301)

* fix: dark mode issues on form preview

* Fix darkmode issues

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka 2024-02-01 14:37:20 +01:00 committed by Julien Nahum
parent 4ddb30c353
commit 64184e9aaf
2 changed files with 7 additions and 6 deletions

View File

@ -230,7 +230,7 @@ export default {
classes += '-mx-4 px-4 -my-1 py-1 group/nffield relative transition-colors'
if (this.beingEdited) {
classes += ' bg-blue-50 rounded-md'
classes += ' bg-blue-50 dark:bg-gray-800 rounded-md'
}
}
return classes

View File

@ -12,9 +12,10 @@ module.exports = {
],
safelist: [
{
pattern: /.*bg-(blue|gray|red|yellow|green).*/,
pattern: /.*bg-(blue|gray|red|yellow|green).*/,
},
...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat() // Alerts
...['green', 'red', 'blue', 'yellow'].map((color) => ['bg-' + color + '-100', 'border-' + color + '-500']).flat(), // Alerts
...['dark:hover:bg-notion-dark-light']
],
darkMode: 'class', // or 'media' or 'class'
theme: {
@ -26,8 +27,8 @@ module.exports = {
'16%': {transform: 'translateY(+10%)'}
},
'infinite-scroll': {
from: { transform: 'translateX(0)' },
to: { transform: 'translateX(-100%)' },
from: {transform: 'translateX(0)'},
to: {transform: 'translateX(-100%)'},
}
},
animation: {
@ -84,7 +85,7 @@ module.exports = {
},
plugins: [
require('@tailwindcss/aspect-ratio'),
plugin(function({ addVariant }) {
plugin(function ({addVariant}) {
addVariant('between', '&:not(:first-child):not(:last-child)')
addVariant('hocus', ['&:hover', '&:focus'])
})