RKWojs
fd87b66b06
- Added dark mode styles to TaskStatusDropdown, TaskStatusDropdownDebug, and TaskStatusDropdownSimple components. - Introduced ThemeProvider and useTheme hook for managing theme state. - Updated Button, Card, Input, Loading, Navigation, PageContainer, PageHeader, ProjectCalendarWidget, ProjectMap, SearchBar, States, Tooltip, and other UI components to support dark mode. - Created ThemeToggle component for switching between light and dark modes. - Enhanced i18n translations for settings related to theme and language preferences. - Configured Tailwind CSS to support dark mode with class-based toggling.
70 lines
2.0 KiB
JavaScript
70 lines
2.0 KiB
JavaScript
/** @type {import('tailwindcss').Config} */
|
|
export default {
|
|
content: [
|
|
"./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/components/**/*.{js,ts,jsx,tsx,mdx}",
|
|
"./src/app/**/*.{js,ts,jsx,tsx,mdx}",
|
|
],
|
|
darkMode: 'class',
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
// Base colors using CSS variables
|
|
background: "var(--background)",
|
|
foreground: "var(--foreground)",
|
|
|
|
// Surface colors
|
|
surface: {
|
|
primary: "var(--surface-primary)",
|
|
secondary: "var(--surface-secondary)",
|
|
tertiary: "var(--surface-tertiary)",
|
|
modal: "var(--surface-modal)",
|
|
card: "var(--surface-card)",
|
|
hover: "var(--surface-hover)",
|
|
active: "var(--surface-active)",
|
|
},
|
|
|
|
// Text colors
|
|
text: {
|
|
primary: "var(--text-primary)",
|
|
secondary: "var(--text-secondary)",
|
|
tertiary: "var(--text-tertiary)",
|
|
inverse: "var(--text-inverse)",
|
|
muted: "var(--text-muted)",
|
|
},
|
|
|
|
// Border colors
|
|
border: {
|
|
default: "var(--border-default)",
|
|
hover: "var(--border-hover)",
|
|
focus: "var(--border-focus)",
|
|
divider: "var(--border-divider)",
|
|
},
|
|
|
|
// Interactive colors
|
|
interactive: {
|
|
primary: "var(--interactive-primary)",
|
|
"primary-hover": "var(--interactive-primary-hover)",
|
|
secondary: "var(--interactive-secondary)",
|
|
"secondary-hover": "var(--interactive-secondary-hover)",
|
|
danger: "var(--interactive-danger)",
|
|
"danger-hover": "var(--interactive-danger-hover)",
|
|
},
|
|
|
|
// Status colors
|
|
status: {
|
|
success: "var(--status-success)",
|
|
warning: "var(--status-warning)",
|
|
error: "var(--status-error)",
|
|
info: "var(--status-info)",
|
|
},
|
|
},
|
|
boxShadow: {
|
|
'custom': 'var(--shadow-default)',
|
|
'custom-hover': 'var(--shadow-hover)',
|
|
},
|
|
},
|
|
},
|
|
plugins: [],
|
|
};
|