Merge pull request #1145 from mathuo/moconnor/theme-builder-css-variables

feat: migrate spaced themes to CSS variables and add interactive theme builder

Author: mathuo

packages/dockview-core/src/dockview/theme.ts

@@ -7,6 +7,10 @@ export interface DockviewTheme {
      * The class name to apply to the theme containing the CSS variables settings.
      */
     className: string;
+    /**
+     * Whether the theme is light or dark. Useful for adapting panel content colors.
+     */
+    colorScheme?: 'light' | 'dark';
     /**
      * The gap between the groups
      */
@@ -25,37 +29,37 @@ export interface DockviewTheme {
 export const themeDark: DockviewTheme = {
     name: 'dark',
     className: 'dockview-theme-dark',
+    colorScheme: 'dark',
 };
 
 export const themeLight: DockviewTheme = {
     name: 'light',
     className: 'dockview-theme-light',
+    colorScheme: 'light',
 };
 
 export const themeVisualStudio: DockviewTheme = {
     name: 'visualStudio',
     className: 'dockview-theme-vs',
+    colorScheme: 'dark',
 };
 
 export const themeAbyss: DockviewTheme = {
     name: 'abyss',
     className: 'dockview-theme-abyss',
+    colorScheme: 'dark',
 };
 
 export const themeDracula: DockviewTheme = {
     name: 'dracula',
     className: 'dockview-theme-dracula',
-};
-
-export const themeReplit: DockviewTheme = {
-    name: 'replit',
-    className: 'dockview-theme-replit',
-    gap: 10,
+    colorScheme: 'dark',
 };
 
 export const themeAbyssSpaced: DockviewTheme = {
     name: 'abyssSpaced',
     className: 'dockview-theme-abyss-spaced',
+    colorScheme: 'dark',
     gap: 10,
     dndOverlayMounting: 'absolute',
     dndPanelOverlay: 'group',
@@ -64,6 +68,88 @@ export const themeAbyssSpaced: DockviewTheme = {
 export const themeLightSpaced: DockviewTheme = {
     name: 'lightSpaced',
     className: 'dockview-theme-light-spaced',
+    colorScheme: 'light',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+
+export const themeNord: DockviewTheme = {
+    name: 'nord',
+    className: 'dockview-theme-nord',
+    colorScheme: 'dark',
+};
+
+export const themeNordSpaced: DockviewTheme = {
+    name: 'nordSpaced',
+    className: 'dockview-theme-nord-spaced',
+    colorScheme: 'dark',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+
+export const themeCatppuccinMocha: DockviewTheme = {
+    name: 'catppuccinMocha',
+    className: 'dockview-theme-catppuccin-mocha',
+    colorScheme: 'dark',
+};
+
+export const themeCatppuccinMochaSpaced: DockviewTheme = {
+    name: 'catppuccinMochaSpaced',
+    className: 'dockview-theme-catppuccin-mocha-spaced',
+    colorScheme: 'dark',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+
+export const themeMonokai: DockviewTheme = {
+    name: 'monokai',
+    className: 'dockview-theme-monokai',
+    colorScheme: 'dark',
+};
+
+export const themeSolarizedLight: DockviewTheme = {
+    name: 'solarizedLight',
+    className: 'dockview-theme-solarized-light',
+    colorScheme: 'light',
+};
+
+export const themeSolarizedLightSpaced: DockviewTheme = {
+    name: 'solarizedLightSpaced',
+    className: 'dockview-theme-solarized-light-spaced',
+    colorScheme: 'light',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+
+export const themeGithubDark: DockviewTheme = {
+    name: 'githubDark',
+    className: 'dockview-theme-github-dark',
+    colorScheme: 'dark',
+};
+
+export const themeGithubDarkSpaced: DockviewTheme = {
+    name: 'githubDarkSpaced',
+    className: 'dockview-theme-github-dark-spaced',
+    colorScheme: 'dark',
+    gap: 10,
+    dndOverlayMounting: 'absolute',
+    dndPanelOverlay: 'group',
+};
+
+export const themeGithubLight: DockviewTheme = {
+    name: 'githubLight',
+    className: 'dockview-theme-github-light',
+    colorScheme: 'light',
+};
+
+export const themeGithubLightSpaced: DockviewTheme = {
+    name: 'githubLightSpaced',
+    className: 'dockview-theme-github-light-spaced',
+    colorScheme: 'light',
     gap: 10,
     dndOverlayMounting: 'absolute',
     dndPanelOverlay: 'group',

packages/dockview-core/src/overlay/overlay.scss

@@ -31,7 +31,7 @@
     position: absolute;
     z-index: calc(var(--dv-overlay-z-index) - 2);
 
-    border: 1px solid var(--dv-tab-divider-color);
+    border: var(--dv-floating-border);
     box-shadow: var(--dv-floating-box-shadow);
 
     /* GPU optimizations for floating group movement */
@@ -44,7 +44,7 @@
     }
 
     &.dv-resize-container-dragging {
-        opacity: 0.5;
+        opacity: var(--dv-floating-group-dragging-opacity);
         /* Enhanced GPU acceleration during drag */
         will-change: transform, opacity;
     }