Font/Text Color In X axis and Y-Axis labels does not change if theme change

[yashjit]

Describe the bug I have 3 themes in my angular app and on theme change color scheme change in app, but ngx-charts does not respond to it. I Applied all guide provided in issue #740, but it does not work if you change theme at run time, OnTheme change i change the class .dark to respective class but no effect. As SVG generated earlier so may be need to generate SVG again if theme change ?

To Reproduce Steps to reproduce the behavior: My Code -

1. Change in theme at run rime using a drop down -

changeTheme(name: string): void { this.themeChanges$.next({ name, previous: this.currentTheme }); this.currentTheme = name; }

this.themeService.onThemeChange() .subscribe((theme: any) => { console.log(Theme changed to ${theme.name}); this.currentTheme = theme.name; this.initGraph(); });

2. HTML -

   3 . CSS -

/ ngx-chart Dynamic style / .dark { /

• Backgrounds */ $color-bg-darkest: #13141b; $color-bg-darker: #1b1e27; $color-bg-dark: #232837; $color-bg-med: #2f3646; $color-bg-light: #455066; $color-bg-lighter: #5b6882;

  /**

• Text */ $color-text-dark: #72809b; $color-text-med-dark: #919db5; $color-text-med: #A0AABE; $color-text-med-light: #d9dce1; $color-text-light: #f0f1f6; $color-text-lighter: #fff;

  background: $color-bg-darker;

  .ngx-charts {

  text { stroke: #fff !important; }

  .tooltip-anchor { fill: rgb(255, 255, 255); }

  .gridline-path { stroke: $color-bg-med; }

  .refline-path { stroke: $color-bg-light; }

  .reference-area { fill: #fff; }

  .grid-panel { &.odd { rect { fill: rgba(255, 255, 255, 0.05); } } }

  .force-directed-graph { .edge { stroke: $color-bg-light; } }

  .number-card { p { color: $color-text-light; } }

  .gauge { .background-arc { path { fill: $color-bg-med; } }

  .gauge-tick { path { stroke: $color-text-med; }

  text {
    fill: $color-text-med;
  }

  } }

  .linear-gauge { .background-bar { path { fill: $color-bg-med; } }

  .units { fill: $color-text-dark; } }

  .timeline { .brush-background { fill: rgba(255, 255, 255, 0.05); }

  .brush { .selection { fill: rgba(255, 255, 255, 0.1); stroke: #aaa; } } }

  .polar-chart .polar-chart-background { fill: rgb(30, 34, 46); }

  }

  .chart-legend { .legend-labels { background: rgba(255, 255, 255, 0.05) !important; }

  .legend-item { &:hover { color: #fff; } }

  .legend-label { &:hover { color: #fff !important; }

  .active { .legend-label-text { color: #fff !important; } } }

  .scale-legend-label { color: $color-text-med; } }

  .advanced-pie-legend { color: $color-text-med;

  .legend-item { &:hover { color: #fff !important; } } }

  .number-card .number-card-label { font-size: 0.8em; color: $color-text-med; } }

.default { /**

• Backgrounds */ $color-bg-darkest: #ffffff; $color-bg-darker: #fafafa; $color-bg-dark: #f8f8f8; $color-bg-med: #f0f0f0; $color-bg-light: #dfdfdf; $color-bg-lighter: #e2e2e2;

  /**

• Text */ $color-text-dark: #272727; $color-text-med-dark: #2b2b2b; $color-text-med: #202020; $color-text-med-light: #1f1c1c; $color-text-light: #20243f; $color-text-lighter: #000000;

  background: $color-bg-darker;

  .ngx-charts {

  text { fill: $color-text-lighter; stroke: $color-text-lighter; }

  .tooltip-anchor { fill: #707070; }

  .gridline-path { stroke: $color-bg-darkest; }

  .refline-path { stroke: $color-bg-light; }

  .reference-area { fill: rgb(78, 78, 78); }

  .grid-panel { &.odd { rect { fill: rgba(255, 255, 255, 0.05); } } }

  .force-directed-graph { .edge { stroke: $color-bg-light; } }

  .number-card { p { color: $color-text-light; } }

  .gauge { .background-arc { path { fill: $color-bg-med; } }

  .gauge-tick { path { stroke: $color-text-med; }

  text {
    fill: $color-text-med;
  }

  } }

  .linear-gauge { .background-bar { path { fill: $color-bg-med; } }

  .units { fill: $color-text-dark; } }

  .timeline { .brush-background { fill: rgba(255, 255, 255, 0.05); }

  .brush { .selection { fill: rgba(255, 255, 255, 0.1); stroke: #aaa; } } }

  .polar-chart .polar-chart-background { fill: #e0e0e0; }

  }

  .chart-legend { .legend-labels { background: rgba(20, 20, 20, 0.671) !important; }

  .legend-item { &:hover { color: rgb(83, 83, 83); } }

  .legend-label { &:hover { color: rgb(37, 37, 37) !important; }

  .active { .legend-label-text { color: #000 !important; } } }

  .scale-legend-label { color: $color-text-med; } }

  .advanced-pie-legend { color: $color-text-med;

  .legend-item { &:hover { color: #000 !important; } } }

  .number-card .number-card-label { font-size: 0.8em; color: $color-text-med; } } **

Expected behavior It should change color of label, font-size but no effect seen.

[SamueLacmene]

I have the same issue

[tofiqquadri]

Try to use my solution at https://github.com/swimlane/ngx-charts/issues/740

@yashjit @MrBob007 you guys can mention all the themes you are using in your application instead of just dark as in my case.

[blogcraft]

There seems to be a problem in which color gets covered by fill in CSS.