/* Vant 组件黑夜模式主题变量 */
|
/* 同时定义在 :root 和 [data-theme="dark"] 上，确保 Vant 组件能正确读取 */
|
:root[data-theme="dark"],
|
[data-theme="dark"] {
|
/* NavBar 导航栏 */
|
--van-nav-bar-background: #121212 !important;
|
--van-nav-bar-title-text-color: #fff !important;
|
--van-nav-bar-arrow-size: 16px !important;
|
|
/* Uploader 上传 */
|
--van-uploader-upload-background: #474B62 !important;
|
|
/* IndexAnchor 索引 */
|
--van-index-anchor-text-color: #fff !important;
|
|
/* Cell 单元格 */
|
--van-cell-background: #121212 !important;
|
--van-cell-text-color: #fff !important;
|
--van-cell-label-color: #868D9A !important;
|
--van-cell-value-color: #fff !important;
|
--van-cell-border-color: #393E49 !important;
|
|
/* Field 输入框 */
|
--van-field-label-color: #fff !important;
|
--van-field-input-text-color: #fff !important;
|
--van-field-placeholder-text-color: #868D9A !important;
|
--van-field-icon-size: 16px !important;
|
--van-field-clear-icon-size: 16px !important;
|
--van-field-clear-icon-color: #868D9A !important;
|
--van-field-error-message-color: #ee0a24 !important;
|
--van-field-error-message-text-color: #ee0a24 !important;
|
--van-field-background: #242424 !important;
|
|
/* Button 按钮 */
|
--van-button-default-background: #474B62 !important;
|
--van-button-default-color: #fff !important;
|
--van-button-primary-background: #b9f641 !important;
|
--van-button-primary-border-color: #b9f641 !important;
|
--van-button-primary-color: #333 !important;
|
--van-button-success-background: #07c160 !important;
|
--van-button-success-border-color: #07c160 !important;
|
--van-button-warning-background: #ff976a !important;
|
--van-button-warning-border-color: #ff976a !important;
|
--van-button-danger-background: #ee0a24 !important;
|
--van-button-danger-border-color: #ee0a24 !important;
|
|
/* Dialog 对话框 */
|
--van-dialog-background: #121212 !important;
|
--van-dialog-header-font-weight: 500 !important;
|
--van-dialog-header-padding-top: 26px !important;
|
--van-dialog-header-isolated: 16px !important;
|
--van-dialog-message-padding: 26px !important;
|
--van-dialog-message-font-size: 16px !important;
|
--van-dialog-message-line-height: 24px !important;
|
--van-dialog-message-max-height: 60vh !important;
|
--van-dialog-message-text-color: #fff !important;
|
--van-dialog-title-font-size: 18px !important;
|
--van-dialog-title-text-color: #fff !important;
|
--van-dialog-width: 320px !important;
|
--van-dialog-small-screen-width: 90% !important;
|
--van-dialog-border-radius: 8px !important;
|
--van-dialog-close-icon-size: 22px !important;
|
--van-dialog-close-icon-color: #868D9A !important;
|
--van-dialog-close-icon-margin: 16px !important;
|
--van-dialog-button-height: 48px !important;
|
--van-dialog-round-button-height: 36px !important;
|
--van-dialog-confirm-button-text-color: #f7b328 !important;
|
|
/* Popup 弹出层 */
|
--van-popup-background: #121212 !important;
|
--van-popup-transition: transform 0.3s !important;
|
--van-popup-round-border-radius: 20px !important;
|
--van-popup-close-icon-size: 22px !important;
|
--van-popup-close-icon-color: #868D9A !important;
|
--van-popup-close-icon-margin: 16px !important;
|
--van-popup-close-icon-z-index: 1 !important;
|
|
/* ActionSheet 动作面板 */
|
--van-action-sheet-max-height: 80% !important;
|
--van-action-sheet-header-height: 48px !important;
|
--van-action-sheet-header-font-size: 16px !important;
|
--van-action-sheet-description-color: #868D9A !important;
|
--van-action-sheet-description-font-size: 14px !important;
|
--van-action-sheet-description-line-height: 20px !important;
|
--van-action-sheet-item-background: #121212 !important;
|
--van-action-sheet-item-font-size: 16px !important;
|
--van-action-sheet-item-line-height: 22px !important;
|
--van-action-sheet-item-text-color: #fff !important;
|
--van-action-sheet-item-disabled-text-color: #868D9A !important;
|
--van-action-sheet-subname-color: #868D9A !important;
|
--van-action-sheet-subname-font-size: 12px !important;
|
--van-action-sheet-subname-line-height: 18px !important;
|
--van-action-sheet-close-icon-size: 22px !important;
|
--van-action-sheet-close-icon-color: #868D9A !important;
|
--van-action-sheet-close-icon-padding: 0 16px !important;
|
--van-action-sheet-cancel-padding-top: 8px !important;
|
--van-action-sheet-cancel-padding-color: #27293B !important;
|
|
/* Tabbar 标签栏 */
|
--van-tabbar-height: 50px !important;
|
--van-tabbar-z-index: 1 !important;
|
--van-tabbar-background: #1a1a1a !important;
|
--van-tabbar-item-font-size: 12px !important;
|
--van-tabbar-item-text-color: #868D9A !important;
|
--van-tabbar-item-active-color: #f7b328 !important;
|
--van-tabbar-item-active-background: #1a1a1a !important;
|
--van-tabbar-item-margin-bottom: 4px !important;
|
--van-tabbar-item-icon-size: 22px !important;
|
--van-tabbar-item-icon-margin-bottom: 4px !important;
|
|
/* Tabs 标签页 */
|
--van-tabs-nav-background: #121212 !important;
|
--van-tab-text-color: #868D9A !important;
|
--van-tab-active-text-color: #f7b328 !important;
|
--van-tab-disabled-text-color: #868D9A !important;
|
--van-tab-font-size: 14px !important;
|
--van-tabs-line-height: 44px !important;
|
--van-tabs-card-tab-active-color: #f7b328 !important;
|
--van-tabs-bottom-bar-width: 40px !important;
|
--van-tabs-bottom-bar-height: 3px !important;
|
--van-tabs-bottom-bar-color: #f7b328 !important;
|
|
/* Toast 轻提示 */
|
--van-toast-max-width: 70% !important;
|
--van-toast-font-size: 14px !important;
|
--van-toast-text-color: #fff !important;
|
--van-toast-loading-icon-color: #fff !important;
|
--van-toast-line-height: 20px !important;
|
--van-toast-border-radius: 8px !important;
|
--van-toast-background: rgba(0, 0, 0, 0.8) !important;
|
--van-toast-icon-size: 36px !important;
|
--van-toast-text-min-width: 96px !important;
|
--van-toast-text-padding: 8px 12px !important;
|
--van-toast-default-padding: 16px !important;
|
--van-toast-default-width: 88px !important;
|
--van-toast-default-min-height: 88px !important;
|
--van-toast-position-top-distance: 20% !important;
|
--van-toast-position-bottom-distance: 20% !important;
|
|
/* Loading 加载 */
|
--van-loading-text-color: #fff !important;
|
--van-loading-text-font-size: 14px !important;
|
--van-loading-spinner-color: #f7b328 !important;
|
--van-loading-spinner-size: 30px !important;
|
|
/* Picker 选择器 */
|
--van-picker-background: #121212 !important;
|
--van-picker-toolbar-height: 44px !important;
|
--van-picker-title-font-size: 16px !important;
|
--van-picker-title-line-height: 20px !important;
|
--van-picker-title-text-color: #fff !important;
|
--van-picker-action-padding: 0 16px !important;
|
--van-picker-action-font-size: 14px !important;
|
--van-picker-confirm-action-color: #f7b328 !important;
|
--van-picker-cancel-action-color: #868D9A !important;
|
--van-picker-option-font-size: 16px !important;
|
--van-picker-option-text-color: #fff !important;
|
--van-picker-option-disabled-opacity: 0.3 !important;
|
--van-picker-loading-icon-color: #f7b328 !important;
|
--van-picker-mask-color: linear-gradient(180deg, rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.4)), linear-gradient(0deg, rgba(18, 18, 18, 0.9), rgba(18, 18, 18, 0.4)) !important;
|
|
/* DropdownMenu 下拉菜单 */
|
--van-dropdown-menu-height: 48px !important;
|
--van-dropdown-menu-background: #121212 !important;
|
--van-dropdown-menu-shadow: 0 2px 12px rgba(0, 0, 0, 0.12) !important;
|
--van-dropdown-menu-title-font-size: 15px !important;
|
--van-dropdown-menu-title-text-color: #fff !important;
|
--van-dropdown-menu-title-active-text-color: #f7b328 !important;
|
--van-dropdown-menu-title-disabled-text-color: #868D9A !important;
|
--van-dropdown-menu-title-padding: 0 12px !important;
|
--van-dropdown-menu-title-line-height: 20px !important;
|
--van-dropdown-menu-option-active-color: #f7b328 !important;
|
--van-dropdown-menu-content-max-height: 80% !important;
|
|
/* Notify 消息通知 */
|
--van-notify-text-color: #fff !important;
|
--van-notify-padding: 12px 16px !important;
|
--van-notify-font-size: 14px !important;
|
--van-notify-line-height: 20px !important;
|
--van-notify-primary-background: #f7b328 !important;
|
--van-notify-success-background: #07c160 !important;
|
--van-notify-warning-background: #ff976a !important;
|
--van-notify-danger-background: #ee0a24 !important;
|
|
/* Swipe 轮播 */
|
--van-swipe-indicator-size: 6px !important;
|
--van-swipe-indicator-margin: 0 4px !important;
|
--van-swipe-indicator-active-opacity: 1 !important;
|
--van-swipe-indicator-inactive-opacity: 0.3 !important;
|
--van-swipe-indicator-active-background: #f7b328 !important;
|
--van-swipe-indicator-inactive-background: #868D9A !important;
|
|
/* Grid 宫格 */
|
--van-grid-item-content-padding: 16px 8px !important;
|
--van-grid-item-content-background: #121212 !important;
|
--van-grid-item-content-font-size: 14px !important;
|
--van-grid-item-icon-size: 28px !important;
|
--van-grid-item-text-color: #fff !important;
|
--van-grid-item-text-font-size: 12px !important;
|
--van-grid-item-text-line-height: 16px !important;
|
--van-grid-item-text-margin-top: 8px !important;
|
|
/* List 列表 */
|
--van-list-text-color: #868D9A !important;
|
--van-list-text-font-size: 14px !important;
|
--van-list-text-line-height: 50px !important;
|
--van-list-loading-icon-size: 16px !important;
|
--van-list-finished-text-color: #868D9A !important;
|
--van-list-error-text-color: #ee0a24 !important;
|
--van-list-text-margin-top: 16px !important;
|
|
/* PullRefresh 下拉刷新 */
|
--van-pull-refresh-head-height: 50px !important;
|
--van-pull-refresh-head-font-size: 14px !important;
|
--van-pull-refresh-head-text-color: #868D9A !important;
|
|
/* Search 搜索 */
|
--van-search-padding: 10px 12px !important;
|
--van-search-background: #121212 !important;
|
--van-search-content-background: #242424 !important;
|
--van-search-input-height: 34px !important;
|
--van-search-label-padding: 0 5px !important;
|
--van-search-label-color: #fff !important;
|
--van-search-label-font-size: 14px !important;
|
--van-search-left-icon-color: #868D9A !important;
|
--van-search-action-padding: 0 8px !important;
|
--van-search-action-text-color: #fff !important;
|
--van-search-action-font-size: 14px !important;
|
|
/* Collapse 折叠面板 */
|
--van-collapse-item-content-background: #121212 !important;
|
--van-collapse-item-content-text-color: #fff !important;
|
--van-collapse-item-content-font-size: 14px !important;
|
--van-collapse-item-content-line-height: 1.5 !important;
|
--van-collapse-item-title-disabled-color: #868D9A !important;
|
|
/* Checkbox 复选框 */
|
--van-checkbox-icon-color: #868D9A !important;
|
--van-checkbox-checked-icon-color: #f7b328 !important;
|
--van-checkbox-label-color: #fff !important;
|
--van-checkbox-label-margin: 8px !important;
|
|
/* Radio 单选框 */
|
--van-radio-icon-color: #868D9A !important;
|
--van-radio-checked-icon-color: #f7b328 !important;
|
--van-radio-label-color: #fff !important;
|
--van-radio-label-margin: 8px !important;
|
|
/* Switch 开关 */
|
--van-switch-on-background: #f7b328 !important;
|
--van-switch-off-background: #474B62 !important;
|
--van-switch-node-background: #fff !important;
|
|
/* Stepper 步进器 */
|
--van-stepper-background: #242424 !important;
|
--van-stepper-button-icon-color: #fff !important;
|
--van-stepper-input-text-color: #fff !important;
|
--van-stepper-button-disabled-color: #868D9A !important;
|
--van-stepper-button-disabled-icon-color: #868D9A !important;
|
|
/* Tag 标签 */
|
--van-tag-text-color: #fff !important;
|
--van-tag-border-radius: 2px !important;
|
--van-tag-font-size: 12px !important;
|
--van-tag-line-height: 16px !important;
|
--van-tag-medium-padding: 4px 6px !important;
|
--van-tag-large-padding: 6px 8px !important;
|
--van-tag-round-border-radius: 999px !important;
|
--van-tag-danger-color: #ee0a24 !important;
|
--van-tag-primary-color: #f7b328 !important;
|
--van-tag-success-color: #07c160 !important;
|
--van-tag-warning-color: #ff976a !important;
|
--van-tag-default-color: #242424 !important;
|
--van-tag-plain-background: transparent !important;
|
}
|
