songtianlun
87e0c2eec6
- Implement theme switching functionality with a new ThemeController - Add ToastController for displaying notifications - Update various views for improved layout and styling - Introduce animations for toast notifications These changes enhance the user experience by allowing users to switch between light and dark themes and receive feedback through toast notifications. The UI has been improved for better accessibility and aesthetics.
61 lines
1.9 KiB
JavaScript
61 lines
1.9 KiB
JavaScript
const defaultTheme = require('tailwindcss/defaultTheme')
|
|
|
|
module.exports = {
|
|
content: [
|
|
'./public/*.html',
|
|
'./app/helpers/**/*.rb',
|
|
'./app/javascript/**/*.js',
|
|
'./app/views/**/*.{erb,haml,html,slim}',
|
|
'./node_modules/flowbite/**/*.js'
|
|
],
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter var', ...defaultTheme.fontFamily.sans],
|
|
},
|
|
keyframes: {
|
|
'slide-in-right': {
|
|
'0%': {
|
|
transform: 'translateX(100%)',
|
|
opacity: '0'
|
|
},
|
|
'100%': {
|
|
transform: 'translateX(0)',
|
|
opacity: '1'
|
|
},
|
|
},
|
|
'fade-out': {
|
|
'0%': {
|
|
opacity: '1'
|
|
},
|
|
'100%': {
|
|
opacity: '0'
|
|
},
|
|
}
|
|
},
|
|
animation: {
|
|
'slide-in-right': 'slide-in-right 0.5s ease-out',
|
|
'fade-out': 'fade-out 0.5s ease-out'
|
|
},
|
|
},
|
|
},
|
|
plugins: [
|
|
require('@tailwindcss/typography'),
|
|
require('daisyui'),
|
|
// require('flowbite/plugin')
|
|
// require('@tailwindcss/forms'),
|
|
// require('@tailwindcss/typography'),
|
|
// require('@tailwindcss/container-queries'),
|
|
],
|
|
daisyui: {
|
|
themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"]
|
|
darkTheme: "dark", // name of one of the included themes for dark mode
|
|
base: true, // applies background color and foreground color for root element by default
|
|
styled: true, // include daisyUI colors and design decisions for all components
|
|
utils: true, // adds responsive and modifier utility classes
|
|
prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors)
|
|
logs: true, // Shows info about daisyUI version and used config in the console when building your CSS
|
|
themeRoot: ":root", // The element that receives theme color CSS variables
|
|
},
|
|
}
|