How to change to a dark theme OR invert colors?

[crowlogic]

Is it possible to invert the colors or apply a theme or set custom background color?

I'm trying to use this as part of arb4j, see https://github.com/crowlogic/arb4j/wiki/Gallery for some pretty pictures rendered with ComplexFunctionRenderer which I would like to adapt to use chartfx

The FAQ says something about using javafx css stylesheets but I have no idea how that works

Thanks in advance,
Stephen

[clisztian]

That is possible in contour plots, but you'll have to design your own heatmap color mapping. Look in the WaterfallPerformanceSample for an example

[crowlogic]

I figured out how to do it.. some javafx thing:

[crowlogic]

crow@levity:~/a/src$ cat dark-theme.css
.root {
-fx-base: #3f474f;
-fx-accent: #e7eff7 ;
-fx-default-button: #7f878f ;
-fx-focus-color: #efefef;
-fx-faint-focus-color: #efefef22;
-fx-focused-text-base-color : ladder(
-fx-selection-bar,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
-fx-focused-mark-color : -fx-focused-text-base-color ;

}

.text-input:focused {
-fx-highlight-text-fill: ladder(
-fx-highlight-fill,
-fx-light-text-color 45%,
-fx-dark-text-color 46%,
-fx-dark-text-color 59%,
-fx-mid-text-color 60%
);
}

[ennerf]

Somehow I didn't get a notification until now. Here is another example for integrating with AtlantaFX themes. One issue is that the GridRenderer (as of 11.2.7) is not part of the scene, so it needs to be added somewhere to the graph for changes to apply, e.g.,

if (chart instanceof XYChart xy) {
    Group cssGroup = new Group(xy.getGridRenderer());
    cssGroup.setVisible(false);
    cssGroup.setManaged(false);
    xy.getToolBar().getChildren().add(cssGroup);
}

Primer Light:

Primer Dark:

Scss:

.chart-container {
  // Pane that contains the chart so we can set padding via css
  -fx-padding: 0 5 5 5px;
}

.chart {

  -fx-background-color: -color-bg-default;
  -fx-font-size: cfg.$font-default;

  // WARNING: DO NOT SET PADDING!!! IT FORCES CONTINUOUS RE-RENDERING
  //-fx-padding: cfg.$block-padding;

  .chart-title {
    -fx-text-fill: -color-fg-muted;
    -fx-font-size: cfg.$font-large;
    -fx-padding: 0 0 5 0px;
  }

  .axis {

    .axis-label {
      -fx-fill: -color-fg-default;
    }

    .axis-tick-mark {
      -fx-stroke: -color-fg-subtle;
    }

    .axis-minor-tick-mark {
      -fx-stroke: -color-border-default;
    }

  }

  .grid-renderer {

    .chart-major-grid-lines {
      -fx-stroke: -color-border-default;
    }

    .chart-minor-grid-lines {
      -fx-stroke: -color-border-muted;
    }

  }

  .chart-zoom-rect {
    -fx-fill: -color-accent-fg;
    -fx-stroke: -color-accent-fg;
  }

  .value-indicator-line, .value-indicator-marker, .value-indicator-label {
    -fx-fill: -color-fg-default;
    -fx-stroke: -color-fg-default;
  }

  .chart-legend {

    .chart-legend-item {
      -fx-background-color: -color-bg-default;
      -fx-border-color: -color-border-default;
      -fx-border-width: cfg.$border-width;
      -fx-border-radius: cfg.$border-radius;
      -fx-background-radius: cfg.$background-radius;
      -fx-padding: 1 8 1 8px;

      .text {
        -fx-fill: -color-fg-default;
      }

      &:hover, &:focused {
        -fx-background-color: -color-bg-subtle;
      }

      -fx-font-size: cfg.$font-default;
      -fx-cursor: hand;

    }

  }

}