56fd503642
This commit introduces a new configuration module for UI appearance settings. You can now customize various aspects of the application's look and feel. Key features: - Customizable color palette: primary, secondary, warning, and background colors. - Font customization: font family and font size. - Theme selection: light and dark themes. - Animation control: toggle animations on/off. Changes include: - Extended `ui/src/stores/useUi.js` to manage appearance state, including actions for updates and integration with local storage for persistence. - Created `ui/src/views/SettingsView.vue` with UI controls for all customizable settings. - Implemented dynamic application of settings in `ui/src/App.vue` by updating CSS variables and classes on the root element. - Enhanced `SettingsView.vue` with modern styling (TailwindCSS) and subtle animations, ensuring it's theme-aware and respects animation preferences. - Added comprehensive unit tests for the `useUi` store and component tests for `SettingsView.vue` using Vitest and Vue Test Utils. The settings page allows for real-time previews of changes, and all preferences are saved locally to persist across sessions.
44 lines
1.2 KiB
CSS
44 lines
1.2 KiB
CSS
@import "tailwindcss";
|
|
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--primary-color: #1976D2;
|
|
--secondary-color: #424242;
|
|
--warning-color: #FFC107;
|
|
--background-color: #FFFFFF;
|
|
--font-family: 'Roboto', sans-serif;
|
|
--font-size: 16px;
|
|
/* Add other variables as needed, e.g., text colors for themes */
|
|
--text-color: #212121; /* Default text color for light theme */
|
|
}
|
|
|
|
html.theme-dark {
|
|
--primary-color: #2196F3; /* Example dark theme primary */
|
|
--secondary-color: #757575; /* Example dark theme secondary */
|
|
--warning-color: #FFA000; /* Example dark theme warning */
|
|
--background-color: #303030; /* Dark theme background */
|
|
--text-color: #FFFFFF; /* Text color for dark theme */
|
|
}
|
|
|
|
/* Apply background and text color to the body for theme changes */
|
|
body {
|
|
background-color: var(--background-color);
|
|
color: var(--text-color);
|
|
font-family: var(--font-family);
|
|
font-size: var(--font-size);
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.animations-disabled * {
|
|
transition: none !important;
|
|
animation: none !important;
|
|
}
|
|
|
|
/* Example of using a CSS variable */
|
|
.some-component {
|
|
background-color: var(--primary-color);
|
|
font-family: var(--font-family);
|
|
}
|