feat: enhance theme management and customization options
- Added support for multiple themes (dracula, monokai, nord, gruvbox, tokyo_night, catppuccin, rose_pine, one_dark, material, solarized) in the application. - Updated `setTheme` function to accept the new `Theme` type, allowing for more flexible theme selection. - Introduced `ThemeSelector` component in GeneralSettingsPage for user-friendly theme selection. - Modified `ThemeProvider` to handle user preferred themes and improved theme toggling logic. - Updated CSS variables in `globals.css` to support new themes, enhancing visual consistency across the app.
This commit is contained in:
Julien Froidefond
@@ -48,6 +48,246 @@
|
||||
--gray-light: #374151; /* gray-700 */
|
||||
}
|
||||
|
||||
.dracula {
|
||||
/* Dracula theme */
|
||||
--background: #282a36; /* dracula background */
|
||||
--foreground: #f8f8f2; /* dracula foreground */
|
||||
--card: #44475a; /* dracula current line */
|
||||
--card-hover: #6272a4; /* dracula comment */
|
||||
--card-column: #21222c; /* darker background */
|
||||
--border: #6272a4; /* dracula comment */
|
||||
--input: #44475a; /* dracula current line */
|
||||
--primary: #ff79c6; /* dracula pink */
|
||||
--primary-foreground: #282a36; /* dracula background */
|
||||
--muted: #6272a4; /* dracula comment */
|
||||
--muted-foreground: #50fa7b; /* dracula green */
|
||||
--accent: #ffb86c; /* dracula orange */
|
||||
--destructive: #ff5555; /* dracula red */
|
||||
--success: #50fa7b; /* dracula green */
|
||||
--purple: #bd93f9; /* dracula purple */
|
||||
--yellow: #f1fa8c; /* dracula yellow */
|
||||
--green: #50fa7b; /* dracula green */
|
||||
--blue: #8be9fd; /* dracula cyan */
|
||||
--gray: #6272a4; /* dracula comment */
|
||||
--gray-light: #44475a; /* dracula current line */
|
||||
}
|
||||
|
||||
.monokai {
|
||||
/* Monokai theme */
|
||||
--background: #272822; /* monokai background */
|
||||
--foreground: #f8f8f2; /* monokai foreground */
|
||||
--card: #3e3d32; /* monokai selection */
|
||||
--card-hover: #49483e; /* monokai line */
|
||||
--card-column: #1e1f1c; /* darker background */
|
||||
--border: #49483e; /* monokai line */
|
||||
--input: #3e3d32; /* monokai selection */
|
||||
--primary: #f92672; /* monokai pink */
|
||||
--primary-foreground: #272822; /* monokai background */
|
||||
--muted: #75715e; /* monokai comment */
|
||||
--muted-foreground: #a6e22e; /* monokai green */
|
||||
--accent: #fd971f; /* monokai orange */
|
||||
--destructive: #f92672; /* monokai red */
|
||||
--success: #a6e22e; /* monokai green */
|
||||
--purple: #ae81ff; /* monokai purple */
|
||||
--yellow: #e6db74; /* monokai yellow */
|
||||
--green: #a6e22e; /* monokai green */
|
||||
--blue: #66d9ef; /* monokai cyan */
|
||||
--gray: #75715e; /* monokai comment */
|
||||
--gray-light: #3e3d32; /* monokai selection */
|
||||
}
|
||||
|
||||
.nord {
|
||||
/* Nord theme */
|
||||
--background: #2e3440; /* nord0 */
|
||||
--foreground: #d8dee9; /* nord4 */
|
||||
--card: #3b4252; /* nord1 */
|
||||
--card-hover: #434c5e; /* nord2 */
|
||||
--card-column: #242831; /* darker nord0 */
|
||||
--border: #4c566a; /* nord3 */
|
||||
--input: #3b4252; /* nord1 */
|
||||
--primary: #88c0d0; /* nord7 */
|
||||
--primary-foreground: #2e3440; /* nord0 */
|
||||
--muted: #4c566a; /* nord3 */
|
||||
--muted-foreground: #81a1c1; /* nord9 */
|
||||
--accent: #d08770; /* nord12 */
|
||||
--destructive: #bf616a; /* nord11 */
|
||||
--success: #a3be8c; /* nord14 */
|
||||
--purple: #b48ead; /* nord13 */
|
||||
--yellow: #ebcb8b; /* nord15 */
|
||||
--green: #a3be8c; /* nord14 */
|
||||
--blue: #5e81ac; /* nord10 */
|
||||
--gray: #4c566a; /* nord3 */
|
||||
--gray-light: #3b4252; /* nord1 */
|
||||
}
|
||||
|
||||
.gruvbox {
|
||||
/* Gruvbox theme */
|
||||
--background: #282828; /* gruvbox bg0 */
|
||||
--foreground: #ebdbb2; /* gruvbox fg */
|
||||
--card: #3c3836; /* gruvbox bg1 */
|
||||
--card-hover: #504945; /* gruvbox bg2 */
|
||||
--card-column: #1d2021; /* gruvbox bg0_h */
|
||||
--border: #665c54; /* gruvbox bg3 */
|
||||
--input: #3c3836; /* gruvbox bg1 */
|
||||
--primary: #fe8019; /* gruvbox orange */
|
||||
--primary-foreground: #282828; /* gruvbox bg0 */
|
||||
--muted: #665c54; /* gruvbox bg3 */
|
||||
--muted-foreground: #a89984; /* gruvbox gray */
|
||||
--accent: #fabd2f; /* gruvbox yellow */
|
||||
--destructive: #fb4934; /* gruvbox red */
|
||||
--success: #b8bb26; /* gruvbox green */
|
||||
--purple: #d3869b; /* gruvbox purple */
|
||||
--yellow: #fabd2f; /* gruvbox yellow */
|
||||
--green: #b8bb26; /* gruvbox green */
|
||||
--blue: #83a598; /* gruvbox blue */
|
||||
--gray: #a89984; /* gruvbox gray */
|
||||
--gray-light: #3c3836; /* gruvbox bg1 */
|
||||
}
|
||||
|
||||
.tokyo_night {
|
||||
/* Tokyo Night theme */
|
||||
--background: #1a1b26; /* tokyo-night bg */
|
||||
--foreground: #a9b1d6; /* tokyo-night fg */
|
||||
--card: #24283b; /* tokyo-night bg_highlight */
|
||||
--card-hover: #2f3349; /* tokyo-night bg_visual */
|
||||
--card-column: #16161e; /* tokyo-night bg_dark */
|
||||
--border: #565f89; /* tokyo-night comment */
|
||||
--input: #24283b; /* tokyo-night bg_highlight */
|
||||
--primary: #7aa2f7; /* tokyo-night blue */
|
||||
--primary-foreground: #1a1b26; /* tokyo-night bg */
|
||||
--muted: #565f89; /* tokyo-night comment */
|
||||
--muted-foreground: #9aa5ce; /* tokyo-night fg_dark */
|
||||
--accent: #ff9e64; /* tokyo-night orange */
|
||||
--destructive: #f7768e; /* tokyo-night red */
|
||||
--success: #9ece6a; /* tokyo-night green */
|
||||
--purple: #bb9af7; /* tokyo-night purple */
|
||||
--yellow: #e0af68; /* tokyo-night yellow */
|
||||
--green: #9ece6a; /* tokyo-night green */
|
||||
--blue: #7aa2f7; /* tokyo-night blue */
|
||||
--gray: #565f89; /* tokyo-night comment */
|
||||
--gray-light: #24283b; /* tokyo-night bg_highlight */
|
||||
}
|
||||
|
||||
.catppuccin {
|
||||
/* Catppuccin Mocha theme */
|
||||
--background: #1e1e2e; /* catppuccin base */
|
||||
--foreground: #cdd6f4; /* catppuccin text */
|
||||
--card: #313244; /* catppuccin surface0 */
|
||||
--card-hover: #45475a; /* catppuccin surface1 */
|
||||
--card-column: #181825; /* catppuccin mantle */
|
||||
--border: #6c7086; /* catppuccin overlay0 */
|
||||
--input: #313244; /* catppuccin surface0 */
|
||||
--primary: #cba6f7; /* catppuccin mauve */
|
||||
--primary-foreground: #1e1e2e; /* catppuccin base */
|
||||
--muted: #6c7086; /* catppuccin overlay0 */
|
||||
--muted-foreground: #a6adc8; /* catppuccin subtext0 */
|
||||
--accent: #fab387; /* catppuccin peach */
|
||||
--destructive: #f38ba8; /* catppuccin red */
|
||||
--success: #a6e3a1; /* catppuccin green */
|
||||
--purple: #cba6f7; /* catppuccin mauve */
|
||||
--yellow: #f9e2af; /* catppuccin yellow */
|
||||
--green: #a6e3a1; /* catppuccin green */
|
||||
--blue: #89b4fa; /* catppuccin blue */
|
||||
--gray: #6c7086; /* catppuccin overlay0 */
|
||||
--gray-light: #313244; /* catppuccin surface0 */
|
||||
}
|
||||
|
||||
.rose_pine {
|
||||
/* Rose Pine theme */
|
||||
--background: #191724; /* rose-pine base */
|
||||
--foreground: #e0def4; /* rose-pine text */
|
||||
--card: #26233a; /* rose-pine surface */
|
||||
--card-hover: #312f44; /* rose-pine overlay */
|
||||
--card-column: #16141f; /* rose-pine base */
|
||||
--border: #6e6a86; /* rose-pine muted */
|
||||
--input: #26233a; /* rose-pine surface */
|
||||
--primary: #c4a7e7; /* rose-pine iris */
|
||||
--primary-foreground: #191724; /* rose-pine base */
|
||||
--muted: #6e6a86; /* rose-pine muted */
|
||||
--muted-foreground: #908caa; /* rose-pine subtle */
|
||||
--accent: #f6c177; /* rose-pine gold */
|
||||
--destructive: #eb6f92; /* rose-pine love */
|
||||
--success: #9ccfd8; /* rose-pine foam */
|
||||
--purple: #c4a7e7; /* rose-pine iris */
|
||||
--yellow: #f6c177; /* rose-pine gold */
|
||||
--green: #9ccfd8; /* rose-pine foam */
|
||||
--blue: #3e8fb0; /* rose-pine pine */
|
||||
--gray: #6e6a86; /* rose-pine muted */
|
||||
--gray-light: #26233a; /* rose-pine surface */
|
||||
}
|
||||
|
||||
.one_dark {
|
||||
/* One Dark theme */
|
||||
--background: #282c34; /* one-dark bg */
|
||||
--foreground: #abb2bf; /* one-dark fg */
|
||||
--card: #3e4451; /* one-dark bg1 */
|
||||
--card-hover: #4f5666; /* one-dark bg2 */
|
||||
--card-column: #21252b; /* one-dark bg0 */
|
||||
--border: #5c6370; /* one-dark bg3 */
|
||||
--input: #3e4451; /* one-dark bg1 */
|
||||
--primary: #61afef; /* one-dark blue */
|
||||
--primary-foreground: #282c34; /* one-dark bg */
|
||||
--muted: #5c6370; /* one-dark bg3 */
|
||||
--muted-foreground: #828997; /* one-dark gray */
|
||||
--accent: #e06c75; /* one-dark red */
|
||||
--destructive: #e06c75; /* one-dark red */
|
||||
--success: #98c379; /* one-dark green */
|
||||
--purple: #c678dd; /* one-dark purple */
|
||||
--yellow: #e5c07b; /* one-dark yellow */
|
||||
--green: #98c379; /* one-dark green */
|
||||
--blue: #61afef; /* one-dark blue */
|
||||
--gray: #5c6370; /* one-dark bg3 */
|
||||
--gray-light: #3e4451; /* one-dark bg1 */
|
||||
}
|
||||
|
||||
.material {
|
||||
/* Material Design Dark theme */
|
||||
--background: #121212; /* material bg */
|
||||
--foreground: #ffffff; /* material on-bg */
|
||||
--card: #1e1e1e; /* material surface */
|
||||
--card-hover: #2c2c2c; /* material surface-variant */
|
||||
--card-column: #0f0f0f; /* material surface-container */
|
||||
--border: #3c3c3c; /* material outline */
|
||||
--input: #1e1e1e; /* material surface */
|
||||
--primary: #bb86fc; /* material primary */
|
||||
--primary-foreground: #121212; /* material bg */
|
||||
--muted: #3c3c3c; /* material outline */
|
||||
--muted-foreground: #b3b3b3; /* material on-surface-variant */
|
||||
--accent: #ffab40; /* material secondary */
|
||||
--destructive: #cf6679; /* material error */
|
||||
--success: #4caf50; /* material success */
|
||||
--purple: #bb86fc; /* material primary */
|
||||
--yellow: #ffab40; /* material secondary */
|
||||
--green: #4caf50; /* material success */
|
||||
--blue: #2196f3; /* material info */
|
||||
--gray: #3c3c3c; /* material outline */
|
||||
--gray-light: #1e1e1e; /* material surface */
|
||||
}
|
||||
|
||||
.solarized {
|
||||
/* Solarized Dark theme */
|
||||
--background: #002b36; /* solarized base03 */
|
||||
--foreground: #93a1a1; /* solarized base1 */
|
||||
--card: #073642; /* solarized base02 */
|
||||
--card-hover: #0a4b5a; /* solarized base01 */
|
||||
--card-column: #001e26; /* solarized base03 darker */
|
||||
--border: #586e75; /* solarized base01 */
|
||||
--input: #073642; /* solarized base02 */
|
||||
--primary: #268bd2; /* solarized blue */
|
||||
--primary-foreground: #002b36; /* solarized base03 */
|
||||
--muted: #586e75; /* solarized base01 */
|
||||
--muted-foreground: #657b83; /* solarized base00 */
|
||||
--accent: #b58900; /* solarized yellow */
|
||||
--destructive: #dc322f; /* solarized red */
|
||||
--success: #859900; /* solarized green */
|
||||
--purple: #6c71c4; /* solarized violet */
|
||||
--yellow: #b58900; /* solarized yellow */
|
||||
--green: #859900; /* solarized green */
|
||||
--blue: #268bd2; /* solarized blue */
|
||||
--gray: #586e75; /* solarized base01 */
|
||||
--gray-light: #073642; /* solarized base02 */
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
|
||||
@@ -34,7 +34,10 @@ export default async function RootLayout({
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<ThemeProvider initialTheme={initialPreferences.viewPreferences.theme}>
|
||||
<ThemeProvider
|
||||
initialTheme={initialPreferences.viewPreferences.theme}
|
||||
userPreferredTheme={initialPreferences.viewPreferences.theme === 'light' ? 'dark' : initialPreferences.viewPreferences.theme}
|
||||
>
|
||||
<JiraConfigProvider config={initialPreferences.jiraConfig}>
|
||||
<UserPreferencesProvider initialPreferences={initialPreferences}>
|
||||
{children}
|
||||
|
||||
Reference in New Issue
Block a user