Canvas: Improve text element readability (#57371) (#57375)

(cherry picked from commit 5128659d19)

Co-authored-by: Adela Almasan <88068998+adela-almasan@users.noreply.github.com>

public/app/features/canvas/element.ts

@@ -2,6 +2,7 @@ import { ComponentType } from 'react';
 
 import { RegistryItem } from '@grafana/data';
 import { PanelOptionsSupplier } from '@grafana/data/src/panel/PanelPlugin';
+import { config } from 'app/core/config';
 
 import { DimensionContext } from '../dimensions/context';
 
@@ -64,3 +65,4 @@ export interface CanvasElementItem<TConfig = any, TData = any> extends RegistryI
 
 export const defaultBgColor = '#D9D9D9';
 export const defaultTextColor = '#000000';
+export const defaultThemeTextColor = config.theme2.colors.text.primary;

public/app/features/canvas/elements/text.tsx

@@ -9,7 +9,7 @@ import { DimensionContext } from 'app/features/dimensions/context';
 import { ColorDimensionEditor } from 'app/features/dimensions/editors/ColorDimensionEditor';
 import { TextDimensionEditor } from 'app/features/dimensions/editors/TextDimensionEditor';
 
-import { CanvasElementItem, CanvasElementProps, defaultTextColor } from '../element';
+import { CanvasElementItem, CanvasElementProps, defaultThemeTextColor } from '../element';
 import { ElementState } from '../runtime/element';
 import { Align, TextConfig, TextData, VAlign } from '../types';
 
@@ -136,7 +136,7 @@ export const textItem: CanvasElementItem<TextConfig, TextData> = {
       align: Align.Center,
       valign: VAlign.Middle,
       color: {
-        fixed: defaultTextColor,
+        fixed: defaultThemeTextColor,
       },
       size: 16,
     },