Theming: Support for runtime theme switching and hooks for custom themes (#31301)

* WIP Custom themes

* Load custom themes from URL and via event

* Dynamic page background

* Header color change

* Fixing tests and emotion warnings

* Fixed test

* moving cx to getStyles

* Review fixes

* minor change

packages/grafana-data/src/types/config.ts

@@ -125,4 +125,5 @@ export interface GrafanaConfig {
   http2Enabled: boolean;
   dateFormats?: SystemDateFormatSettings;
   sentry: SentryConfig;
+  customTheme?: any;
 }

packages/grafana-runtime/src/config.ts

@@ -69,6 +69,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
   };
   marketplaceUrl?: string;
   expressionsEnabled = false;
+  customTheme?: any;
 
   constructor(options: GrafanaBootConfig) {
     this.theme = options.bootData.user.lightTheme ? getTheme(GrafanaThemeType.Light) : getTheme(GrafanaThemeType.Dark);

packages/grafana-ui/src/types/icon.ts

@@ -122,6 +122,7 @@ export type IconName =
   | 'cloud'
   | 'draggabledots'
   | 'folder-upload'
+  | 'palette'
   | 'gf-interpolation-linear'
   | 'gf-interpolation-smooth'
   | 'gf-interpolation-step-before'
@@ -246,6 +247,7 @@ export const getAvailableIcons = (): IconName[] => [
   'cloud',
   'draggabledots',
   'folder-upload',
+  'palette',
   'gf-interpolation-linear',
   'gf-interpolation-smooth',
   'gf-interpolation-step-before',

packages/jaeger-ui-components/src/TracePageHeader/SpanGraph/Scrubber.tsx

@@ -19,50 +19,56 @@ import { createStyle } from '../../Theme';
 import { css } from 'emotion';
 
 export const getStyles = createStyle(() => {
-  const ScrubberHandleExpansion = css`
-    label: ScrubberHandleExpansion;
-    cursor: col-resize;
-    fill-opacity: 0;
-    fill: #44f;
-  `;
-  const ScrubberHandle = css`
-    label: ScrubberHandle;
-    cursor: col-resize;
-    fill: #555;
-  `;
-  const ScrubberLine = css`
-    label: ScrubberLine;
-    pointer-events: none;
-    stroke: #555;
-  `;
   return {
+    ScrubberHandleExpansion: cx(
+      css`
+        label: ScrubberHandleExpansion;
+        cursor: col-resize;
+        fill-opacity: 0;
+        fill: #44f;
+      `,
+      'scrubber-handle-expansion'
+    ),
+    ScrubberHandle: cx(
+      css`
+        label: ScrubberHandle;
+        cursor: col-resize;
+        fill: #555;
+      `,
+      'scrubber-handle'
+    ),
+    ScrubberLine: cx(
+      css`
+        label: ScrubberLine;
+        pointer-events: none;
+        stroke: #555;
+      `,
+      'scrubber-line'
+    ),
     ScrubberDragging: css`
       label: ScrubberDragging;
-      & .${ScrubberHandleExpansion} {
+      & .scrubber-handle-expansion {
         fill-opacity: 1;
       }
-      & .${ScrubberHandle} {
+      & .scrubber-handle {
         fill: #44f;
       }
-      & > .${ScrubberLine} {
+      & > .scrubber-line {
         stroke: #44f;
       }
     `,
     ScrubberHandles: css`
       label: ScrubberHandles;
-      &:hover > .${ScrubberHandleExpansion} {
+      &:hover > .scrubber-handle-expansion {
         fill-opacity: 1;
       }
-      &:hover > .${ScrubberHandle} {
+      &:hover > .scrubber-handle {
         fill: #44f;
       }
-      &:hover + .${ScrubberLine} {
+      &:hover + .scrubber.line {
         stroke: #44f;
       }
     `,
-    ScrubberHandleExpansion,
-    ScrubberHandle,
-    ScrubberLine,
   };
 });
 

packages/jaeger-ui-components/src/TracePageHeader/TracePageHeader.tsx

@@ -36,10 +36,6 @@ import { createStyle } from '../Theme';
 import { uTxMuted } from '../uberUtilityStyles';
 
 const getStyles = createStyle((theme: Theme) => {
-  const TracePageHeaderOverviewItemValueDetail = css`
-    label: TracePageHeaderOverviewItemValueDetail;
-    color: #aaa;
-  `;
   return {
     TracePageHeader: css`
       label: TracePageHeader;
@@ -117,10 +113,16 @@ const getStyles = createStyle((theme: Theme) => {
       border-bottom: 1px solid #e4e4e4;
       padding: 0.25rem 0.5rem !important;
     `,
-    TracePageHeaderOverviewItemValueDetail,
+    TracePageHeaderOverviewItemValueDetail: cx(
+      css`
+        label: TracePageHeaderOverviewItemValueDetail;
+        color: #aaa;
+      `,
+      'trace-item-value-detail'
+    ),
     TracePageHeaderOverviewItemValue: css`
       label: TracePageHeaderOverviewItemValue;
-      &:hover > .${TracePageHeaderOverviewItemValueDetail} {
+      &:hover > .trace-item-value-detail {
         color: unset;
       }
     `,
@@ -163,13 +165,13 @@ export const HEADER_ITEMS = [
   {
     key: 'timestamp',
     label: 'Trace Start',
-    renderer(trace: Trace, styles?: ReturnType<typeof getStyles>) {
+    renderer(trace: Trace, styles: ReturnType<typeof getStyles>) {
       const dateStr = formatDatetime(trace.startTime);
       const match = dateStr.match(/^(.+)(:\d\d\.\d+)$/);
       return match ? (
-        <span className={styles?.TracePageHeaderOverviewItemValue}>
+        <span className={styles.TracePageHeaderOverviewItemValue}>
           {match[1]}
-          <span className={styles?.TracePageHeaderOverviewItemValueDetail}>{match[2]}</span>
+          <span className={styles.TracePageHeaderOverviewItemValueDetail}>{match[2]}</span>
         </span>
       ) : (
         dateStr