added dark mode
This commit is contained in:
@@ -4,6 +4,7 @@
|
||||
@import (less) './scroll.less';
|
||||
@import (less) "./fonts.less";
|
||||
@import (less) './var.less';
|
||||
@import (less) './theme.less';
|
||||
@import (less) './ant-override.less';
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,431 @@
|
||||
@import (less) './var.less';
|
||||
|
||||
html {
|
||||
color-scheme: light;
|
||||
--admin-primary: @gold-color-light;
|
||||
--admin-gold: @gold-color;
|
||||
--admin-gold-light: @gold-color-light;
|
||||
--admin-gold-hover: @gold-color-hover;
|
||||
--admin-bg-body: #f0f2f5;
|
||||
--admin-bg-surface: #ffffff;
|
||||
--admin-bg-elevated: #ffffff;
|
||||
--admin-bg-muted: #fafafa;
|
||||
--admin-bg-subtle: #f6f6f4;
|
||||
--admin-bg-hover: #f5f5f5;
|
||||
--admin-border: #f0f0f0;
|
||||
--admin-border-strong: #d9d9d9;
|
||||
--admin-text: rgba(0, 0, 0, 0.88);
|
||||
--admin-text-secondary: rgba(0, 0, 0, 0.45);
|
||||
--admin-text-muted: rgba(0, 0, 0, 0.65);
|
||||
--admin-shadow: rgba(0, 0, 0, 0.06);
|
||||
--admin-menu-selected: @gold-color-muted;
|
||||
--admin-menu-selected-text: @gold-color-dark;
|
||||
--admin-gradient-surface: #ffffff;
|
||||
--admin-gradient-surface-fade: rgba(255, 255, 255, 0.85);
|
||||
}
|
||||
|
||||
html.is-dark {
|
||||
color-scheme: dark;
|
||||
--admin-primary: @gold-color-light;
|
||||
--admin-gold: @gold-color-light;
|
||||
--admin-gold-light: @gold-color-hover;
|
||||
--admin-gold-hover: #edd054;
|
||||
--admin-bg-body: #141414;
|
||||
--admin-bg-surface: #141414;
|
||||
--admin-bg-elevated: #1f1f1f;
|
||||
--admin-bg-muted: #262626;
|
||||
--admin-bg-subtle: #1a1a1a;
|
||||
--admin-bg-hover: rgba(201, 162, 39, 0.1);
|
||||
--admin-border: rgba(201, 162, 39, 0.18);
|
||||
--admin-border-strong: rgba(201, 162, 39, 0.32);
|
||||
--admin-text: rgba(255, 255, 255, 0.85);
|
||||
--admin-text-secondary: rgba(255, 255, 255, 0.45);
|
||||
--admin-text-muted: rgba(255, 255, 255, 0.65);
|
||||
--admin-shadow: rgba(0, 0, 0, 0.45);
|
||||
--admin-menu-selected: @gold-color-light;
|
||||
--admin-menu-selected-text: #141414;
|
||||
--admin-gradient-surface: #141414;
|
||||
--admin-gradient-surface-fade: rgba(20, 20, 20, 0.85);
|
||||
|
||||
--ant-primary-color: @gold-color-light;
|
||||
--ant-primary-color-hover: @gold-color-hover;
|
||||
--ant-primary-color-active: @gold-color;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--admin-bg-body);
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.ant-layout-header.@{prefixCls}-basic-header {
|
||||
padding: 0 12px !important;
|
||||
line-height: normal !important;
|
||||
}
|
||||
|
||||
.@{prefixCls}-base-button {
|
||||
display: inline-flex !important;
|
||||
align-items: center !important;
|
||||
justify-content: center !important;
|
||||
height: auto !important;
|
||||
line-height: 1 !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary {
|
||||
background: var(--admin-gold-light) !important;
|
||||
border-color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary:not([disabled]):hover,
|
||||
.ant-btn-primary:not([disabled]):focus {
|
||||
background: var(--admin-gold-hover) !important;
|
||||
border-color: var(--admin-gold-hover) !important;
|
||||
}
|
||||
|
||||
.ant-btn-primary:not([disabled]):active {
|
||||
background: var(--admin-gold) !important;
|
||||
border-color: var(--admin-gold) !important;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected,
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected > .ant-menu-submenu-title {
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
background-color: var(--admin-menu-selected) !important;
|
||||
}
|
||||
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-item-selected::after,
|
||||
.ant-menu-horizontal:not(.ant-menu-dark) > .ant-menu-submenu-selected::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.admin-bg-surface {
|
||||
background-color: var(--admin-bg-surface);
|
||||
}
|
||||
|
||||
.admin-bg-elevated {
|
||||
background-color: var(--admin-bg-elevated);
|
||||
}
|
||||
|
||||
.admin-stat-muted {
|
||||
background-color: var(--admin-bg-muted);
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.stat-inner {
|
||||
border: 1px solid rgba(0, 0, 0, 0.06);
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
html.is-dark {
|
||||
.stat-inner {
|
||||
border-color: var(--admin-border);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.bg-green-100 .stat-inner {
|
||||
background: rgba(34, 197, 94, 0.12);
|
||||
border-color: rgba(34, 197, 94, 0.22);
|
||||
}
|
||||
|
||||
.bg-red-100 .stat-inner {
|
||||
background: rgba(239, 68, 68, 0.12);
|
||||
border-color: rgba(239, 68, 68, 0.22);
|
||||
}
|
||||
|
||||
.bg-amber-100 .stat-inner {
|
||||
background: rgba(245, 158, 11, 0.12);
|
||||
border-color: rgba(245, 158, 11, 0.22);
|
||||
}
|
||||
|
||||
.bg-amber-100 {
|
||||
background-color: rgba(245, 158, 11, 0.14) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-white\/70 {
|
||||
background-color: rgba(255, 255, 255, 0.06) !important;
|
||||
}
|
||||
|
||||
.ant-table-wrapper,
|
||||
.ant-table,
|
||||
.ant-table-container,
|
||||
.ant-table-content,
|
||||
.ant-table-thead > tr > th,
|
||||
.ant-table-tbody > tr > td {
|
||||
border-color: var(--admin-border) !important;
|
||||
}
|
||||
|
||||
.table-toolbar {
|
||||
background: transparent !important;
|
||||
}
|
||||
.bg-white {
|
||||
background-color: var(--admin-bg-elevated) !important;
|
||||
}
|
||||
|
||||
.bg-green-100 {
|
||||
background-color: rgba(34, 197, 94, 0.14) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
background-color: rgba(239, 68, 68, 0.14) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-blue-100 {
|
||||
background-color: rgba(59, 130, 246, 0.14) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-yellow-100 {
|
||||
background-color: rgba(234, 179, 8, 0.14) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-orange-100,
|
||||
.bg-orange-50 {
|
||||
background-color: rgba(249, 115, 22, 0.14) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-blue-50 {
|
||||
background-color: rgba(59, 130, 246, 0.12) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-fuchsia-100 {
|
||||
background-color: rgba(217, 70, 239, 0.14) !important;
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
background-color: var(--admin-bg-muted) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-gray-50 {
|
||||
background-color: var(--admin-bg-hover) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.bg-gray-50\/60 {
|
||||
background-color: rgba(48, 48, 48, 0.65) !important;
|
||||
color: var(--admin-text);
|
||||
}
|
||||
|
||||
.border-gray-100,
|
||||
.border-gray-200,
|
||||
.border-gray-300 {
|
||||
border-color: var(--admin-border) !important;
|
||||
}
|
||||
|
||||
.text-gray-400,
|
||||
.text-gray-500 {
|
||||
color: var(--admin-text-secondary) !important;
|
||||
}
|
||||
|
||||
.text-gray-600,
|
||||
.text-gray-700 {
|
||||
color: var(--admin-text-muted) !important;
|
||||
}
|
||||
|
||||
.text-gray-800,
|
||||
.text-gray-900 {
|
||||
color: var(--admin-text) !important;
|
||||
}
|
||||
|
||||
.text-green-700 {
|
||||
color: #4ade80 !important;
|
||||
}
|
||||
|
||||
.text-red-600 {
|
||||
color: #f87171 !important;
|
||||
}
|
||||
|
||||
.ant-menu-light.ant-menu-horizontal {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid var(--admin-border) !important;
|
||||
color: var(--admin-text-muted) !important;
|
||||
}
|
||||
|
||||
.ant-menu-light.ant-menu-horizontal > .ant-menu-item,
|
||||
.ant-menu-light.ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
|
||||
color: var(--admin-text-muted) !important;
|
||||
}
|
||||
|
||||
.ant-menu-light.ant-menu-horizontal > .ant-menu-item-selected,
|
||||
.ant-menu-light.ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title {
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
background: var(--admin-menu-selected) !important;
|
||||
}
|
||||
|
||||
.ant-menu-light.ant-menu-horizontal > .ant-menu-item-selected::after,
|
||||
.ant-menu-light.ant-menu-horizontal > .ant-menu-submenu-selected::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark.ant-menu-horizontal {
|
||||
background: transparent !important;
|
||||
border-bottom: 1px solid var(--admin-border) !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item,
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
|
||||
color: var(--admin-text-muted) !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected,
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title {
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
background: var(--admin-menu-selected) !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected .ant-menu-item-icon,
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected .ant-menu-item-icon,
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected .ant-menu-submenu-arrow {
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected::after,
|
||||
.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected::after {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.ant-modal-content,
|
||||
.ant-modal-header,
|
||||
.ant-modal-body {
|
||||
background-color: #1f1f1f !important;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.ant-modal-footer {
|
||||
background-color: #1f1f1f !important;
|
||||
border-top: 1px solid var(--admin-border-strong) !important;
|
||||
}
|
||||
|
||||
.ant-modal-title,
|
||||
.ant-modal-close-x {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.ant-tabs-tab {
|
||||
color: rgba(255, 255, 255, 0.65) !important;
|
||||
}
|
||||
|
||||
.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
|
||||
color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-tabs-ink-bar {
|
||||
background: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-card {
|
||||
background: #1f1f1f !important;
|
||||
border-color: var(--admin-border-strong) !important;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.ant-card-body {
|
||||
padding: 12px !important;
|
||||
}
|
||||
|
||||
.ant-card-head {
|
||||
background: #1f1f1f !important;
|
||||
border-color: var(--admin-border-strong) !important;
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.ant-input,
|
||||
.ant-input-affix-wrapper,
|
||||
.ant-select-selector,
|
||||
.ant-picker,
|
||||
.ant-divider {
|
||||
border-color: var(--admin-border-strong) !important;
|
||||
}
|
||||
|
||||
.ant-descriptions-item-label,
|
||||
.ant-descriptions-item-content {
|
||||
color: rgba(255, 255, 255, 0.85) !important;
|
||||
}
|
||||
|
||||
.top-menu-nav .ant-menu-horizontal > .ant-menu-item,
|
||||
.top-menu-nav .ant-menu-horizontal > .ant-menu-submenu,
|
||||
.top-menu-nav .ant-menu-horizontal > .ant-menu-submenu > .ant-menu-submenu-title {
|
||||
padding: 0 10px !important;
|
||||
height: 36px !important;
|
||||
line-height: 36px !important;
|
||||
margin-top: 0 !important;
|
||||
top: 0 !important;
|
||||
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected,
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected {
|
||||
background-color: var(--admin-menu-selected) !important;
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected .ant-menu-item-icon,
|
||||
.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected .anticon,
|
||||
.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected .ant-menu-title-content,
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-item-icon,
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected .anticon,
|
||||
.ant-menu.ant-menu-dark .ant-menu-item-selected .ant-menu-title-content {
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
}
|
||||
|
||||
.ant-menu-dark .ant-menu-item:not(.ant-menu-item-selected):hover,
|
||||
.ant-menu-dark .ant-menu-submenu:not(.ant-menu-submenu-selected) > .ant-menu-submenu-title:hover {
|
||||
background-color: var(--admin-bg-hover) !important;
|
||||
color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
background: var(--admin-gold-light) !important;
|
||||
border-color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover,
|
||||
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active {
|
||||
color: var(--admin-menu-selected-text) !important;
|
||||
background: var(--admin-gold-hover) !important;
|
||||
border-color: var(--admin-gold-hover) !important;
|
||||
}
|
||||
|
||||
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before,
|
||||
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):hover::before,
|
||||
.ant-radio-group-solid .ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled):active::before {
|
||||
background-color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper:hover {
|
||||
color: var(--admin-gold-hover) !important;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled) {
|
||||
color: var(--admin-gold-light) !important;
|
||||
border-color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-radio-button-wrapper-checked:not(.ant-radio-button-wrapper-disabled)::before {
|
||||
background-color: var(--admin-gold-light) !important;
|
||||
}
|
||||
|
||||
.ant-input:focus,
|
||||
.ant-input-focused,
|
||||
.ant-input-affix-wrapper-focused,
|
||||
.ant-input-affix-wrapper:focus,
|
||||
.ant-select-focused:not(.ant-select-disabled) .ant-select-selector,
|
||||
.ant-picker-focused {
|
||||
border-color: var(--admin-gold-light) !important;
|
||||
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.18) !important;
|
||||
}
|
||||
}
|
||||
@@ -26,9 +26,15 @@ html{
|
||||
@header-height:56px;
|
||||
@prefixCls-font-family: 'iran-sans';
|
||||
@ant-prefix: @prefixCls;
|
||||
@primary-color:#2563eb; // #727071; //#abc2f7; //#f4474d;
|
||||
@second-color: #3b82f6; // #727071; //#abc2f7; //#f4474d;
|
||||
@third-color: #B2B2B2; // #727071; //#abc2f7; //#f4474d;
|
||||
@gold-color: #c9a227;
|
||||
@gold-color-light: #d4af37;
|
||||
@gold-color-hover: #e0bc3a;
|
||||
@gold-color-dark: #92670a;
|
||||
@gold-color-muted: rgba(201, 162, 39, 0.14);
|
||||
|
||||
@primary-color: @gold-color-light;
|
||||
@second-color: @gold-color-hover;
|
||||
@third-color: @gold-color;
|
||||
|
||||
@bg-color-1: #F9FAFB;
|
||||
@bg-color-2: #F6F6F4;
|
||||
@@ -37,10 +43,10 @@ html{
|
||||
@border-radius-base: 4px;
|
||||
|
||||
html{
|
||||
--ant-primary-color:@primary-color;
|
||||
--ant-primary-color-hover:@second-color;
|
||||
--ant-primary-color-active:@third-color;
|
||||
--ant-primary-1:#f2f3ff;//#f6f6f4;
|
||||
--ant-primary-color: @gold-color-light;
|
||||
--ant-primary-color-hover: @gold-color-hover;
|
||||
--ant-primary-color-active: @gold-color;
|
||||
--ant-primary-1: rgba(201, 162, 39, 0.12);
|
||||
--border-radius-base:@border-radius-base;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user