Theme: Add debug theme behind extraThemes toggle (#95838)

add debug theme

packages/grafana-data/src/themes/createShape.ts

@@ -22,7 +22,7 @@ export function createShape(options: ThemeShapeInput): ThemeShape {
   const baseBorderRadius = options.borderRadius ?? 2;
 
   const radius = {
-    default: '2px',
+    default: `${baseBorderRadius}px`,
     pill: '9999px',
     circle: '100%',
   };

packages/grafana-data/src/themes/registry.ts

@@ -1,5 +1,6 @@
 import { Registry, RegistryItem } from '../utils/Registry';
 
+import { createColors } from './createColors';
 import { createTheme } from './createTheme';
 import { GrafanaTheme2 } from './types';
 
@@ -35,8 +36,7 @@ const themeRegistry = new Registry<ThemeRegistryItem>(() => {
     { id: 'system', name: 'System preference', build: getSystemPreferenceTheme },
     { id: 'dark', name: 'Dark', build: () => createTheme({ colors: { mode: 'dark' } }) },
     { id: 'light', name: 'Light', build: () => createTheme({ colors: { mode: 'light' } }) },
-    { id: 'blue-night', name: 'Blue night', build: createBlueNight, isExtra: true },
+    { id: 'debug', name: 'Debug', build: createDebug, isExtra: true },
-    { id: 'midnight', name: 'Midnight', build: createMidnight, isExtra: true },
   ];
 });
 
@@ -47,47 +47,59 @@ function getSystemPreferenceTheme() {
 }
 
 /**
- * Just a temporary placeholder for a possible new theme
+ * a very ugly theme that is useful for debugging and checking if the theme is applied correctly
+ * borders are red,
+ * backgrounds are blue,
+ * text is yellow,
+ * and grafana loves you <3
+ * (also corners are rounded, action states (hover, focus, selected) are purple)
  */
-function createMidnight(): GrafanaTheme2 {
+function createDebug(): GrafanaTheme2 {
-  const whiteBase = '204, 204, 220';
+  const baseDarkColors = createColors({
+    mode: 'dark',
+  });
 
   return createTheme({
-    name: 'Midnight',
+    name: 'Debug',
     colors: {
       mode: 'dark',
       background: {
-        canvas: '#000000',
+        canvas: '#000033',
-        primary: '#000000',
+        primary: '#000044',
-        secondary: '#181818',
+        secondary: '#000055',
+      },
+      text: {
+        primary: '#bbbb00',
+        secondary: '#888800',
+        disabled: '#444400',
+        link: '#dddd00',
+        maxContrast: '#ffff00',
       },
       border: {
-        weak: `rgba(${whiteBase}, 0.17)`,
+        weak: '#ff000044',
-        medium: `rgba(${whiteBase}, 0.25)`,
+        medium: '#ff000088',
-        strong: `rgba(${whiteBase}, 0.35)`,
+        strong: '#ff0000ff',
-      },
-    },
-  });
-}
-
-/**
- * Just a temporary placeholder for a possible new theme
- */
-function createBlueNight(): GrafanaTheme2 {
-  return createTheme({
-    name: 'Blue night',
-    colors: {
-      mode: 'dark',
-      background: {
-        canvas: '#15161d',
-        primary: '#15161d',
-        secondary: '#1d1f2e',
-      },
-      border: {
-        weak: `#2e304f`,
-        medium: `#2e304f`,
-        strong: `#2e304f`,
       },
+      primary: {
+        ...baseDarkColors.primary,
+        border: '#ff000088',
+        text: '#cccc00',
+        contrastText: '#ffff00',
+      },
+      secondary: {
+        ...baseDarkColors.secondary,
+        border: '#ff000088',
+        text: '#cccc00',
+        contrastText: '#ffff00',
+      },
+      action: {
+        hover: '#9900dd',
+        focus: '#6600aa',
+        selected: '#440088',
+      },
+    },
+    shape: {
+      borderRadius: 8,
     },
   });
 }

pkg/services/preference/themes.go

@@ -10,8 +10,7 @@ var themes = []ThemeDTO{
 	{ID: "light", Type: "light"},
 	{ID: "dark", Type: "dark"},
 	{ID: "system", Type: "dark"},
-	{ID: "midnight", Type: "dark", IsExtra: true},
+	{ID: "debug", Type: "dark", IsExtra: true},
-	{ID: "blue-night", Type: "dark", IsExtra: true},
 }
 
 func GetThemeByID(id string) *ThemeDTO {