Colors #

The color scheme that makes up a visual theme is defined through scss variables.

If you do not want to change colors and use the default blue theme, you do not have to do anything, as the basic theme is included in the framework and you only have to import its CSS in the angular.json file.

If you want to change the theme colors, your Angular project must be configured with support for sass.

Create a file in your client at src/themes/theme.scss, for example, with these overridden variables:

@forward 'theme.forward' with (
  $aocPrimaryColor: #dfdfec,
  $aocPrimaryLightColor: #f6f6f9,
  $aocPrimaryDarkColor: #b6b6d3,
  $aocPrimaryAccentColor: #ffcaa8,
  $aocInputFocusBorderColor: #ffaa00,
  $aocInputFocusBoxShadowColor: #ffd980,
  $aocAppBackgroundColor: #fefeff
);

Add it in your angular.json file, in styles in the first position.

Create another file called src/themes/theme.forward.scss, this file loads the variables and then loads all the scss code of the framework:

@forward "../../node_modules/@atlantis-of-code/aoc-client/aoc-design/misc/variables/variables";
@use 'sass:meta';
@include meta.load-css("../../node_modules/@atlantis-of-code/aoc-client/aoc-design/aoc.scss");

Example #

Complete example at quest-client/src/theme