mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-16 01:40:53 +08:00
136 lines
4.5 KiB
SCSS
136 lines
4.5 KiB
SCSS
@import '../functions';
|
||
|
||
// dark 主题
|
||
// 参考： https://developer.apple.com/design/human-interface-guidelines/macos/visual-design/color/
|
||
|
||
$ns: 'dark-';
|
||
|
||
$orange: #ff9f0b;
|
||
$yellow: #ffd609;
|
||
$green: #32d74b;
|
||
$turquoise: #00d1b2;
|
||
$cyan: #17a2b8;
|
||
$blue: #0983ff;
|
||
$purple: #bf5af2;
|
||
$red: #dc3545;
|
||
|
||
$primary: $blue;
|
||
$info: #2296f3;
|
||
$success: $green;
|
||
$warning: $orange;
|
||
$danger: $red;
|
||
$light: #3a3a3a;
|
||
$dark: #1e1f22;
|
||
$black: #141316;
|
||
|
||
$text-color: rgb(243, 241, 241);
|
||
|
||
$text--muted-color: #6c6c6c;
|
||
$text--loud-color: lighten($text-color, 10%);
|
||
|
||
$Page-aside-bg: #3c3c3c;
|
||
$Panel-bg: #302d2a;
|
||
$link-color: $info;
|
||
|
||
@import '../variables';
|
||
@import '../properties';
|
||
|
||
/* 此处放置需要override的变量，因为部分变量已经在variables.scss中定义 */
|
||
$Table-strip-bg: $Panel-bg;
|
||
|
||
:root {
|
||
--Panel-bg: #{$Panel-bg};
|
||
--background-head: #191c22;
|
||
--background: #333538;
|
||
--body-bg: var(--background);
|
||
--borderColor: #656565;
|
||
--Button--default-bg: var(--black);
|
||
--Button-onDisabled-bg: var(--Panel-bg);
|
||
--Calendar-btnCancel-bg: var(--background-head);
|
||
--Calendar-cell-bg: var(--Panel-bg);
|
||
--Card-actions-onHover-bg: var(--dark);
|
||
--Card-actions-onHover-color: var(--text-color);
|
||
--Card-bg: var(--Panel-bg);
|
||
--Card-onChecked-bg: var(--black);
|
||
--Card-onChecked-color: var(--text-color);
|
||
--Card-onModified-bg: var(--dark);
|
||
--Card-onModified-color: var(--text-color);
|
||
--Checkbox-gb: linear-gradient(#515151, #4b4b4b);
|
||
--Checkbox-onHover-color: var(--blue);
|
||
--ColorPicker-bg: var(--background);
|
||
--DatePicker-bg: var(--background);
|
||
--DatePicker-header-select-borderColor: var(--background);
|
||
--DropDown-menu-bg: var(--background);
|
||
--Drawer-header-bg: var(--background);
|
||
--Fieldset-legend-bgColor: var(--background);
|
||
|
||
--Form-item-fontSize: var(--fontSizeBase);
|
||
--Form-item-fontColor: var(--body-color);
|
||
--Form-input-addOnBg: var(--Form-input-bg);
|
||
--Form-input-bg: #3c3c3c;
|
||
--Form-input-color: var(--text-color);
|
||
--Form-input-onDisabled-bg: var(--Panel-bg);
|
||
--Form-select-bg: var(--background);
|
||
--Form-select-menu-bg: var(--background);
|
||
--Form-select-onHover-bg: var(--background-head);
|
||
--Form-selectValue-bg: var(--Panel-bg);
|
||
--Form-selectValue-color: var(--text-color);
|
||
--IconPicker-tab-onActive-bg: var(--background);
|
||
--InputGroup-select-bg: var(--background);
|
||
--InputGroup-select-onFocused-bg: var(--Panel-bg);
|
||
--istItem-onModified-bg: var(--black);
|
||
--Layout-aside-bg: var(--background-head);
|
||
--Layout-aside-onAcitve-bg: var(--Panel-bg);
|
||
--Layout-aside-onHover-bg: #404040;
|
||
--Layout-aside-subList-bg: #131519;
|
||
--Layout-header-bg: var(--background-head);
|
||
--List-bg: var(--Panel-bg);
|
||
--ListControl-item-bg: var(--background);
|
||
--ListControl-item-onActive-before-bg: var(--background);
|
||
--ListItem--strip-bg: var(--background);
|
||
--ListItem-onChecked-bg: var(--black);
|
||
--ListItem-onChecked-color: var(--text-color);
|
||
--ListItem-onModified-color: var(--text-color);
|
||
--Number-handler-bg: var(--background);
|
||
--Panel--default-bg: #323232;
|
||
--Panel-footerBg: #323232;
|
||
--Panel-footerBorderColor: #656565;
|
||
--PopOver-bg: var(--background);
|
||
--Table-onChecked-bg: var(--black);
|
||
--Table-onChecked-color: var(--text-color);
|
||
--Table-onHover-bg: var(--dark);
|
||
--Table-onHover-bg-rgba: 30, 31, 34;
|
||
--Table-onModified-bg: var(--black);
|
||
--Table-onModified-color: var(--text-color);
|
||
--Table-strip-bg: var(--Panel-bg);
|
||
--Table-thead-bg: #2f2f2f;
|
||
--Table-searchableForm-backgroundColor: var(--background);
|
||
--Tabs--card-bg: #323639;
|
||
--Tabs--card-borderTopColor: var(--background);
|
||
--Tabs--card-onActive-bg: var(--Panel-bg);
|
||
--Tabs--radio-bg: var(--Panel-bg);
|
||
--Tabs--radio-bg: var(--Panel-bg);
|
||
--Tabs-content-bg: var(--Panel-bg);
|
||
--Tabs-onActive-bg: var(--Panel-bg);
|
||
--Tabs-onActive-color: #{lighten($text-color, 10%)};
|
||
--Tabs-onHover-borderColor: var(--Tabs-onActive-borderColor);
|
||
--Tabs--chrome-onHover-bg: #36383c;
|
||
--Tabs--chrome-bg: #333538;
|
||
--Tooltip--attr-color: var(--text-color);
|
||
--Transfer-title-bg: #2f2f2f;
|
||
--TransferSelect--table-heading-bg: var(--background);
|
||
--TreeSelect-popover-bg: var(--Panel-bg);
|
||
--Wizard-steps-bg: var(--background-head);
|
||
--Wizard-steps-li-onActive-arrow-bg: var(--Panel-bg);
|
||
--Wizard-steps-li-onActive-bg: var(--Panel-bg);
|
||
--Checkbox-onDisabled-color: #4e4e4e;
|
||
--Checkbox-onDisabled-bg: var(--Panel-bg);
|
||
--Radio-onDisabled-color: #4e4e4e;
|
||
--Radio-onDisabled-bg: var(--Panel-bg);
|
||
|
||
// --Nav-subNav-bg: var(--Panel-bg);
|
||
|
||
// timeline
|
||
--TimelineItem--text-primary-color: #{$text-color};
|
||
}
|