vdesign-ui 0.2.18 → 0.2.20

package/dist/token.css

@@ -9,6 +9,11 @@ html {
 --spacing-actionbar-padding_y:20px;
 --color-actionbar-bg:#141419;
 }}
+html[theme="dark"] {
+--height-actionbar-content:46px;
+--spacing-actionbar-padding_y:20px;
+--color-actionbar-bg:#141419;
+}
 
 html {
 --width-actions-form_small:72px;
@@ -49,6 +54,25 @@ html {
 --color-actions-bg-blue-disable:#09506f;
 --color-actions-bg-gray-disable:#2C2C2E;
 }}
+html[theme="dark"] {
+--width-actions-form_small:72px;
+--width-actions-form_large:94px;
+--width-actions-card:40px;
+--spacing-actions-form-padding_y:15px;
+--spacing-actions-card_item-margin_y:14px;
+--icon-actions-card:24px;
+--icon-actions-size:28px;
+--color-actions-text:#ffffff;
+--color-actions-text-disable:rgba(255,255,255,.2);
+--color-actions-bg-green:#1bc47d;
+--color-actions-bg-warning:#eb5c31;
+--color-actions-bg-blue:#5998e9;
+--color-actions-bg-gray:#696970;
+--color-actions-bg-green-disable:#113226;
+--color-actions-bg-warning-disable:#3C1A14;
+--color-actions-bg-blue-disable:#09506f;
+--color-actions-bg-gray-disable:#2C2C2E;
+}
 
 html {
 --height-activityviews-title_describe:74px;
@@ -105,6 +129,33 @@ html {
 --color-activityviews-actionsheet_title:rgba(235,235,245,.65);
 --color-activityviews-bar:rgba(84,84,88,.85);
 }}
+html[theme="dark"] {
+--height-activityviews-title_describe:74px;
+--height-activityviews-actionsheet:56px;
+--height-activityviews-actionsheet_divider:8px;
+--height-activityviews-bar:3px;
+--radius-activityviews-title:14px;
+--radius-activityviews-bar:1.5px;
+--spacing-activityviews-padding_left:20px;
+--spacing-activityviews-padding_right:20px;
+--spacing-activityviews-head-padding_top:16px;
+--spacing-activityviews-head-padding_bottom:16px;
+--spacing-activityviews-describe-margin_top:4px;
+--spacing-activityviews-title-margin_right:8px;
+--spacing-activityviews-actionsheet_title-padding_y:16px;
+--spacing-activityviews-cancel-margin_top:8px;
+--spacing-activityviews-bar-margin_top:8px;
+--spacing-activityviews-bar-margin_bottom:5px;
+--icon-activityviews-close:26px;
+--width-activityviews-bar:35px;
+--color-activityviews-mask-bg:rgba(0,0,0,.85);
+--color-activityviews-bg:#141419;
+--color-activityviews-title:#F2F5FF;
+--color-activityviews-text_describe:rgba(235,235,245,.65);
+--color-activityviews-actionsheet_divider:rgba(0,0,0,.15);
+--color-activityviews-actionsheet_title:rgba(235,235,245,.65);
+--color-activityviews-bar:rgba(84,84,88,.85);
+}
 
 html {
 --height-badge-count:16px;
@@ -129,6 +180,17 @@ html {
 --color-badge-bg:#eb5c31;
 --color-badge-text:#ffffff;
 }}
+html[theme="dark"] {
+--height-badge-count:16px;
+--height-badge-dot:8px;
+--width-badge-count_small:16px;
+--width-badge-dot:8px;
+--radius-badge-count:8px;
+--spacing-badge-count-padding_y:5px;
+--spacing-badge-count-padding_x:1px;
+--color-badge-bg:#eb5c31;
+--color-badge-text:#ffffff;
+}
 
 html {
 --height-button-l:48px;
@@ -373,6 +435,127 @@ html {
 --color-button-bg-disable:rgba(118,118,128,.15);
 --color-button-icon-disable:rgba(235,235,245,.3);
 }}
+html[theme="dark"] {
+--height-button-l:48px;
+--height-button-m:36px;
+--height-button-s:28px;
+--height-button-buy_sell:48px;
+--radius-button-l:10px;
+--radius-button-m:6px;
+--radius-button-s:14px;
+--radius-button-buy_sell-1:6px;
+--radius-button-buy_sell-2:4px;
+--spacing-button-l-padding_left:24px;
+--spacing-button-l-padding_right:24px;
+--spacing-button-m-padding_left:16px;
+--spacing-button-m-padding_right:16px;
+--spacing-button-s-padding_left:12px;
+--spacing-button-s-padding_right:12px;
+--spacing-button-l_icon-margin_y:6px;
+--spacing-button-m_icon-margin_y:4px;
+--spacing-button-s_icon-margin_y:4px;
+--spacing-button-double-margin_y:32px;
+--spacing-button-double-margin_x:16px;
+--spacing-button-double-margin_mid:13px;
+--spacing-button-icon_l_text-margin_top:6px;
+--spacing-button-icon_m_text-margin_top:4px;
+--spacing-button-icon_s_text-margin_top:2px;
+--spacing-button-main-margin_y:80px;
+--icon-button-l:20px;
+--icon-button-m:16px;
+--icon-button-s:12px;
+--width-button-border:1px;
+--color-button-primary-bg-default:#1bc47d;
+--color-button-primary-text-default:#ffffff;
+--color-button-primary-bg-press:#09825a;
+--color-button-primary-text-press:#ffffff;
+--color-button-primary-bg-disable:rgba(27,196,125,.25);
+--color-button-primary-text-disable:rgba(235,235,245,.3);
+--color-button-secondary-bg-default:rgba(118,118,128,.15);
+--color-button-secondary-text-default:#1bc47d;
+--color-button-secondary-bg-press:rgba(118,118,128,.35);
+--color-button-secondary-text-press:#1bc47d;
+--color-button-secondary-bg-disable:rgba(118,118,128,.15);
+--color-button-secondary-text-disable:rgba(27,196,125,.25);
+--color-button-warning-bg-default:rgba(118,118,128,.15);
+--color-button-warning-text-default:#eb5c31;
+--color-button-warning-bg-press:rgba(118,118,128,.35);
+--color-button-warning-text-press:#eb5c31;
+--color-button-warning-bg-disable:rgba(118,118,128,.15);
+--color-button-warning-text-disable:rgba(235,92,49,.25);
+--color-button-warning_grey-bg-default:rgba(118,118,128,.15);
+--color-button-warning_grey-text-default:#eb5c31;
+--color-button-warning_grey-bg-press:rgba(118,118,128,.35);
+--color-button-warning_grey-text-press:#eb5c31;
+--color-button-warning_grey-bg-disable:rgba(118,118,128,.15);
+--color-button-warning_grey-text-disable:rgba(235,92,49,.25);
+--color-button-tertiary-bg-default:rgba(118,118,128,.15);
+--color-button-tertiary-text-default:#F2F5FF;
+--color-button-tertiary-bg-press:rgba(118,118,128,.35);
+--color-button-tertiary-text-press:#F2F5FF;
+--color-button-tertiary-bg-disable:rgba(118,118,128,.15);
+--color-button-tertiary-text-disable:rgba(235,235,245,.3);
+--color-button-tertiary_grey-bg-default:rgba(118,118,128,.15);
+--color-button-tertiary_grey-text-default:#F2F5FF;
+--color-button-tertiary_grey-bg-press:rgba(118,118,128,.35);
+--color-button-tertiary_grey-text-press:#F2F5FF;
+--color-button-tertiary_grey-bg-disable:rgba(118,118,128,.15);
+--color-button-tertiary_grey-text-disable:rgba(235,235,245,.3);
+--color-button-border-default:rgba(235,235,245,.3);
+--color-button-border-text-default:#F2F5FF;
+--color-button-border-press:#F2F5FF;
+--color-button-border-text-press:#F2F5FF;
+--color-button-border-disable:rgba(235,235,245,.3);
+--color-button-border-text-disable:rgba(235,235,245,.3);
+--color-button-border_primary-default:#1bc47d;
+--color-button-border_primary-text-default:#1bc47d;
+--color-button-border_primary-press:#09825a;
+--color-button-border_primary-text-press:#09825a;
+--color-button-border_primary-text-disable:rgba(27,196,125,.25);
+--color-button-border_primary-disable:rgba(27,196,125,.25);
+--color-button-border_warning-default:#eb5c31;
+--color-button-border_warning-text-default:#eb5c31;
+--color-button-border_warning-press:#db2c0d;
+--color-button-border_warning-text-press:#db2c0d;
+--color-button-border_warning-disable:rgba(235,92,49,.25);
+--color-button-border_warning-text-disable:rgba(235,92,49,.25);
+--color-button-border_reverse-default:rgba(255,255,255,.85);
+--color-button-border_reverse-text-default:#ffffff;
+--color-button-border_reverse-press:#ffffff;
+--color-button-border_reverse-text-press:rgba(255,255,255,.85);
+--color-button-border_reverse-disable:rgba(255,255,255,.3);
+--color-button-border_reverse-text-disable:rgba(255,255,255,.3);
+--color-button-primary_borderless_text-default:#1bc47d;
+--color-button-primary_borderless_text-press:#09825a;
+--color-button-primary_borderless_text-disable:rgba(27,196,125,.25);
+--color-button-warning_borderless_text-default:#eb5c31;
+--color-button-warning_borderless_text-press:#db2c0d;
+--color-button-warning_borderless_text-disable:rgba(235,92,49,.25);
+--color-button-link_text-default:#5998e9;
+--color-button-link_text-press:#076b9d;
+--color-button-link_text-disable:rgba(89,152,233,.25);
+--color-button-tertiary_borderless_text-default:#F2F5FF;
+--color-button-tertiary_borderless_text-press:rgba(235,235,245,.65);
+--color-button-tertiary_borderless_text-disable:rgba(235,235,245,.3);
+--color-button-buy-bg-default:#1bc47d;
+--color-button-buy-text-default:#ffffff;
+--color-button-buy-bg-press:#0da36b;
+--color-button-buy-text-press:#ffffff;
+--color-button-buy-bg-disable:rgba(27,196,125,.3);
+--color-button-buy-text-disable:#ffffff;
+--color-button-sell-bg-default:#f24822;
+--color-button-sell-text-default:#ffffff;
+--color-button-sell-bg-press:#db2c0d;
+--color-button-sell-text-press:#ffffff;
+--color-button-sell-bg-disable:rgba(242,72,34,.3);
+--color-button-sell-text-disable:#ffffff;
+--color-button-bg-default:rgba(118,118,128,.15);
+--color-button-icon-default:#F2F5FF;
+--color-button-bg-press:rgba(118,118,128,.35);
+--color-button-icon-press:#F2F5FF;
+--color-button-bg-disable:rgba(118,118,128,.15);
+--color-button-icon-disable:rgba(235,235,245,.3);
+}
 
 html {
 --height-check_radio-radio_button_s:32px;
@@ -479,6 +662,58 @@ html {
 --color-check_radio-radio_button_wrong-bg-active:rgba(235,92,49,.05);
 --color-check_radio-radio_wrong_border-active:#eb5c31;
 }}
