Angular Chart Title

1import { IThemeProvider, SciChartJsNavyTheme } from "scichart";
2
3const getCssColor = (cssVar: string, fallback: string): string => {
4    if (typeof document === "undefined") {
5        return fallback;
6    }
7    const cssValue = getComputedStyle(document.documentElement).getPropertyValue(cssVar).trim();
8    return cssValue || fallback;
9};
10
11export interface AppThemeBase {
12    SciChartJsTheme: IThemeProvider;
13
14    // general colors
15    ForegroundColor: string;
16    Background: string;
17
18    // Series colors
19    VividSkyBlue: string;
20    VividPink: string;
21    VividTeal: string;
22    VividOrange: string;
23    VividBlue: string;
24    VividPurple: string;
25    VividGreen: string;
26    VividRed: string;
27
28    MutedSkyBlue: string;
29    MutedPink: string;
30    MutedTeal: string;
31    MutedOrange: string;
32    MutedBlue: string;
33    MutedPurple: string;
34    MutedRed: string;
35
36    PaleSkyBlue: string;
37    PalePink: string;
38    PaleTeal: string;
39    PaleOrange: string;
40    PaleBlue: string;
41    PalePurple: string;
42}
43
44export class SciChart2022AppTheme implements AppThemeBase {
45    SciChartJsTheme = new SciChartJsNavyTheme();
46
47    // Dynamic colors
48    get TextColor() { return this.ForegroundColor; }
49    get ForegroundColor() {
50        return getCssColor("--text", "#F5F5F5");
51    }
52    get Background() {
53        return getCssColor("--bg-chart", this.SciChartJsTheme.sciChartBackground);
54    }
55
56    // Series colors
57    VividSkyBlue = "#50C7E0";
58    VividPink = "#EC0F6C";
59    VividTeal = "#30BC9A";
60    VividOrange = "#F48420";
61    VividBlue = "#364BA0";
62    VividPurple = "#882B91";
63    VividGreen = "#67BDAF";
64    VividRed = "#C52E60";
65
66    DarkIndigo = "#14233C";
67    Indigo = "#264B93";
68
69    MutedSkyBlue = "#83D2F5";
70    MutedPink = "#DF69A8";
71    MutedTeal = "#7BCAAB";
72    MutedOrange = "#E7C565";
73    MutedBlue = "#537ABD";
74    MutedPurple = "#A16DAE";
75    MutedRed = "#DC7969";
76
77    PaleSkyBlue = "#E4F5FC";
78    PalePink = "#EEB3D2";
79    PaleTeal = "#B9E0D4";
80    PaleOrange = "#F1CFB5";
81    PaleBlue = "#B5BEDF";
82    PalePurple = "#CFB4D5";
83}
84
85export const appTheme = new SciChart2022AppTheme();
86