amis/scss/themes/dark.scss

// 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%);

$background: #333538;
$background-head: #191c22;

$body-bg: $background;
$Page-aside-bg: #3c3c3c;
$Panel-bg: #302d2a;
$borderColor: $black;
$link-color: $info;

$borderColor: #656565;

$Button--default-bg: $black;
$Calendar-btnCancel-bg: $background-head;
$Calendar-cell-bg: $Panel-bg;

$Card-bg: $Panel-bg;
$Card-onModified-bg: $dark;
$Card-onModified-color: $text-color;
$Card-onChecked-bg: $black;
$Card-onChecked-color: $text-color;
$Card-actions-onHover-bg: $dark;
$Card-actions-onHover-color: $text-color;

$Checkbox-gb: linear-gradient(#515151, #4b4b4b);
$Checkbox-onHover-color: $blue;
$ColorPicker-bg: $background;
$DatePicker-bg: $background;
$DatePicker-header-select-borderColor: $background;
$DropDown-menu-bg: $background;
$Fieldset-legend-bgColor: $background;

$Form-input-bg: #3c3c3c;

$Form-input-addOnBg: $Form-input-bg;
$Form-input-color: $text-color;
$Form-input-onDisabled-bg: $Panel-bg;
$Form-select-bg: $background;
$Form-select-menu-bg: $background;
$Form-select-onHover-bg: $background-head;
$Form-selectValue-bg: $Panel-bg;
$Form-selectValue-color: $text-color;

$TreeSelect-popover-bg: $Panel-bg;

$IconPicker-tab-onActive-bg: $background;
$InputGroup-select-bg: $background;
$InputGroup-select-onFocused-bg: $Panel-bg;
$istItem-onModified-bg: $black;

$Layout-aside-bg: $background-head;
$Layout-aside-onAcitve-bg: $Panel-bg;
$Layout-aside-onHover-bg: #404040;
$Layout-aside-subList-bg: #131519;
$Layout-header-bg: $background-head;

$List-bg: $Panel-bg;
$ListControl-item-bg: $background;
$ListControl-item-onActive-before-bg: $background;
$ListItem--strip-bg: $background;
$ListItem-onChecked-bg: $black;
$ListItem-onChecked-color: $text-color;
$ListItem-onModified-color: $text-color;

$Number-handler-bg: $background;

$Panel--default-bg: linear-gradient(#524e48, #423e3a);
$Panel-footerBg: linear-gradient(#524e48, #423e3a);
$PopOver-bg: $background;

$Table-onHover-bg: $dark;
$Table-strip-bg: $Panel-bg;
$Table-thead-bg: #2f2f2f;
$Table-onChecked-bg: $black;
$Table-onChecked-color: $text-color;
$Table-onModified-bg: $black;
$Table-onModified-color: $text-color;

$Tabs--card-bg: #323639;
$Tabs--card-borderTopColor: $background;
$Tabs--card-onActive-bg: $Panel-bg;
$Tabs--radio-bg: $Panel-bg;
$Tabs-content-bg: $Panel-bg;
$Tabs-onActive-bg: $Panel-bg;
$Tabs-onActive-borderColor: $borderColor;
$Tabs-onActive-color: lighten($text-color, 10%);
$Tabs-onHover-borderColor: $Tabs-onActive-borderColor;

$Tabs--radio-bg: $Panel-bg;

$Tooltip--attr-color: $text-color;
$TransferSelect--table-heading-bg: $background;
$Wizard-steps-bg: $background-head;
$Wizard-steps-li-onActive-arrow-bg: $Panel-bg;
$Wizard-steps-li-onActive-bg: $Panel-bg;

button[disabled],
html input[disabled] {
  cursor: not-allowed;
}

input {
  color: $text-color;
  background: $Form-input-bg;
}

pre {
  color: $text-color;
  background: $background;
}

.rdtPicker {
  background: $background;
}

.rdtPicker th {
  border-bottom: none;
}

.fr-toolbar {
  background: $background;
}

.markdown-body {
  color: $text-color;
}

@import '../functions';
@import '../variables';
@import '../mixins';
@import '../base/reset';
@import '../base/normalize';
@import '../base/typography';

@import '../layout/layout';
@import '../layout/grid';
@import '../layout/aside';
@import '../layout/hbox';
@import '../layout/vbox';
@import '../components/modal';
@import '../components/drawer';
@import '../components/tooltip';
@import '../components/popover';
@import '../components/toast';
@import '../components/alert';
@import '../components/tabs';
@import '../components/nav';
@import '../components/page';
@import '../components/remark';
@import '../components/chart';
@import '../components/video';
@import '../components/audio';
@import '../components/panel';
@import '../components/service';
@import '../components/spinner';
@import '../components/button';
@import '../components/button-group';
@import '../components/dropdown';
@import '../components/collapse';
@import '../components/color';
@import '../components/context-menu';
@import '../components/wizard';
@import '../components/crud';
@import '../components/table';
@import '../components/list';
@import '../components/cards';
@import '../components/card';
@import '../components/quick-edit';
@import '../components/popoverable';
@import '../components/copyable';
@import '../components/divider';
@import '../components/pagination';
@import '../components/wrapper';
@import '../components/status';
@import '../components/carousel';
@import '../components/image-gallery';
@import '../components/images';

@import '../components/form/fieldset';
@import '../components/form/group';
@import '../components/form/input-group';
@import '../components/form/text';
@import '../components/form/textarea';
@import '../components/form/checks';
@import '../components/form/city';
@import '../components/form/switch';
@import '../components/form/number';
@import '../components/form/select';
@import '../components/form/list';
@import '../components/form/location';
@import '../components/form/matrix';
@import '../components/form/color';
@import '../components/form/date';
@import '../components/form/date-range';
@import '../components/form/image';
@import '../components/form/file';
@import '../components/form/editor';
@import '../components/form/rich-text';
@import '../components/form/range';
@import '../components/form/repeat';
@import '../components/form/tree';
@import '../components/form/tree-select';
@import '../components/form/combo';
@import '../components/form/sub-form';
@import '../components/form/chained-select';
@import '../components/form/picker';
@import '../components/form/qr-code';
@import '../components/form/tag';
@import '../components/form/rating';
@import '../components/form/transfer-select';
@import '../components/form/nested-select';
@import '../components/form/icon-picker';
@import '../components/form/form';

@import '../utilities';