+html[theme="dark"] {
+--height-check_radio-radio_button_s:32px;
+--height-check_radio-radio_button_m:40px;
+--height-check_radio-radio_button_l:44px;
+--height-check_radio-check_button_s:40px;
+--height-check_radio-check_button_m:52px;
+--height-check_radio-check_button_l:60px;
+--icon-check_radio-sizing:16px;
+--icon-check_radio-check_l:24px;
+--icon-check_radio-check_s:16px;
+--width-check_radio-radio_button_border-default:0.5px;
+--width-check_radio-radio_button_border-active:1px;
+--radius-check_radio-s:6px;
+--radius-check_radio-m:6px;
+--radius-check_radio-radio_l:10px;
+--radius-check_radio-check_l:6px;
+--spacing-check_radio-icon-margin_right:8px;
+--spacing-check_radio-text-margin_top:4px;
+--spacing-check_radio-group-margin_x:20px;
+--spacing-check_radio-check_icon-margin_bottom:4px;
+--spacing-check_radio-check_describe-margin_top:2px;
+--spacing-check_radio-check_icon-margin_right:4px;
+--spacing-check_radio-button-margin_xy:12px;
+--spacing-check_radio-item-margin_x:10px;
+--color-check_radio-default:rgba(84,84,88,.85);
+--color-check_radio-active:#1bc47d;
+--color-check_radio-disable:rgba(84,84,88,.3);
+--color-check_radio-active-disable:rgba(27,196,125,.25);
+--color-check_radio-text-default:#F2F5FF;
+--color-check_radio-text-disable:rgba(235,235,245,.3);
+--color-check_radio-text_describe-default:rgba(235,235,245,.65);
+--color-check_radio-text_describe-disable:rgba(235,235,245,.3);
+--color-check_radio-radio_button_text-default:#F2F5FF;
+--color-check_radio-radio_button_text-active:#1bc47d;
+--color-check_radio-radio_button_text-disable:rgba(235,235,245,.3);
+--color-check_radio-radio_button_bg-active:rgba(27,196,125,.05);
+--color-check_radio-radio_border-default:rgba(84,84,88,.85);
+--color-check_radio-radio_border-active:#1bc47d;
+--color-check_radio-radio_border-disable:rgba(84,84,88,.85);
+--color-check_radio-check_bg-default:rgba(118,118,128,.15);
+--color-check_radio-check_bg-active:rgba(27,196,125,.10);
+--color-check_radio-check_bg-disable:rgba(118,118,128,.15);
+--color-check_radio-check_button_text_describe-default:rgba(235,235,245,.65);
+--color-check_radio-check_button_text_describe-active:#1bc47d;
+--color-check_radio-check_button_text_describe-disable:rgba(235,235,245,.3);
+--color-check_radio-check_button_icon-default:rgba(235,235,245,.65);
+--color-check_radio-check_button_icon-active:#1bc47d;
+--color-check_radio-check_button_icon-disable:rgba(235,235,245,.3);
+--color-check_radio-radio_button_wrong-text-active:#eb5c31;
+--color-check_radio-radio_button_wrong-bg-active:rgba(235,92,49,.05);
+--color-check_radio-radio_wrong_border-active:#eb5c31;
+}
 
 html {
 --height-datalist-list:60px;
@@ -573,33 +808,79 @@ html {
 --color-datalist-option_chain-bg-4:#2C2C2E;
 --color-datalist-option_chain-divider:#000000;
 }}
