This is designed so that you can switch between both dark and light themes I tried to cover as many things as much as possible in this, still, if something is there any suggestion feel free to message and we will try to update it.

Please check the Documentation for step by step guide.

You can further modify the Colors according to you by changing the Colours in theme module
I am attaching a stylesheet that you can manipulate according to your requirnemnts.

/* ===================================================================== */

/* Root - CSS Variables */

/* ===================================================================== */ 

 :root{

  /*! Color - Brand */  

  --color-primary:#244d79;

  --color-secondary:#cf1d29;

  --color-primary-hover:#124166;

  --color-primary-selected:rgba(20, 110, 245, 0.117);

  --color-primary-lightest:linear-gradient(rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9));

  /*! Color - Focus */

  --color-focus-outer:#ffd337;

  --color-focus-inner:var(--color-neutral-10);

  /*! App Settings */

  --header-color:#fff;

  --color-background-body:#f8fcff;

  --color-background-login:#8398a6;

  --login-background-light:#fff;

/* App Settings */

    --header-size: 80px;

    /*! Color - Neutral */

  --color-neutral-0:#ffffff;

  --color-neutral-1:#f8f9fa;

  --color-neutral-2:#f1f3f5;

  --color-neutral-3:#e9ecef;

  --color-neutral-4:#dee2e6;

  --color-neutral-5:#ced4da;

  --color-neutral-6:#adb5bd;

  --color-neutral-7:#6a7178;

  --color-neutral-8:#4f575e;

  --color-neutral-9:#272b30;

  --color-neutral-10:#101213;

  --color-neutral-login:#ffffff7d;  

 }

  /*! App Font */

  html{

  color:var(--color-neutral-9);

  font-family:font-family, sans-serif;

  }

/*!Logo*/

/* Login Form*/

/* ===================================================================== */

/* Box-Shadow                                                           */

/* ===================================================================== */

/* Login and Splash Image */

/* Dark Theme */

/* ===================================================================== */

/* Root - CSS Variables For Dark Theme                                              */

/* ===================================================================== */ 

[data-theme="dark"]{

      --color-primary: #cf1d29;

    --color-secondary: #244d79;

    --color-primary-hover: #a0000d;

    --color-primary-selected: #C33F45;

    --color-primary-lightest: #ecafb1;

    --color-primary-light: #db8c8c;

      /*! Color - Neutral */

  --color-neutral-0:#1a1c1e;

  --color-neutral-1:#f8f9fa;

  --color-neutral-2:#10121342;

  --color-neutral-3:#e9ecef;

  --color-neutral-4:#272b305e;

  --color-neutral-5:#2c2c2c;

  --color-neutral-6:#adb5bd;

  --color-neutral-7:#6a7178;

  --color-neutral-8:#f8f9fa;

  --color-neutral-9:#fff;

  --color-neutral-10:#101213;

    --color-neutral-login:#1a1c1ecc; 

  /*! Color - Semantic */

  --color-error-light:#fceaea;

  --color-error:#dc2020;

  --color-warning-light:#fdf6e5;

  --color-warning:#e9a100;

  --color-success-light:#eaf3eb;

  --color-success:#29823b;

  --color-info-light:#e5f5fc;

  --color-info:#017aad;

  /*! Overlays */

  --overlay-background:rgba(0, 0, 0, 0.25);

  /*! Elevation / Shadow */

  --shadow-none:none;

  --shadow-xs:0 1px 2px rgba(0, 0, 0, 0.1);

  --shadow-s:0 2px 4px rgba(0, 0, 0, 0.1);

  --shadow-m:0 4px 6px rgba(0, 0, 0, 0.1);

  --shadow-l:0 6px 8px rgba(0, 0, 0, 0.1);

  --shadow-xl:0 8px 10px rgba(0, 0, 0, 0.1);

  /*! App Settings */

  --header-color:#1a1c1e;

  --color-background-body:#101213;

  --color-background-login:#272b30;

  --login-background-light:#101213;

}

I hope this will help you and In case of any issue ping me I'll try to solve it for you
Thanks.