OrangeHRM Dark Theme

blob.svg

<!-- replace src/orangehrmAuthenticationPlugin/components/blob.svg -->
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 560 400" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M560 200c0 76.835-34.459 146.924-91.128 200H0V0h468.872C525.541 53.076 560 123.165 560 200z" xmlns="http://www.w3.org/2000/svg" fill="#121212"/>
</svg>

overrides.scss

/// Add to src/core/styles/overrides.scss

$oxd-background-pastel-white-color: #242424;
$oxd-sidepanel-bg-color: #121212;
$oxd-topbar-body-background: #121212;
$oxd-topbar-border: 1px solid #202020;
$oxd-scrollbar-track-color: rgba(255, 255, 255, 0.08);
$oxd-scrollbar-thumb-color: rgba(255, 255, 255, 0.16);
$oxd-background-light-gray-color: rgba(255, 255, 255, 0.12);
$oxd-topbar-tab-background-color: #202020;
$oxd-dropdown-background-color: #1d272c;
$oxd-dropdown-item-hover-color: #202020;
$oxd-background-white-shadow-color: #1d1e26;
$oxd-table-filter-background-color: #121212;
$oxd-divider-color: rgba(255, 255, 255, 0.08);

.oxd-form-loader {
  background-color: #121212 !important;
}

.oxd-dropdown-menu {
  border: 1px solid #242424 !important;
  background-color: #121212 !important;
}

input,
.oxd-autocomplete-text-input {
  background-color: transparent !important;
}

.orangehrm-card-container,
.orangehrm-paper-container {
  background-color: #121212;
}

.orangehrm-container {
  background-color: #1d1e26;
}