-
-html {
---height-datepicker-range_picker_bg:36px;
---height-datepicker-range_picker_divider:2px;
---height-datepicker-title-month_year:58px;
---height-datepicker-week:30px;
---height-datepicker-date:39px;
---height-datepicker-today_dot:5px;
---height-datepicker-roll_bg:40px;
---width-datepicker-range_picker_divider:16px;
---radius-datepicker-range_picker_bg:8px;
---radius-datepicker-roll_bg:12px;
---spacing-datepicker-padding_y:20px;
---spacing-datepicker-range_picker-margin_top:10px;
---spacing-datepicker-range_picker-margin_bottom:0px;
---spacing-datepicker-icon_next-margin_y:36px;
---spacing-datepicker-date-margin_top:10px;
---spacing-datepicker-date-margin_bottom:13px;
---spacing-datepicker-date-margin_y:8px;
---spacing-datepicker-roll_month-margin_mid:32px;
---spacing-datepicker-roll_day-margin_mid:16px;
---spacing-datepicker-radio-padding_x:9px;
---icon-datepicker-next:16px;
---color-datepicker-range_picker-bg:#f7f8f9;
---color-datepicker-range_picker-text-default:rgba(0,0,0,.3);
---color-datepicker-range_picker-text-active:rgba(0,0,0,.85);
---color-datepicker-range_picker_divider:rgba(0,0,0,.15);
+html[theme="dark"] {
+--height-datalist-list:60px;
+--height-datalist-head:24px;
+--height-datalist-search_m:76px;
+--height-datalist-search_s:56px;
+--icon-datalist-sort:16px;
+--icon-datalist-ranking:24px;
+--icon-datalist-add_watchlist:24px;
+--icon-datalist-label_icon:12px;
+--spacing-datalist-list-margin_top:2px;
+--spacing-datalist-market_tag-margin_top:4px;
+--spacing-datalist-head_item-margin_y_m:4px;
+--spacing-datalist-head_item-margin_y_s:0px;
+--spacing-datalist-list_item-margin_y:8px;
+--spacing-datalist-list_icon-margin_right:6px;
+--spacing-datalist-search-margin_right:12px;
+--spacing-datalist-search-margin_top:4px;
+--spacing-datalist-search_icon-margin_left:20px;
+--spacing-datalist-search_stock-margin_right:8px;
+--spacing-datalist-search_code-margin_right:4px;
+--spacing-datalist-head-padding_right:16px;
+--spacing-datalist-padding_y:20px;
+--width-datalist-list_s:76px;
+--width-datalist-list_m:96px;
+--width-datalist-list_l:111px;
+--width-datalist-list_xl:176px;
+--width-datalist-head_s:80px;
+--width-datalist-head_m:100px;
+--width-datalist-head_l:115px;
+--width-datalist-head_xl:180px;
+--width-datalist-list-code:86px;
+--color-datalist-list-text_primary:#F2F5FF;
+--color-datalist-list-text_secondary:rgba(235,235,245,.65);
+--color-datalist-head-text-default:rgba(235,235,245,.65);
+--color-datalist-head-text-active:#1bc47d;
+--color-datalist-market_us:#00B5CE;
+--color-datalist-market_hk:#ff863c;
+--color-datalist-icon_watchlist:#1bc47d;
+--color-datalist-icon_delay:#61b8ea;
+--color-datalist-icon_sort:rgba(235,235,245,.3);
+--color-datalist-option_chain-bg-1:#00B5CE;
+--color-datalist-option_chain-bg-2:#ebedf0;
+--color-datalist-option_chain-bg-3:rgba(118,118,128,.24);
+--color-datalist-option_chain-bg-4:#2C2C2E;
+--color-datalist-option_chain-divider:#000000;
+}
+
+html {
+--height-datepicker-range_picker_bg:36px;
+--height-datepicker-range_picker_divider:2px;
+--height-datepicker-title-month_year:58px;
+--height-datepicker-week:30px;
+--height-datepicker-date:39px;
+--height-datepicker-today_dot:5px;
+--height-datepicker-roll_bg:40px;
+--width-datepicker-range_picker_divider:16px;
+--radius-datepicker-range_picker_bg:8px;
+--radius-datepicker-roll_bg:12px;
+--spacing-datepicker-padding_y:20px;
+--spacing-datepicker-range_picker-margin_top:10px;
+--spacing-datepicker-range_picker-margin_bottom:0px;
+--spacing-datepicker-icon_next-margin_y:36px;
+--spacing-datepicker-date-margin_top:10px;
+--spacing-datepicker-date-margin_bottom:13px;
+--spacing-datepicker-date-margin_y:8px;
+--spacing-datepicker-roll_month-margin_mid:32px;
+--spacing-datepicker-roll_day-margin_mid:16px;
+--spacing-datepicker-radio-padding_x:9px;
+--icon-datepicker-next:16px;
+--color-datepicker-range_picker-bg:#f7f8f9;
+--color-datepicker-range_picker-text-default:rgba(0,0,0,.3);
+--color-datepicker-range_picker-text-active:rgba(0,0,0,.85);
+--color-datepicker-range_picker_divider:rgba(0,0,0,.15);
 --color-datepicker-title-month_year:rgba(0,0,0,.85);
 --color-datepicker-icon_next-default:rgba(0,0,0,.85);
 --color-datepicker-icon_next-disable:rgba(0,0,0,.3);
@@ -653,6 +934,45 @@ html {
 --color-datepicker-today_dot:rgba(235,235,245,.25);
 --color-datepicker-date_mask-bg-active:rgba(27,196,125,.1);
 }}
+html[theme="dark"] {
+--height-datepicker-range_picker_bg:36px;
+--height-datepicker-range_picker_divider:2px;
+--height-datepicker-title-month_year:58px;
+--height-datepicker-week:30px;
+--height-datepicker-date:39px;
+--height-datepicker-today_dot:5px;
+--height-datepicker-roll_bg:40px;
+--width-datepicker-range_picker_divider:16px;
+--radius-datepicker-range_picker_bg:8px;
+--radius-datepicker-roll_bg:12px;
+--spacing-datepicker-padding_y:20px;
+--spacing-datepicker-range_picker-margin_top:10px;
+--spacing-datepicker-range_picker-margin_bottom:0px;
+--spacing-datepicker-icon_next-margin_y:36px;
+--spacing-datepicker-date-margin_top:10px;
+--spacing-datepicker-date-margin_bottom:13px;
+--spacing-datepicker-date-margin_y:8px;
+--spacing-datepicker-roll_month-margin_mid:32px;
+--spacing-datepicker-roll_day-margin_mid:16px;
+--spacing-datepicker-radio-padding_x:9px;
+--icon-datepicker-next:16px;
+--color-datepicker-range_picker-bg:rgba(118,118,128,.14);
+--color-datepicker-range_picker-text-default:rgba(235,235,245,.3);
+--color-datepicker-range_picker-text-active:#F2F5FF;
+--color-datepicker-range_picker_divider:rgba(84,84,88,.85);
+--color-datepicker-title-month_year:#F2F5FF;
+--color-datepicker-icon_next-default:#F2F5FF;
+--color-datepicker-icon_next-disable:rgba(235,235,245,.3);
+--color-datepicker-text-week:rgba(235,235,245,.65);
+--color-datepicker-date-bg-default:rgba(118,118,128,.0);
+--color-datepicker-date-text-default:#F2F5FF;
+--color-datepicker-date-bg-active:#1bc47d;
+--color-datepicker-date-text-active:#ffffff;
+--color-datepicker-date-bg-disable:rgba(118,118,128,.0);
+--color-datepicker-date-text-disable:rgba(235,235,245,.3);
+--color-datepicker-today_dot:rgba(235,235,245,.25);
+--color-datepicker-date_mask-bg-active:rgba(27,196,125,.1);
+}
 
 :root {
     --outline-visible: none; /* 默认不显示描边 */
@@ -729,6 +1049,38 @@ html {
 --color-dialog-content-bg:rgba(118,118,128,.1);
 --color-dialog-sequence_point:rgba(235,235,245,.3);
 }}
+html[theme="dark"] {
+--height-dialog-super_small:44px;
+--height-dialog-super_large:240px;
+--radius-dialog-content:14px;
+--radius-dialog-content_box:10px;
+--spacing-dialog-padding_left:20px;
+--spacing-dialog-padding_right:20px;
+--spacing-dialog-padding_top:32px;
+--spacing-dialog-padding_bottom:24px;
+--spacing-dialog-button-margin_top:24px;
+--spacing-dialog-title-margin_bottom:8px;
+--spacing-dialog-button_double-margin_mid:8px;
+--spacing-dialog-button_single-margin_left:16px;
+--spacing-dialog-button_single-margin_right:16px;
+--spacing-dialog-icon-padding_top:20px;
+--spacing-dialog-icon_title-margin_top:12px;
+--spacing-dialog-button_text-padding_bottom:8px;
+--spacing-dialog-content_box-padding_x:20px;
+--spacing-dialog-content_box-padding_y:20px;
+--spacing-dialog-content_box_title-margin_bottom:8px;
+--spacing-dialog-content_box_icon-margin_right:8px;
+--spacing-dialog-sequence-padding_x:8px;
+--spacing-dialog-sequence_point-padding_Y:8px;
+--spacing-dialog-sequence_number-padding_Y:4px;
+--size-dialog-sequence_point:4px;
+--color-dialog-bg:rgba(118,118,128,.15);
+--color-dialog-mask_bg:rgba(0,0,0,.85);
+--color-dialog-title:#F2F5FF;
+--color-dialog-text:#F2F5FF;
+--color-dialog-content-bg:rgba(118,118,128,.1);
+--color-dialog-sequence_point:rgba(235,235,245,.3);
+}
 
 html {
 --height-dropdown-primary_item:46px;
@@ -863,6 +1215,72 @@ html {
 --color-dropdown-group-text-default:#F2F5FF;
 --color-dropdown-tertiary-title:rgba(235,235,245,.65);
 }}
+html[theme="dark"] {
+--height-dropdown-primary_item:46px;
+--height-dropdown-primary_large:314px;
+--height-dropdown-secondary_item:46px;
+--height-dropdown-secondary_large:314px;
+--height-dropdown-state_large:324px;
+--height-dropdown-state_item:48px;
+--height-dropdown-group_large:348px;
+--height-dropdown-tertiary_item:60px;
+--height-dropdown-divider:0.5px;
+--width-dropdown-primary_small:182px;
+--width-dropdown-state_small:204px;
+--width-dropdown-group_default:182px;
+--width-dropdown-state_drop:6px;
+--radius-dropdown-primary:10px;
+--radius-dropdown-secondary:10px;
+--radius-dropdown-state:10px;
+--radius-dropdown-group:8px;
+--radius-dropdown-state_item:6px;
+--spacing-dropdown-primary-padding_y:16px;
+--spacing-dropdown-primary-padding_x:8px;
+--spacing-dropdown-primary_icon-margin_right:6px;
+--spacing-dropdown-primary_icon_select-margin_left:8px;
+--spacing-dropdown-secondary-padding_y:16px;
+--spacing-dropdown-secondary-padding_x:8px;
+--spacing-dropdown-secondary_icon-margin_right:6px;
+--spacing-dropdown-state-padding_y:8px;
+--spacing-dropdown-state-padding_x:16px;
+--spacing-dropdown-state_item-padding_y:12px;
+--spacing-dropdown-group-padding_y:16px;
+--spacing-dropdown-group-padding_x:8px;
+--spacing-dropdown-group_title-margin_bottom:3px;
+--spacing-dropdown-group_text-margin_bottom:3px;
+--spacing-dropdown-group_item-padding_top:12px;
+--spacing-dropdown-group_item-padding_bottom:11px;
+--spacing-dropdown-state_drop-margin_right:4px;
+--spacing-dropdown-state_drop-margin_left:8px;
+--spacing-dropdown-state_icon-margin_right:6px;
+--spacing-dropdown-state_item-margin_bottom:8px;
+--icon-dropdown-primary:20px;
+--icon-dropdown-primary_select:20px;
+--icon-dropdown-secondary:20px;
+--icon-dropdown-state:24px;
+--icon-dropdown-group:20px;
+--color-dropdown-bg-default:#2C2C2E;
+--color-dropdown-primary-text-default:#F2F5FF;
+--color-dropdown-primary-text-active:#F2F5FF;
+--color-dropdown-primary-text-disable:rgba(235,235,245,.3);
+--color-dropdown-divider:rgba(84,84,88,.2);
+--color-dropdown-secondary-text-default:#F2F5FF;
+--color-dropdown-secondary-text-active:#1bc47d;
+--color-dropdown-secondary-text-disable:rgba(235,235,245,.3);
+--color-dropdown-state-bg-default:#2C2C2E;
+--color-dropdown-state-bg-active:rgba(118,118,128,.24);
+--color-dropdown-state-text-default:#F2F5FF;
+--color-dropdown-state-text-active:#F2F5FF;
+--color-dropdown-state-open:#1bc47d;
+--color-dropdown-state-preopen:#ffa819;
+--color-dropdown-state-close:rgba(235,235,245,.65);
+--color-dropdown-state-fusing:rgba(235,235,245,.65);
+--color-dropdown-state-pre_market_auction:#f459a7;
+--color-dropdown-state-last_trading_session:#18a0fb;
+--color-dropdown-group-title-default:rgba(235,235,245,.65);
+--color-dropdown-group-text-default:#F2F5FF;
+--color-dropdown-tertiary-title:rgba(235,235,245,.65);
+}
 
 html {
 --height-empty-card:140px;
@@ -881,6 +1299,14 @@ html {
 --spacing-empty-small-text-margin_bottom:0px;
 --color-empty-text:rgba(235,235,245,.65);
 }}
+html[theme="dark"] {
+--height-empty-card:140px;
+--spacing-empty-large-text-margin_top:16px;
+--spacing-empty-large-text-margin_bottom:18px;
+--spacing-empty-small-text-margin_top:8px;
+--spacing-empty-small-text-margin_bottom:0px;
+--color-empty-text:rgba(235,235,245,.65);
+}
 
 html {
 --height-footer-devider:16px;
@@ -895,6 +1321,12 @@ html {
 --spacing-footer-padding_bottom:40px;
 --spacing-footer-link-margin_bottom:4px;
 }}
+html[theme="dark"] {
+--height-footer-devider:16px;
+--spacing-footer-padding_top:24px;
+--spacing-footer-padding_bottom:40px;
+--spacing-footer-link-margin_bottom:4px;
+}
 
 html {
 --height-footnav-content:56px;
@@ -917,6 +1349,16 @@ html {
 --color-footnav-text-active:#1bc47d;
 --color-footnav-bg:#0E0E10;
 }}
+html[theme="dark"] {
+--height-footnav-content:56px;
+--spacing-footnav-icon-margin_top:5px;
+--spacing-footnav-icon-margin_bottom:2px;
+--icon-footnav-size:32px;
+--color-footnav-text-default:rgba(235,235,245,.65);
+--color-footnav-icon-default:rgba(242,245,255,.75);
+--color-footnav-text-active:#1bc47d;
+--color-footnav-bg:#0E0E10;
+}
 
 html {
 --divider-medium:1px;
@@ -985,10 +1427,10 @@ html {
 --red-c11:#6C200F;
 --red-c12:#4D170B;
 --red-c13:#3C1A14;
---red-opacity-1:rgba(235,92,49,.05);
---red-opacity-2:rgba(235,92,49,.1);
---red-opacity-3:rgba(235,92,49,.15);
---red-opacity-4:rgba(235,92,49,.2);
+--red-opacity-1:rgba(242,72,34,.05);
+--red-opacity-2:rgba(242,72,34,.1);
+--red-opacity-3:rgba(242,72,34,.15);
+--red-opacity-4:rgba(242,72,34,.2);
 --blue-c1:#f2fcff;
 --blue-c2:#d9f3fe;
 --blue-c3:#b7e7fd;
@@ -1472,10 +1914,10 @@ html {
 --red-c11:#6C200F;
 --red-c12:#4D170B;
 --red-c13:#3C1A14;
---red-opacity-1:rgba(235,92,49,.05);
---red-opacity-2:rgba(235,92,49,.1);
---red-opacity-3:rgba(235,92,49,.15);
---red-opacity-4:rgba(235,92,49,.2);
+--red-opacity-1:rgba(242,72,34,.05);
+--red-opacity-2:rgba(242,72,34,.1);
+--red-opacity-3:rgba(242,72,34,.15);
+--red-opacity-4:rgba(242,72,34,.2);
 --blue-c1:#f2fcff;
 --blue-c2:#d9f3fe;
 --blue-c3:#b7e7fd;
@@ -1891,38 +2333,539 @@ html {
 --color-trade-costprice_setting_popup_legend_bg:#000000;
 --icon-color-2:#F2F5FF;
 }}
-
-html {
---height-headnav-primary:72px;
---height-headnav-secondary:48px;
---spacing-headnav-padding_y:20px;
---spacing-headnav-icon-margin_left:20px;
---spacing-headnav-text_description-margin_top:2px;
---spacing-headnav-primary-dot-margin_right:4px;
---spacing-headnav-primary-text-margin_right:8px;
---spacing-headnav-title-margin_y:0px;
---spacing-headnav-title-margin_right:8px;
---color-headnav-title:rgba(0,0,0,.85);
---color-headnav-text_description:rgba(0,0,0,.5);
---color-headnav-text_delayed:rgba(0,0,0,.5);
---color-headnav-icon:rgba(0,0,0,.85);
-}
-@media (prefers-color-scheme: dark) {
-html {
---height-headnav-primary:72px;
---height-headnav-secondary:48px;
---spacing-headnav-padding_y:20px;
---spacing-headnav-icon-margin_left:20px;
---spacing-headnav-text_description-margin_top:2px;
---spacing-headnav-primary-dot-margin_right:4px;
---spacing-headnav-primary-text-margin_right:8px;
---spacing-headnav-title-margin_y:0px;
---spacing-headnav-title-margin_right:8px;
---color-headnav-title:#F2F5FF;
---color-headnav-text_description:rgba(235,235,245,.65);
+html[theme="dark"] {
+--divider-medium:1px;
+--divider-large:3px;
+--divider-small:0.5px;
+--height-super-small:28px;
+--height-extra-small:32px;
+--height-small:36px;
+--height-medium:40px;
+--height-large:44px;
+--height-extra-large:48px;
+--height-super-large:56px;
+--neutral-c0:rgba(0,0,0,0.0);
+--neutral-c1:#ffffff;
+--neutral-c2:#f2f2f2;
+--neutral-c3:#eeeeee;
+--neutral-c4:#e6e6e6;
+--neutral-c5:#dddddd;
+--neutral-c6:#c2c2c2;
+--neutral-c7:#999999;
+--neutral-c8:#7f7f7f;
+--neutral-c9:#767680;
+--neutral-c10:#696970;
+--neutral-c11:#545458;
+--neutral-c11-5:#48484A;
+--neutral-c12:#2C2C2E;
+--neutral-c13:#19191E;
+--neutral-c13-5:#141419;
+--neutral-c14:#0E0E10;
+--neutral-c15:#000000;
+--blue_gray-c1:#f7f8f9;
+--blue_gray-c2:#f1f2f4;
+--blue_gray-c3:#ebedf0;
+--blue_gray-c4:#cad2da;
+--blue_gray-c5:#9aa9b9;
+--blue_gray-c6:#8496AA;
+--blue_gray-c7:#768698;
+--blue_gray-c8:#667484;
+--blue_gray-c9:#535F6C;
+--blue_gray-c10:#3b444c;
+--green-c1:#f2fffc;
+--green-c2:#d2f3ea;
+--green-c3:#abe7d5;
+--green-c4:#7ddcbb;
+--green-c5:#4bd09d;
+--green-c6:#1bc47d;
+--green-c7:#0da36b;
+--green-c8:#09825a;
+--green-c9:#0C5838;
+--green-c10:#093E28;
+--green-c11:#113226;
+--green-opacity-1:rgba(27,196,125,.05);
+--green-opacity-2:rgba(27,196,125,.1);
+--green-opacity-3:rgba(27,196,125,.15);
+--green-opacity-4:rgba(27,196,125,.2);
+--red-c1:#ffeeee;
+--red-c2:#ffdedd;
+--red-c3:#fcc0bd;
+--red-c4:#fa968e;
+--red-c5:#fe6258;
+--red-c6:#eb5c31;
+--red-c7:#f24822;
+--red-c8:#db2c0d;
+--red-c9:#BB381A;
+--red-c10:#992E16;
+--red-c11:#6C200F;
+--red-c12:#4D170B;
+--red-c13:#3C1A14;
+--red-opacity-1:rgba(242,72,34,.05);
+--red-opacity-2:rgba(242,72,34,.1);
+--red-opacity-3:rgba(242,72,34,.15);
+--red-opacity-4:rgba(242,72,34,.2);
+--blue-c1:#f2fcff;
+--blue-c2:#d9f3fe;
+--blue-c3:#b7e7fd;
+--blue-c4:#8ad5fd;
+--blue-c5:#61b8ea;
+--blue-c6:#6CACFF;
+--blue-c7:#5998e9;
+--blue-c8:#18a0fb;
+--blue-c9:#0a85cc;
+--blue-c10:#076b9d;
+--blue-c11:#09506f;
+--blue-c12:#08334F;
+--blue-opacity-1:rgba(24,160,251,.1);
+--blue-opacity-2:rgba(24,160,251,.2);
+--blue-opacity-3:rgba(24,160,251,.3);
+--blue-opacity-4:rgba(24,160,251,.5);
+--yellow-c1:#fffbe4;
+--yellow-c2:#fff6ca;
+--yellow-c3:#ffeea5;
+--yellow-c4:#ffe476;
+--yellow-c5:#ffd63d;
+--yellow-c6:#ffc700;
+--yellow-c7:#ffa819;
+--yellow-c8:#d2a700;
+--yellow-c9:#A17E00;
+--yellow-c10:#725900;
+--yellow-c11:#513F00;
+--yellow-c12:#40380C;
+--yellow-opacity-1:rgba(255,199,0,.1);
+--yellow-opacity-2:rgba(255,199,0,.2);
+--yellow-opacity-3:rgba(255,199,0,.3);
+--yellow-opacity-4:rgba(255,199,0,.5);
+--orange-c1:#fff3ec;
+--orange-c2:#ffd9c3;
+--orange-c3:#ffbd8e;
+--orange-c4:#ffa361;
+--orange-c5:#ff863c;
+--orange-c6:#ff733c;
+--orange-c7:#E47836;
+--orange-c8:#A15526;
+--orange-c9:#723C1B;
+--orange-c10:#512A13;
+--orange-c11:#3E2619;
+--orange-opacity-1:rgba(255,134,60,.1);
+--orange-opacity-2:rgba(255,134,60,.2);
+--orange-opacity-3:rgba(255,134,60,.3);
+--orange-opacity-4:rgba(255,134,60,.5);
+--purple-c1:#F2F5FF;
+--purple-c2:#EBEBF5;
+--purple-c3:#e1e0ff;
+--purple-c4:#cac7ff;
+--purple-c5:#aca3ff;
+--purple-c6:#907cff;
+--purple-c7:#8165ff;
+--purple-c8:#644EC6;
+--purple-c9:#5240A1;
+--purple-c10:#3A2D72;
+--purple-c11:#292051;
+--purple-opacity-1:rgba(144,124,255,.1);
+--purple-opacity-2:rgba(144,124,255,.2);
+--purple-opacity-3:rgba(144,124,255,.3);
+--purple-opacity-4:rgba(144,124,255,.5);
+--teal-c1:#edfbf9;
+--teal-c2:#c6f1eb;
+--teal-c3:#aaebe2;
+--teal-c4:#84e2d5;
+--teal-c5:#6cdccd;
+--teal-c6:#64e8c6;
+--teal-c7:#47d3c0;
+--teal-c8:#2D8579;
+--teal-c9:#205E56;
+--teal-c10:#16433D;
+--teal-c11:#193533;
+--teal-opacity-1:rgba(71,211,192,.1);
+--teal-opacity-2:rgba(71,211,192,.2);
+--teal-opacity-3:rgba(71,211,192,.3);
+--teal-opacity-4:rgba(71,211,192,.5);
+--cyan-c1:#e6f8fa;
+--cyan-c2:#b0e8f0;
+--cyan-c3:#8adde8;
+--cyan-c4:#54cdde;
+--cyan-c5:#33d8d5;
+--cyan-c6:#00B5CE;
+--cyan-c7:#00A5BB;
+--cyan-c8:#008192;
+--cyan-c9:#00515C;
+--cyan-c10:#003941;
+--cyan-c11:#0B2F36;
+--cyan-opacity-1:rgba(0,165,187,.1);
+--cyan-opacity-2:rgba(0,165,187,.2);
+--cyan-opacity-3:rgba(0,165,187,.3);
+--cyan-opacity-4:rgba(0,165,187,.5);
+--pink-c1:#fff2f9;
+--pink-c2:#fde6f3;
+--pink-c3:#fbd0e7;
+--pink-c4:#f8b0d6;
+--pink-c5:#f686c0;
+--pink-c6:#f459a7;
+--pink-c7:#DA5095;
+--pink-c8:#BD4581;
+--pink-c9:#9A386A;
+--pink-c10:#6D284B;
+--pink-c11:#53243D;
+--pink-opacity-1:rgba(244,89,167,.1);
+--pink-opacity-2:rgba(244,89,167,.2);
+--pink-opacity-3:rgba(244,89,167,.3);
+--pink-opacity-4:rgba(244,89,167,.5);
+--olive-c1:#f9fae9;
+--olive-c2:#eff6d6;
+--olive-c3:#def1b9;
+--olive-c4:#c4ed94;
+--olive-c5:#a6e86c;
+--olive-c6:#76db5b;
+--olive-c7:#77c13f;
+--olive-c8:#699344;
+--olive-c9:#4A6830;
+--olive-c10:#344922;
+--olive-c11:#2C3A22;
+--olive-opacity-1:rgba(166,232,108,.1);
+--olive-opacity-2:rgba(166,232,108,.2);
+--olive-opacity-3:rgba(166,232,108,.3);
+--olive-opacity-4:rgba(166,232,108,.5);
+--shadow-s1:0px 2px 2px rgba(0,0,0,.05);
+--shadow-s2:0px 2px 8px rgba(0,0,0,.05);
+--shadow-s3:0px 2px 16px rgba(0,0,0,.05);
+--border-radius-super-small:1px;
+--border-radius-extra-small:2px;
+--border-radius-small:4px;
+--border-radius-medium:6px;
+--border-radius-large:10px;
+--border-radius-extra-large:12px;
+--border-radius-super-large:14px;
+--icon-super-small:8px;
+--icon-extra-small:12px;
+--icon-small:16px;
+--icon-medium:20px;
+--icon-large:24px;
+--icon-extra-large:32px;
+--icon-super-large:40px;
+--opacity-05:5%;
+--opacity-10:10%;
+--opacity-15:15%;
+--opacity-20:20%;
+--opacity-30:30%;
+--opacity-50:50%;
+--spacing-none:0px;
+--opacity-85:85%;
+--spacing-super-tight:2px;
+--spacing-extra-tight:4px;
+--spacing-tight:8px;
+--spacing-base-tight:12px;
+--spacing-base:16px;
+--spacing-base-loose:20px;
+--spacing-loose:24px;
+--spacing-extra-loose:32px;
+--spacing-super-loose:40px;
+--font-sf:SF Pro;
+--font-pf:PingFang SC;
+--font-line-height-auto:AUTO;
+--font-line-height-tight:18px;
+--font-line-height-base-tight:21px;
+--font-line-height-base:24px;
+--font-line-height-base-loose:27px;
+--font-weight-regular:400;
+--font-weight-semibold:600;
+--font-weight-bold:700;
+--font-size-a:11px;
+--font-size-b:12px;
+--font-size-c:14px;
+--font-size-d:16px;
+--font-size-e:18px;
+--font-size-f:22px;
+--font-size-g:28px;
+--font-size-h:34px;
+--font-size-i:42px;
+--font-size-j:15px;
+--font-size-q:20px;
+--en-single-f-a-r-fontFamily: SF Pro;
+--en-single-f-a-r-fontWeight: 400;
+--en-single-f-a-r-lineHeight: AUTO;
+--en-single-f-a-r-fontSize: 11px;
+--en-single-f-b-r-fontFamily: SF Pro;
+--en-single-f-b-r-fontWeight: 400;
+--en-single-f-b-r-lineHeight: AUTO;
+--en-single-f-b-r-fontSize: 12px;
+--en-single-f-c-r-fontFamily: SF Pro;
+--en-single-f-c-r-fontWeight: 400;
+--en-single-f-c-r-lineHeight: AUTO;
+--en-single-f-c-r-fontSize: 14px;
+--en-single-f-j-r-fontFamily: SF Pro;
+--en-single-f-j-r-fontWeight: 400;
+--en-single-f-j-r-lineHeight: AUTO;
+--en-single-f-j-r-fontSize: 15px;
+--en-single-f-d-r-fontFamily: SF Pro;
+--en-single-f-d-r-fontWeight: 400;
+--en-single-f-d-r-lineHeight: AUTO;
+--en-single-f-d-r-fontSize: 16px;
+--en-single-f-e-r-fontFamily: SF Pro;
+--en-single-f-e-r-fontWeight: 400;
+--en-single-f-e-r-lineHeight: AUTO;
+--en-single-f-e-r-fontSize: 18px;
+--en-single-f-a-s-fontFamily: SF Pro;
+--en-single-f-a-s-fontWeight: 600;
+--en-single-f-a-s-lineHeight: AUTO;
+--en-single-f-a-s-fontSize: 11px;
+--en-single-f-b-s-fontFamily: SF Pro;
+--en-single-f-b-s-fontWeight: 600;
+--en-single-f-b-s-lineHeight: AUTO;
+--en-single-f-b-s-fontSize: 12px;
+--en-single-f-c-s-fontFamily: SF Pro;
+--en-single-f-c-s-fontWeight: 600;
+--en-single-f-c-s-lineHeight: AUTO;
+--en-single-f-c-s-fontSize: 14px;
+--en-single-f-d-s-fontFamily: SF Pro;
+--en-single-f-d-s-fontWeight: 600;
+--en-single-f-d-s-lineHeight: AUTO;
+--en-single-f-d-s-fontSize: 16px;
+--en-single-f-e-s-fontFamily: SF Pro;
+--en-single-f-e-s-fontWeight: 600;
+--en-single-f-e-s-lineHeight: AUTO;
+--en-single-f-e-s-fontSize: 18px;
+--en-single-f-f-b-fontFamily: SF Pro;
+--en-single-f-f-b-fontWeight: 700;
+--en-single-f-f-b-lineHeight: AUTO;
+--en-single-f-f-b-fontSize: 22px;
+--en-single-f-g-b-fontFamily: SF Pro;
+--en-single-f-g-b-fontWeight: 700;
+--en-single-f-g-b-lineHeight: AUTO;
+--en-single-f-g-b-fontSize: 28px;
+--en-single-f-h-b-fontFamily: SF Pro;
+--en-single-f-h-b-fontWeight: 700;
+--en-single-f-h-b-lineHeight: AUTO;
+--en-single-f-h-b-fontSize: 34px;
+--en-single-f-i-b-fontFamily: SF Pro;
+--en-single-f-i-b-fontWeight: 700;
+--en-single-f-i-b-lineHeight: AUTO;
+--en-single-f-i-b-fontSize: 42px;
+--en-single-f-j-s-fontFamily: SF Pro;
+--en-single-f-j-s-fontWeight: 600;
+--en-single-f-j-s-lineHeight: AUTO;
+--en-single-f-j-s-fontSize: 15px;
+--en-single-f-l-s-fontFamily: SF Pro;
+--en-single-f-l-s-fontWeight: 600;
+--en-single-f-l-s-lineHeight: AUTO;
+--en-single-f-l-s-fontSize: 10px;
+--en-multi-f-b-r-fontFamily: SF Pro;
+--en-multi-f-b-r-fontWeight: 400;
+--en-multi-f-b-r-lineHeight: 18px;
+--en-multi-f-b-r-fontSize: 12px;
+--en-multi-f-c-r-fontFamily: SF Pro;
+--en-multi-f-c-r-fontWeight: 400;
+--en-multi-f-c-r-lineHeight: 21px;
+--en-multi-f-c-r-fontSize: 14px;
+--en-multi-f-d-r-fontFamily: SF Pro;
+--en-multi-f-d-r-fontWeight: 400;
+--en-multi-f-d-r-lineHeight: 24px;
+--en-multi-f-d-r-fontSize: 16px;
+--en-multi-f-e-r-fontFamily: SF Pro;
+--en-multi-f-e-r-fontWeight: 400;
+--en-multi-f-e-r-lineHeight: 24px;
+--en-multi-f-e-r-fontSize: 18px;
+--en-multi-f-c-s-fontFamily: SF Pro;
+--en-multi-f-c-s-fontWeight: 600;
+--en-multi-f-c-s-lineHeight: 21px;
+--en-multi-f-c-s-fontSize: 14px;
+--en-multi-f-d-s-fontFamily: SF Pro;
+--en-multi-f-d-s-fontWeight: 600;
+--en-multi-f-d-s-lineHeight: 24px;
+--en-multi-f-d-s-fontSize: 16px;
+--en-multi-f-e-s-fontFamily: SF Pro;
+--en-multi-f-e-s-fontWeight: 600;
+--en-multi-f-e-s-lineHeight: 24px;
+--en-multi-f-e-s-fontSize: 18px;
+--en-multi-f-q-b-fontFamily: SF Pro;
+--en-multi-f-q-b-fontWeight: 700;
+--en-multi-f-q-b-lineHeight: 27px;
+--en-multi-f-q-b-fontSize: 20px;
+--cn-single-f-f-b-fontFamily: PingFang SC;
+--cn-single-f-f-b-fontWeight: 600;
+--cn-single-f-f-b-lineHeight: AUTO;
+--cn-single-f-f-b-fontSize: 22px;
+--cn-single-f-g-b-fontFamily: PingFang SC;
+--cn-single-f-g-b-fontWeight: 600;
+--cn-single-f-g-b-lineHeight: AUTO;
+--cn-single-f-g-b-fontSize: 28px;
+--cn-single-f-i-b-fontFamily: PingFang SC;
+--cn-single-f-i-b-fontWeight: 600;
+--cn-single-f-i-b-lineHeight: AUTO;
+--cn-single-f-i-b-fontSize: 42px;
+--cn-single-f-q-b-fontFamily: PingFang SC;
+--cn-single-f-q-b-fontWeight: 600;
+--cn-single-f-q-b-lineHeight: AUTO;
+--cn-single-f-q-b-fontSize: 20px;
+--cn-multi-f-e-r-fontFamily: PingFang SC;
+--cn-multi-f-e-r-fontWeight: 400;
+--cn-multi-f-e-r-lineHeight: 27px;
+--cn-multi-f-e-r-fontSize: 18px;
+--cn-multi-f-e-s-fontFamily: PingFang SC;
+--cn-multi-f-e-s-fontWeight: 600;
+--cn-multi-f-e-s-lineHeight: 27px;
+--cn-multi-f-e-s-fontSize: 18px;
+--border-super-small:0.5px;
+--border-extra-small:1px;
+--border-small:1.5px;
+--border-medium:2px;
+--border-radius-super-full:999px;
+--font-size-l:10px;
+--black-opacity-3:rgba(0,0,0,.15);
+--black-opacity-6:rgba(0,0,0,.3);
+--black-opacity-8:rgba(0,0,0,.5);
+--white-opacity-3:rgba(255,255,255,.15);
+--divider-color-default-1:rgba(84,84,88,.2);
+--divider-color-default-2:rgba(84,84,88,.85);
+--divider-color-hover:rgba(255,255,255,.85);
+--divider-color-reverse-1:rgba(0,0,0,.05);
+--divider-color-reverse-2:rgba(0,0,0,.15);
+--primary-color:#1bc47d;
+--primary-color-press:#09825a;
+--primary-color-disable:rgba(27,196,125,.25);
+--primary-color-light:#113226;
+--primary-color-light-press:#093E28;
+--secondary-color:#00B5CE;
+--secondary-color-press:#008192;
+--secondary-color-disable:rgba(0,181,206,.25);
+--secondary-color-light:#0B2F36;
+--secondary-color-light-press:#003941;
+--shadow-color:rgba(0,0,0,.80);
+--text-color-h1:#F2F5FF;
+--text-color-h2:rgba(235,235,245,.65);
+--text-color-h3:rgba(235,235,245,.3);
+--text-color-highlight:#1bc47d;
+--text-color-highlight-press:#09825a;
+--text-color-highlight-disable:rgba(27,196,125,.25);
+--text-color-link:#5998e9;
+--text-color-link-press:#076b9d;
+--text-color-link-disable:rgba(89,152,233,.25);
+--text-color-reverse:#ffffff;
+--text-color-reverse2:rgba(255,255,255,.6);
+--text-color-reverse3:rgba(255,255,255,.3);
+--bg-color-1:#0E0E10;
+--bg-color-2:#141419;
+--bg-color-3:rgba(118,118,128,.1);
+--bg-color-4:rgba(118,118,128,.15);
+--bg-color-mask:rgba(0,0,0,.85);
+--bg-color-mask-light:rgba(0,0,0,.15);
+--bg-color-mask-education:rgba(0,0,0,.5);
+--bg-grouped-color-1:#0E0E10;
+--bg-grouped-color-2:#141419;
+--bg-grouped-color-3:rgba(118,118,128,.1);
+--bg-grouped-color-2-web:rgba(20,20,25,.8);
+--rise-color:#1bc47d;
+--rise-color-press:#0da36b;
+--rise-color-disable:rgba(27,196,125,.3);
+--rise-color-light:rgba(27,196,125,.05);
+--rise-color-light-hover:rgba(27,196,125,.15);
+--rise-color-light-press:rgba(27,196,125,.2);
+--fall-color:#f24822;
+--fall-color-press:#db2c0d;
+--fall-color-disable:rgba(242,72,34,.3);
+--fall-color-light:rgba(242,72,34,.05);
+--fall-color-light-hover:rgba(242,72,34,.15);
+--fall-color-light-press:rgba(242,72,34,.2);
+--tips-color-success:#1bc47d;
+--tips-color-success-press:#09825a;
+--tips-color-success-disable:rgba(27,196,125,.25);
+--tips-color-success_light:#113226;
+--tips-color-success_light-press:#093E28;
+--tips-color-tips:#ffc700;
+--tips-color-tips-press:#ffa819;
+--tips-color-tips-disable:rgba(255,199,0,.3);
+--tips-color-tips-light:#40380C;
+--tips-color-tips-light-press:#513F00;
+--tips-color-warning:#eb5c31;
+--tips-color-warning-press:#db2c0d;
+--tips-color-warning-disable:rgba(235,92,49,.25);
+--tips-color-warning-light:#3C1A14;
+--tips-color-warning-light-press:#4D170B;
+--chart-color-1:#61b8ea;
+--chart-color-2:#33d8d5;
+--chart-color-3:#64e8c6;
+--chart-color-4:#a6e86c;
+--chart-color-5:#ffc700;
+--chart-color-6:#ffa819;
+--chart-color-7:#ff863c;
+--chart-color-8:#7f7f7f;
+--chart-color-9:#fe6258;
+--chart-color-10:#f459a7;
+--chart-color-11:rgba(27,196,125,.85);
+--chart-color-12:rgba(27,196,125,.5);
+--chart-color-13:rgba(27,196,125,.3);
+--chart-color-14:rgba(242,72,34,.85);
+--chart-color-15:rgba(242,72,34,.5);
+--chart-color-16:rgba(242,72,34,.3);
+--chart-line-color-1:#7f7f7f;
+--chart-line-color-2:#ffa819;
+--chart-line-color-3:#18a0fb;
+--chart-line-color-4:#f459a7;
+--chart-line-color-5:#47d3c0;
+--chart-line-color-6:#76db5b;
+--chart-line-color-7:#8165ff;
+--chart-line-color-8:#ff733c;
+--chart-line-color-9:#00A5BB;
+--chart-line-color-10:rgba(235,235,245,.30);
+--chart-column-color-1:#47d3c0;
+--chart-column-color-2:#5998e9;
+--color-quotes-stock_chart_indicator-bg:rgba(14,14,16,.8);
+--color-quotes-stock_chart_point-bg:rgba(11,47,54,.8);
+--color-quotes-stock_chart_fullscreen_doji_floatinglayer-bg:#F2F5FF;
+--color-quotes-stock_chart_fullscreen_doji_floatinglayer-text:rgba(0,0,0,.85);
+--color-quotes-marketdepth_hide_data-mask:rgba(0,0,0,.10);
+--color-trade-account_head_card_my-bg:#3A2D72;
+--color-trade-account_head_card_ar-bg:#09825a;
+--color-trade-costprice_setting_popup_legend_bg:#000000;
+--icon-color-2:#F2F5FF;
+}
+
+html {
+--height-headnav-primary:72px;
+--height-headnav-secondary:48px;
+--spacing-headnav-padding_y:20px;
+--spacing-headnav-icon-margin_left:20px;
+--spacing-headnav-text_description-margin_top:2px;
+--spacing-headnav-primary-dot-margin_right:4px;
+--spacing-headnav-primary-text-margin_right:8px;
+--spacing-headnav-title-margin_y:0px;
+--spacing-headnav-title-margin_right:8px;
+--color-headnav-title:rgba(0,0,0,.85);
+--color-headnav-text_description:rgba(0,0,0,.5);
+--color-headnav-text_delayed:rgba(0,0,0,.5);
+--color-headnav-icon:rgba(0,0,0,.85);
+}
+@media (prefers-color-scheme: dark) {
+html {
+--height-headnav-primary:72px;
+--height-headnav-secondary:48px;
+--spacing-headnav-padding_y:20px;
+--spacing-headnav-icon-margin_left:20px;
+--spacing-headnav-text_description-margin_top:2px;
+--spacing-headnav-primary-dot-margin_right:4px;
+--spacing-headnav-primary-text-margin_right:8px;
+--spacing-headnav-title-margin_y:0px;
+--spacing-headnav-title-margin_right:8px;
+--color-headnav-title:#F2F5FF;
+--color-headnav-text_description:rgba(235,235,245,.65);
 --color-headnav-text_delayed:rgba(235,235,245,.65);
 --color-headnav-icon:#F2F5FF;
 }}
+html[theme="dark"] {
+--height-headnav-primary:72px;
+--height-headnav-secondary:48px;
+--spacing-headnav-padding_y:20px;
+--spacing-headnav-icon-margin_left:20px;
+--spacing-headnav-text_description-margin_top:2px;
+--spacing-headnav-primary-dot-margin_right:4px;
+--spacing-headnav-primary-text-margin_right:8px;
+--spacing-headnav-title-margin_y:0px;
+--spacing-headnav-title-margin_right:8px;
+--color-headnav-title:#F2F5FF;
+--color-headnav-text_description:rgba(235,235,245,.65);
+--color-headnav-text_delayed:rgba(235,235,245,.65);
+--color-headnav-icon:#F2F5FF;
+}
 
 html {
 --height-input-form_text:48px;
@@ -1967,22 +2910,79 @@ html {
 --icon-input-form_suffix:20px;
 --icon-input-search:20px;
 --icon-input-trade_number_input_icon:20px;
---color-input-text-default:rgba(0,0,0,.3);
---color-input-text-active:rgba(0,0,0,.85);
+--color-input-text-default:rgba(0,0,0,.3);
+--color-input-text-active:rgba(0,0,0,.85);
+--color-input-text-wrong:#eb5c31;
+--color-input-text-disable:rgba(0,0,0,.3);
+--color-input-form-border-default:rgba(0,0,0,.15);
+--color-input-form-border-active:rgba(0,0,0,.85);
+--color-input-form-border-wrong:#eb5c31;
+--color-input-form_counter-default:rgba(0,0,0,.3);
+--color-input-form_counter-warning:#eb5c31;
+--color-input-form-bg-wrong:#ffeeee;
+--color-input-textarea-bg-default:#f7f8f9;
+--color-input-trade-bg:rgba(0,0,0,.05);
+--color-input-cursor:#1bc47d;
+}
+@media (prefers-color-scheme: dark) {
+html {
+--height-input-form_text:48px;
+--height-input-search_content:64px;
+--height-input-bg:44px;
+--height-input-search_bg:44px;
+--height-input-code_number:48px;
+--height-input-code_number_line:2px;
+--height-input-divider:20px;
+--height-input-textarea:96px;
+--height-input-code:52px;
+--height-input-form_number_text:53px;
+--height-input-textarea_max:240px;
+--height-input-cursor:21px;
+--width-input-code_number:40px;
+--width-input-code_number_line:24px;
+--width-input-cursor:2px;
+--radius-input-bg:10px;
+--radius-input-trade_bg:6px;
+--radius-input-cursor:6px;
+--spacing-input-suffix_icon-margin_y:8px;
+--spacing-input-form_suffix_icon-margin_y:16px;
+--spacing-input-form_divider-margin_y:12px;
+--spacing-input-textarea-padding_x:12px;
+--spacing-input-textarea-padding_y:12px;
+--spacing-input-textarea_text-margin_down:10px;
+--spacing-input-search_textarea-padding_y:20px;
+--spacing-input-search_cancel-margin_left:20px;
+--spacing-input-trade-padding_y:16px;
+--spacing-input-trade_number_divider-margin_y:16px;
+--spacing-input-trade_number_divider-margin_right:12px;
+--spacing-input-trade_number_divider-margin_left:12px;
+--spacing-input-trade_number_input-margin_left:4px;
+--spacing-input-trade_number_input-margin_y:4px;
+--spacing-input-code_number-margin_bottom:2px;
+--spacing-input-code_number-margin_right:15px;
+--spacing-input-code-padding_y:30px;
+--spacing-input-max_text-padding_y:12px;
+--spacing-input-form_text-padding_x:14px;
+--spacing-input-form_number-padding_x:10px;
+--icon-input-clean:20px;
+--icon-input-form_suffix:20px;
+--icon-input-search:20px;
+--icon-input-trade_number_input_icon:20px;
+--color-input-text-default:rgba(235,235,245,.3);
+--color-input-text-active:#F2F5FF;
 --color-input-text-wrong:#eb5c31;
---color-input-text-disable:rgba(0,0,0,.3);
---color-input-form-border-default:rgba(0,0,0,.15);
---color-input-form-border-active:rgba(0,0,0,.85);
+--color-input-text-disable:rgba(235,235,245,.3);
+--color-input-form-border-default:rgba(84,84,88,.85);
+--color-input-form-border-active:rgba(255,255,255,.85);
 --color-input-form-border-wrong:#eb5c31;
---color-input-form_counter-default:rgba(0,0,0,.3);
+--color-input-form_counter-default:rgba(235,235,245,.3);
 --color-input-form_counter-warning:#eb5c31;
---color-input-form-bg-wrong:#ffeeee;
---color-input-textarea-bg-default:#f7f8f9;
---color-input-trade-bg:rgba(0,0,0,.05);
+--color-input-form-bg-wrong:#3C1A14;
+--color-input-textarea-bg-default:rgba(118,118,128,.1);
+--color-input-trade-bg:rgba(118,118,128,.15);
 --color-input-cursor:#1bc47d;
-}
-@media (prefers-color-scheme: dark) {
-html {
+}}
+html[theme="dark"] {
 --height-input-form_text:48px;
 --height-input-search_content:64px;
 --height-input-bg:44px;
@@ -2038,7 +3038,7 @@ html {
 --color-input-textarea-bg-default:rgba(118,118,128,.1);
 --color-input-trade-bg:rgba(118,118,128,.15);
 --color-input-cursor:#1bc47d;
-}}
+}
 
 html {
 --spacing-list-info_title-margin_right:8px;
@@ -2085,6 +3085,28 @@ html {
 --color-list-title:#F2F5FF;
 --color-list-text:rgba(235,235,245,.65);
 }}
+html[theme="dark"] {
+--spacing-list-info_title-margin_right:8px;
+--spacing-list-info_icon-margin_y:4px;
+--spacing-list-info_s-padding_top:7px;
+--spacing-list-info_s-padding_bottom:8px;
+--spacing-list-info_m-padding_top:11px;
+--spacing-list-info_m-padding_bottom:12px;
+--spacing-list-info_l-padding_top:14px;
+--spacing-list-info_l-padding_bottom:15px;
+--spacing-list-common-padding_x:16px;
+--spacing-list-common-padding_y:16px;
+--spacing-list-common_icon-margin_right:12px;
+--spacing-list-common_badge-margin_left:12px;
+--spacing-list-common_describe-margin_xy:4px;
+--spacing-list-check_icon-margin_right:8px;
+--spacing-list-check-margin_left:12px;
+--spacing-list-common_switch-margin_left:8px;
+--icon-list-right:16px;
+--icon-list-check:20px;
+--color-list-title:#F2F5FF;
+--color-list-text:rgba(235,235,245,.65);
+}
 
 html {
 --height-loading-small:109px;
@@ -2115,6 +3137,20 @@ html {
 --color-loading-bg:#545458;
 --color-loading-text:#ffffff;
 }}
+html[theme="dark"] {
+--height-loading-small:109px;
+--width-loading-small:110px;
+--width-loading-large:279px;
+--radius-loading-size:10px;
+--spacing-loading-padding_y:16px;
+--spacing-loading-padding_x:19px;
+--spacing-loading-icon-margin_bottom:8px;
+--icon-loading-size:48px;
+--icon-loading-refres_small:32px;
+--icon-loading-refres_large:64px;
+--color-loading-bg:#545458;
+--color-loading-text:#ffffff;
+}
 
 html {
 --height-noticebar-snackbar:34px;
@@ -2203,6 +3239,49 @@ html {
 --color-noticebar-toast_info-text:#ffffff;
 --color-noticebar-toast_warning-icon:#eb5c31;
 }}
+html[theme="dark"] {
+--height-noticebar-snackbar:34px;
+--radius-noticebar-snackbar:6px;
+--radius-noticebar-toast:17px;
+--radius-noticebar-notification:10px;
+--radius-noticebar-notification_tag:4px;
+--spacing-noticebar-snackbar-padding_left:8px;
+--spacing-noticebar-snackbar-padding_right:12px;
+--spacing-noticebar-snackbar_icon-margin_right:8px;
+--spacing-noticebar-snackbar_text-margin_right:4px;
+--spacing-noticebar-toast-padding_left:8px;
+--spacing-noticebar-toast-padding_right:16px;
+--spacing-noticebar-toast_icon-margin_right:4px;
+--spacing-noticebar-notification-padding_left:16px;
+--spacing-noticebar-notification-padding_right:16px;
+--spacing-noticebar-notification-padding_top:16px;
+--spacing-noticebar-notification-padding_bottom:16px;
+--spacing-noticebar-notification_title-margin_bottom:6px;
+--spacing-noticebar-notification_button-padding_right:12px;
+--spacing-noticebar-notification-button-margin_left:3px;
+--icon-noticebar-snackbar:16px;
+--icon-noticebar-toast:20px;
+--icon-noticebar-notification:12px;
+--icon-noticebar-:20px;
+--color-noticebar-snackbar_info-bg:#0B2F36;
+--color-noticebar-snackbar_info-text:#e6f8fa;
+--color-noticebar-snackbar_info-icon:rgba(230,248,250,.6);
+--color-noticebar-snackbar_warning-bg:#3C1A14;
+--color-noticebar-snackbar_warning-text:#ffdedd;
+--color-noticebar-snackbar_warning-icon:rgba(255,222,221,.6);
+--color-noticebar-snackbar_tips-bg:#40380C;
+--color-noticebar-snackbar_tips-text:#fff6ca;
+--color-noticebar-snackbar_tips-icon:rgba(255,246,202,.6);
+--color-noticebar-notification-bg:#2C2C2E;
+--color-noticebar-notification-text:#F2F5FF;
+--color-noticebar-notification_tag_success-bg:rgba(27,196,125,.2);
+--color-noticebar-notification_tag_tips-bg:rgba(255,199,0,.2);
+--color-noticebar-notification_tag_warning-bg:rgba(235,92,49,.15);
+--color-noticebar-notification_tag_disable-bg:rgba(255,255,255,.15);
+--color-noticebar-toast_info-bg:rgba(84,84,88,.95);
+--color-noticebar-toast_info-text:#ffffff;
+--color-noticebar-toast_warning-icon:#eb5c31;
+}
 
 html {
 --height-pagebreak-drop:3px;
@@ -2237,6 +3316,22 @@ html {
 --color-pagebreak-drop-light:rgba(255,255,255,.15);
 --color-pagebreak-drop-light-active:#ffffff;
 }}
+html[theme="dark"] {
+--height-pagebreak-drop:3px;
+--width-pagebreak-drop:8px;
+--radius-pagebreak-drop:1px;
+--radius-pagebreak-number_bg:14px;
+--spacing-pagebreak-drop-margin_right:4px;
+--spacing-pagebreak-number-padding_y:8px;
+--spacing-pagebreak-number-padding_x:1px;
+--color-pagebreak-drop-default:rgba(255,255,255,.20);
+--color-pagebreak-drop-active:rgba(255,255,255,.85);
+--color-pagebreak-number-bg:rgba(0,0,0,.3);
+--color-pagebreak-number-text-default:rgba(255,255,255,.5);
+--color-pagebreak-number-text-active:#ffffff;
+--color-pagebreak-drop-light:rgba(255,255,255,.15);
+--color-pagebreak-drop-light-active:#ffffff;
+}
 
 html {
 --height-popover-primary:33px;
@@ -2299,6 +3394,36 @@ html {
 --color-popover-custom-bg:#1bc47d;
 --color-popover-custom-text:#ffffff;
 }}
+html[theme="dark"] {
+--height-popover-primary:33px;
+--height-popover-custom:33px;
+--height-popover-secondary:22px;
+--radius-popover-primary:4px;
+--radius-popover-secondary:4px;
+--radius-popover-custom:4px;
+--spacing-popover-primary-padding_left:12px;
+--spacing-popover-primary-padding_right:12px;
+--spacing-popover-primary-margin_y:4px;
+--spacing-popover-primary-padding_top:8px;
+--spacing-popover-primary-padding_bottom:8px;
+--spacing-popover-secondary-padding_left:8px;
+--spacing-popover-secondary-padding_right:8px;
+--spacing-popover-secondary-margin_y:4px;
+--spacing-popover-secondary-padding_top:4px;
+--spacing-popover-secondary-padding_bottom:4px;
+--spacing-popover-custom-padding_left:12px;
+--spacing-popover-custom-padding_right:12px;
+--spacing-popover-custom-margin_y:4px;
+--icon-popover-primary:16px;
+--icon-popover-secondary:12px;
+--icon-popover-custom:16px;
+--color-popover-primary-bg:#545458;
+--color-popover-primary-text:#ffffff;
+--color-popover-secondary-bg:#545458;
+--color-popover-secondary-text:#ffffff;
+--color-popover-custom-bg:#1bc47d;
+--color-popover-custom-text:#ffffff;
+}
 
 html {
 --spacing-result-text-margin_top:12px;
@@ -2319,6 +3444,15 @@ html {
 --color-result-title:#F2F5FF;
 --color-result-text:rgba(235,235,245,.65);
 }}
+html[theme="dark"] {
+--spacing-result-text-margin_top:12px;
+--spacing-result-text-margin_bottom:28px;
+--spacing-result-title-margin_top:0px;
+--spacing-result-button-margin_y:80px;
+--spacing-result-text_button-margin_top:12px;
+--color-result-title:#F2F5FF;
+--color-result-text:rgba(235,235,245,.65);
+}
 
 html {
 --height-selector-form:44px;
@@ -2431,6 +3565,61 @@ html {
 --color-selector-import-bg-default:rgba(0,0,0,.05);
 --color-selector-import-text-default:#F2F5FF;
 }}
+html[theme="dark"] {
+--height-selector-form:44px;
+--height-selector-multi:48px;
+--height-selector-multi_button:28px;
+--height-selector-import:44px;
+--radius-selector-form:6px;
+--radius-selector-multi_button:6px;
+--spacing-selector-xl-margin_y:4px;
+--spacing-selector-l-margin_y:4px;
+--spacing-selector-m-margin_y:2px;
+--spacing-selector-s-margin_y:2px;
+--spacing-selector-trade-margin_y:4px;
+--spacing-selector-multi_button-padding_y:12px;
+--spacing-selector-multi_icon_close-margin_left:4px;
+--spacing-selector-multi_button-margin_right:12px;
+--spacing-selector-multi_icon_down-margin_right:8px;
+--spacing-selector-padding_y:16px;
+--spacing-selector-icon-margin_right:4px;
+--spacing-selector-down-margin_left:8px;
+--icon-selector-l:20px;
+--icon-selector-down:16px;
+--icon-selector-m:20px;
+--icon-selector-s:16px;
+--icon-selector-multi_button_close:16px;
+--icon-selector-xl:24px;
+--width-selector-form:335px;
+--color-selector-xl-text-disable:rgba(235,235,245,.3);
+--color-selector-xl-text-default:rgba(235,235,245,.3);
+--color-selector-xl-text-active:#F2F5FF;
+--color-selector-l-text-default:rgba(235,235,245,.3);
+--color-selector-l-text-active:#F2F5FF;
+--color-selector-l-text-disable:rgba(235,235,245,.3);
+--color-selector-icon_down-default:rgba(235,235,245,.65);
+--color-selector-icon_down-active:rgba(235,235,245,.65);
+--color-selector-icon_down-disable:rgba(235,235,245,.3);
+--color-selector-m-text-default:rgba(235,235,245,.3);
+--color-selector-m-text-active:#F2F5FF;
+--color-selector-m-text-disable:rgba(235,235,245,.3);
+--color-selector-s-text-default:rgba(235,235,245,.3);
+--color-selector-s-text-active:#F2F5FF;
+--color-selector-s-text-disable:rgba(235,235,245,.3);
+--color-selector-form-bg-default:rgba(118,118,128,.14);
+--color-selector-form-bg-active:rgba(118,118,128,.14);
+--color-selector-form-bg-disable:rgba(118,118,128,.14);
+--color-selector-form-text-default:rgba(235,235,245,.3);
+--color-selector-form-text-active:#F2F5FF;
+--color-selector-form-text-disable:rgba(235,235,245,.3);
+--color-selector-multi_button-bg:rgba(118,118,128,.14);
+--color-selector-multi_button-text:#F2F5FF;
+--color-selector-multi_icon_close:rgba(235,235,245,.3);
+--color-selector-multi_icon_down:rgba(235,235,245,.65);
+--color-selector-multi_divider:rgba(84,84,88,.85);
+--color-selector-import-bg-default:rgba(0,0,0,.05);
+--color-selector-import-text-default:#F2F5FF;
+}
 
 html {
 --height-skeleton-img:210px;
@@ -2496,7 +3685,39 @@ html {
 --spacing-skeleton-data-padding_y:20px;
 --color-skeleton-bg:rgba(118,118,128,.15);
 --color-skeleton-loading_gradient-bg-active:rgba(118,118,128,.05);
-}}
+}}
+html[theme="dark"] {
+--height-skeleton-img:210px;
+--height-skeleton-button:48px;
+--height-skeleton-small_shapes:66px;
+--height-skeleton-text_s:12px;
+--height-skeleton-text_m:18px;
+--height-skeleton-text_l:28px;
+--width-skeleton-head:136px;
+--width-skeleton-button:215px;
+--width-skeleton-avatar_s:36px;
+--width-skeleton-avatar_text:95px;
+--width-skeleton-stock_data_s:42px;
+--width-skeleton-stock_data_m:64px;
+--width-skeleton-stock_data_l:64px;
+--width-skeleton-stock_data_xl:104px;
+--width-skeleton-avatar_m:48px;
+--width-skeleton-avatar_l:80px;
+--width-skeleton-img_small:100px;
+--radius-skeleton-img:12px;
+--radius-skeleton-text_l:4px;
+--radius-skeleton-button:10px;
+--radius-skeleton-small_shapes:6px;
+--radius-skeleton-text_s:2px;
+--spacing-skeleton-text-margin_bottom:12px;
+--spacing-skeleton-avatar-margin_right:8px;
+--spacing-skeleton-avatar-margin_bottom:10px;
+--spacing-skeleton-stock-padding_x:5px;
+--spacing-skeleton-stock-padding_y:24px;
+--spacing-skeleton-data-padding_y:20px;
+--color-skeleton-bg:rgba(118,118,128,.15);
+--color-skeleton-loading_gradient-bg-active:rgba(118,118,128,.05);
+}
 
 html {
 --height-slider-track:6px;
@@ -2549,6 +3770,31 @@ html {
 --color-slider-mark:#ffffff;
 --color-slider-mark-text-focus:#F2F5FF;
 }}
+html[theme="dark"] {
+--height-slider-track:6px;
+--height-slider-mark_track:12px;
+--height-slider-mark_handle:22px;
+--width-slider-handle_border:3px;
+--width-slider-handle:20px;
+--width-slider-mark_handle_border:1px;
+--width-slider-mark_handle:16px;
+--width-slider-mark:1px;
+--radius-slider-track:3px;
+--radius-slider-mark_handle:4px;
+--radius-slider-mark_track:4px;
+--spacing-slider-margin_bottom:4px;
+--spacing-slider-mark-margin_top:20px;
+--spacing-slider-mark_handle-margin_top:2px;
+--spacing-slider-mark_text_focus-margin_bottom:8px;
+--color-slider-mark-text:rgba(235,235,245,.3);
+--color-slider-track-default:rgba(118,118,128,.24);
+--color-slider-track-focus:#1bc47d;
+--color-slider-handle-bg:#ffffff;
+--color-slider-handle_border-default:#c2c2c2;
+--color-slider-handle_border-focus:#1bc47d;
+--color-slider-mark:#ffffff;
+--color-slider-mark-text-focus:#F2F5FF;
+}
 
 html {
 --height-steps-border-default:1px;
@@ -2619,6 +3865,40 @@ html {
 --color-steps-basic-default:rgba(118,118,128,.15);
 --color-steps-basic-hover:#1bc47d;
 }}
+html[theme="dark"] {
+--height-steps-border-default:1px;
+--height-steps-border-hover:1px;
+--height-steps-basic-default:3px;
+--height-steps-basic-hover:3px;
+--spacing-steps-horizontal-padding_y:10px;
+--spacing-steps-horizontal-padding_x:8px;
+--spacing-steps-horizontal_item-padding_y:2px;
+--spacing-steps-horizontal_item-margin_right:4px;
+--spacing-steps-horizontal_icon-margin_bottom:8px;
+--spacing-steps-horizontal_description_text-margin_top:6px;
+--spacing-steps-vertical-padding_y:20px;
+--spacing-steps-vertical-padding_x:8px;
+--spacing-steps-vertical_icon-margin_right:12px;
+--spacing-steps-vertical_title-margin_top:2px;
+--spacing-steps-vertical_description_text-margin_top:6px;
+--spacing-steps-vertical_description_text-margin_bottom:20px;
+--spacing-steps-basic-padding_y:16px;
+--spacing-steps-basic-padding_top:12px;
+--spacing-steps-basic-padding_bottom:8px;
+--spacing-steps-basic_item-margin_right:16px;
+--icon-steps-size:20px;
+--icon-steps-size_s:10px;
+--radius-steps-basic:1.5px;
+--color-steps-border-default:rgba(84,84,88,.85);
+--color-steps-border-hover:#1bc47d;
+--color-steps-text-complete:#F2F5FF;
+--color-steps-text-afoot:#F2F5FF;
+--color-steps-text-warning:#eb5c31;
+--color-steps-text-not_started:rgba(235,235,245,.65);
+--color-steps-description_text:rgba(235,235,245,.65);
+--color-steps-basic-default:rgba(118,118,128,.15);
+--color-steps-basic-hover:#1bc47d;
+}
 
 html {
 --height-switch-bg:10px;
@@ -2659,6 +3939,25 @@ html {
 --color-switch-on_button_border-default:rgba(0,0,0,.1);
 --color-switch-on_button_border-disable:rgba(0,0,0,.05);
 }}
+html[theme="dark"] {
+--height-switch-bg:10px;
+--height-switch-button:20px;
+--width-switch-bg:40px;
+--radius-switch-bg:5px;
+--radius-switch-button:10px;
+--color-switch-off_bg-default:rgba(105,105,112,.6);
+--color-switch-off_bg-disable:rgba(105,105,112,.2);
+--color-switch-off_button_bg-default:#eeeeee;
+--color-switch-off_button_bg-disable:rgba(72,72,74,.95);
+--color-switch-off_button_border-default:rgba(0,0,0,.1);
+--color-switch-off_button_border-disable:rgba(0,0,0,.05);
+--color-switch-on_bg-default:rgba(27,196,125,.3);
+--color-switch-on_bg-disable:rgba(27,196,125,.1);
+--color-switch-on_button_bg-default:#1bc47d;
+--color-switch-on_button_bg-disable:#093E28;
+--color-switch-on_button_border-default:rgba(0,0,0,.1);
+--color-switch-on_button_border-disable:rgba(0,0,0,.05);
+}
 
 html {
 --height-tab-primary:56px;
@@ -2835,6 +4134,93 @@ html {
 --color-tab-sell-text-disable:rgba(235,235,245,.3);
 --color-tab-filter_down-active:#1bc47d;
 }}
+html[theme="dark"] {
+--height-tab-primary:56px;
+--height-tab-primary-bar:3px;
+--height-tab-secondary:44px;
+--height-tab-secondary-bar:2px;
+--height-tab-capsule:48px;
+--height-tab-capsule_btn:28px;
+--height-tab-selector_l:34px;
+--height-tab-selector_l_btn:30px;
+--height-tab-selector_m:28px;
+--height-tab-selector_m_btn:24px;
+--height-tab-secondary-divider:0.5px;
+--height-tab-buy_sell:44px;
+--height-tab-filter:48px;
+--height-tab-filter_divider:0.5px;
+--spacing-tab-primary-padding_left:8px;
+--spacing-tab-primary-padding_right:8px;
+--spacing-tab-primary-margin_left:12px;
+--spacing-tab-primary_bar-margin_top-active:4px;
+--spacing-tab-primary_icon-margin_right:20px;
+--spacing-tab-secondary-padding_left:12px;
+--spacing-tab-secondary-padding_right:12px;
+--spacing-tab-secondary-margin_left:8px;
+--spacing-tab-secondary_bar-margin_top-active:13px;
+--spacing-tab-secondary_icon-margin_right:20px;
+--spacing-tab-capsule_btn-padding_left:12px;
+--spacing-tab-capsule_btn-padding_right:12px;
+--spacing-tab-capsule_btn-margin_right:6px;
+--spacing-tab-capsule_btn-margin_left:6px;
+--spacing-tab-capsule_btn_icon-margin_left:0px;
+--spacing-tab-capsule-margin_left:14px;
+--spacing-tab-capsule-margin_top:10px;
+--spacing-tab-capsule-margin_bottom:10px;
+--spacing-tab-capsule_icon-margin_right:20px;
+--spacing-tab-selector-margin_left:2px;
+--spacing-tab-selector-margin_right:2px;
+--spacing-tab-selector-margin_top:2px;
+--spacing-tab-selector-margin_bottom:2px;
+--spacing-tab-filter-margin_y:20px;
+--spacing-tab-filter_contant-margin_y:8px;
+--spacing-tab-filter_down-margin_left:0px;
+--spacing-tab-double_click_filter-margin_y:24px;
+--radius-tab-capsule_button:14px;
+--radius-tab-selector_card:6px;
+--radius-tab-buy_sell-1:6px;
+--radius-tab-buy_sell-2:4px;
+--radius-tab-primary_bar:1px;
+--radius-tab-secondary-bar_bottom:0px;
+--radius-tab-secondary-bar_top:1px;
+--width-tab-primary-bar:16px;
+--width-tab-buy-border-active:1px;
+--icon-tab-filter_down:16px;
+--color-tab-primary-text-default:rgba(235,235,245,.65);
+--color-tab-primary-text-active:#F2F5FF;
+--color-tab-primary-bar-active:#1bc47d;
+--color-tab-secondary-text-default:rgba(235,235,245,.65);
+--color-tab-secondary-text-active:#F2F5FF;
+--color-tab-secondary-bar-active:#F2F5FF;
+--color-tab-secondary-divider:rgba(84,84,88,.2);
+--color-tab-capsule-text-default:#F2F5FF;
+--color-tab-capsule_btn-bg-default:rgba(118,118,128,.15);
+--color-tab-capsule-text-active:#1bc47d;
+--color-tab-capsule_btn-bg-active:rgba(27,196,125,.15);
+--color-tab-selector-text-default:rgba(235,235,245,.65);
+--color-tab-selector-bg-default:rgba(118,118,128,.15);
+--color-tab-selector-bg-active:rgba(118,118,128,.24);
+--color-tab-selector-text-active:#F2F5FF;
+--color-tab-buy-text-default:#F2F5FF;
+--color-tab-buy-text-active:#1bc47d;
+--color-tab-buy-text-disable:rgba(235,235,245,.3);
+--color-tab-buy-bg-default:rgba(118,118,128,.1);
+--color-tab-buy-bg-active:rgba(27,196,125,.15);
+--color-tab-buy-border-active:#1bc47d;
+--color-tab-buy-bg-disable:rgba(118,118,128,.1);
+--color-tab-sell-text-default:#F2F5FF;
+--color-tab-sell-text-active:#f24822;
+--color-tab-sell-bg-default:rgba(118,118,128,.1);
+--color-tab-sell-bg-active:rgba(242,72,34,.15);
+--color-tab-sell-border-active:#f24822;
+--color-tab-sell-bg-disable:rgba(118,118,128,.1);
+--color-tab-filter-text-default:rgba(235,235,245,.65);
+--color-tab-filter-text-active:#F2F5FF;
+--color-tab-filter_down:rgba(235,235,245,.65);
+--color-tab-filter-divider:rgba(84,84,88,.2);
+--color-tab-sell-text-disable:rgba(235,235,245,.3);
+--color-tab-filter_down-active:#1bc47d;
+}
 
 html {
 --height-tag-l:18px;
@@ -2923,6 +4309,49 @@ html {
 --color-tag-purple-bg:rgba(144,124,255,.15);
 --color-tag-purple-border:rgba(144,124,255,.5);
 }}
+html[theme="dark"] {
+--height-tag-l:18px;
+--height-tag-s:14px;
+--height-tag-m:16px;
+--radius-tag-bg:4px;
+--spacing-tag-padding_y:4px;
+--width-tag-border:0.5px;
+--color-tag-default-text:rgba(235,235,245,.60);
+--color-tag-default-bg:rgba(118,118,128,.14);
+--color-tag-default_border-text:#cad2da;
+--color-tag-default-border:#cad2da;
+--color-tag-dark-text:rgba(255,255,255,.8);
+--color-tag-dark-bg:rgba(255,255,255,.3);
+--color-tag-dark_border-text:rgba(255,255,255,.8);
+--color-tag-dark-border:rgba(255,255,255,.3);
+--color-tag-blue-text:rgba(24,160,251,.9);
+--color-tag-blue-bg:rgba(24,160,251,.15);
+--color-tag-blue-border:rgba(24,160,251,.5);
+--color-tag-cyan-text:rgba(0,165,187,.9);
+--color-tag-cyan-bg:rgba(0,165,187,.15);
+--color-tag-cyan-border:rgba(0,165,187,.5);
+--color-tag-green-text:rgba(27,196,125,.9);
+--color-tag-green-bg:rgba(27,196,125,.15);
+--color-tag-green-border:rgba(27,196,125,.5);
+--color-tag-olive-text:rgba(119,193,63,.9);
+--color-tag-olive-bg:rgba(119,193,63,.15);
+--color-tag-olive-border:rgba(119,193,63,.60);
+--color-tag-yellow-text:rgba(255,168,25,.9);
+--color-tag-yellow-bg:rgba(255,199,0,.15);
+--color-tag-yellow-border:rgba(210,167,0,.5);
+--color-tag-orange-text:rgba(255,115,60,.9);
+--color-tag-orange-bg:rgba(255,115,60,.15);
+--color-tag-orange-border:rgba(255,115,60,.5);
+--color-tag-red-text:rgba(242,72,34,.9);
+--color-tag-red-bg:rgba(242,72,34,.15);
+--color-tag-red-border:rgba(242,72,34,.5);
+--color-tag-pink-text:rgba(244,89,167,.9);
+--color-tag-pink-bg:rgba(244,89,167,.15);
+--color-tag-pink-border:rgba(244,89,167,.5);
+--color-tag-purple-text:rgba(144,124,255,.9);
+--color-tag-purple-bg:rgba(144,124,255,.15);
+--color-tag-purple-border:rgba(144,124,255,.5);
+}
 
 html {
 --height-title-primary:48px;
@@ -2977,6 +4406,32 @@ html {
 --color-title-text:rgba(235,235,245,.65);
 --color-title-icon_arrow:rgba(235,235,245,.65);
 }}
+html[theme="dark"] {
+--height-title-primary:48px;
+--height-title-secondary:48px;
+--height-title-tertiary:40px;
+--height-title-quaternary:32px;
+--height-title-primary_double:69px;
+--height-title-secondary_double:66px;
+--height-title-tertiary_double:58px;
+--height-title-quaternary_double:49px;
+--spacing-title-padding_left:20px;
+--spacing-title-padding_right:20px;
+--spacing-title-primary_icon-margin_y:4px;
+--spacing-title-secondary_icon-margin_y:4px;
+--spacing-title-tertiary_icon-margin_y:4px;
+--spacing-title-quaternary_icon-margin_y:4px;
+--spacing-title-text-margin_right:4px;
+--spacing-title-subtitle-margin_top:4px;
+--icon-title-primary:20px;
+--icon-title-secondary:20px;
+--icon-title-tertiary:16px;
+--icon-title-quaternary:16px;
+--icon-title-arrow:16px;
+--color-title-head:#F2F5FF;
+--color-title-text:rgba(235,235,245,.65);
+--color-title-icon_arrow:rgba(235,235,245,.65);
+}
 
 html {
 --height-toast-small:109px;
@@ -3003,6 +4458,18 @@ html {
 --color-toast-bg:#545458;
 --color-toast-text:#ffffff;
 }}
+html[theme="dark"] {
+--height-toast-small:109px;
+--width-toast-small:120px;
+--width-toast-large:279px;
+--radius-toast-content:10px;
+--spacing-toast-padding_y:20px;
+--spacing-toast-padding_x:20px;
+--spacing-toast-icon-margin_bottom:6px;
+--icon-toast-size:48px;
+--color-toast-bg:#545458;
+--color-toast-text:#ffffff;
+}
 
 html {
 --height-upload-bg:96px;
@@ -3037,3 +4504,19 @@ html {
 --color-upload-pdf-text:#ffffff;
 --color-upload-close_bg:rgba(0,0,0,.3);
 }}
+html[theme="dark"] {
+--height-upload-bg:96px;
+--width-upload-small:96px;
+--radius-upload-content:6px;
+--spacing-upload-padding_top:22px;
+--spacing-upload-padding_bottom:19px;
+--spacing-upload-text-margin_top:6px;
+--icon-upload-size:32px;
+--icon-upload-close:16px;
+--color-upload-bg:rgba(118,118,128,.1);
+--color-upload-icon:rgba(255,255,255,.15);
+--color-upload-text:rgba(235,235,245,.65);
+--color-upload-pdf-bg:rgba(235,92,49,.85);
+--color-upload-pdf-text:#ffffff;
+--color-upload-close_bg:rgba(0,0,0,.3);
+}