You can make the application load a different CSS file than the default, you can optionally choose to use that mechanism to adjust variables and re-import the application CSS from your own CSS. Here is what you need to do:
app/javascript/packs/custom.js
with the contents require('../styles/custom.scss');
- you can call the SCSS file anything you want, actually, it will still be compiled into custom.css because it uses the pack name, i.e. this js fileapp/javascript/styles/custom.scss
(or whatever you chose). Here you can write whatever SCSS you want.See the app/javascript/styles/variables.scss
file for the full list of available variables used throughout the application styles. You can redefine their values in your own custom.scss
like this:
$ui-highlight-color: #d3d900;
@import 'application';
Here is a mapping of the renamed variables:
$ui-base-color: $color1;
$ui-secondary-color: $color2;
$ui-primary-color: $color3;
$ui-highlight-color: $color4;
$base-border-color: $color5;
$simple-background-color: $color5;
$primary-text-color: $color5;
$error-value-color: $color6;
$valid-value-color: $color7;
$base-shadow-color: $color8;
$base-overlay-background: $color8;