@sdata/web-vue 3.24.0 → 3.24.1

package/es/index.css

@@ -8582,7 +8582,7 @@ body.sd-tour-active .sd-tour-popover * {
   position: relative;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
   border-radius: calc(var(--sd-border-radius-medium) * 2);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);
@@ -9066,7 +9066,7 @@ body.sd-tour-active .sd-tour-popover * {
   color: var(--sd-color-neutral-10);
   font-size: 14px;
   line-height: 1.5715;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-medium);
   transition: border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
@@ -9631,7 +9631,7 @@ body.sd-tour-active .sd-tour-popover * {
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: rgba(255, 255, 255, 0.88);
+  background: color-mix(in srgb, var(--sd-color-bg-2) 88%, transparent);
 }
 .sd-qr-code-status {
   display: inline-flex;
@@ -10891,6 +10891,10 @@ body.sd-tour-active .sd-tour-popover * {
   margin-left: -6px;
 }
 
+:where(body, [sd-theme])[sd-theme=dark] .sd-model-selector-logo {
+  filter: brightness(0) invert(1);
+}
+
 .sd-message-list {
   position: fixed;
   left: 0;

package/es/model-selector/style/index.css

@@ -141,4 +141,8 @@
 }
 .sd-model-selector-logo-group > .sd-model-selector-logo + .sd-model-selector-logo {
   margin-left: -6px;
+}
+
+:where(body, [sd-theme])[sd-theme=dark] .sd-model-selector-logo {
+  filter: brightness(0) invert(1);
 }

package/es/model-selector/style/index.scss

@@ -155,3 +155,9 @@ $model-selector-prefix-cls: string.unquote('#{theme.$prefix}-model-selector');
     }
   }
 }
+
+#{theme.$sd-theme-tag}[sd-theme='dark'] {
+  .#{$model-selector-prefix-cls}-logo {
+    filter: brightness(0) invert(1);
+  }
+}

package/es/qr-code/qr-code.vue_vue_type_script_setup_true_lang.js

@@ -3,8 +3,9 @@ import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/es
 import { getPrefixCls } from "../_utils/global-config.js";
 import { useI18n } from "../locale/index.js";
 import _asyncToGenerator from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/asyncToGenerator.js";
+import { useThemeMode } from "../_hooks/use-theme-mode.js";
 import qr_code_status_default from "./qr-code-status.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, watch } from "vue";
+import { computed, createBlock, createCommentVNode, createElementBlock, createVNode, defineComponent, inject, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useSlots, useTemplateRef, watch } from "vue";
 import QRCode from "qrcode";
 //#region components/qr-code/qr-code.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
@@ -68,7 +69,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		*/
 		color: {
 			type: String,
-			default: "#1D2129"
+			default: ""
 		},
 		/**
 		* @zh 二维码背景色
@@ -162,6 +163,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const configCtx = inject(configProviderInjectionKey, void 0);
 		const resolvedSpinProps = computed(() => _objectSpread2(_objectSpread2({}, configCtx === null || configCtx === void 0 ? void 0 : configCtx.qrCodeSpinProps), props.spinProps));
 		const prefixCls = getPrefixCls("qr-code");
+		const themeMode = useThemeMode(useTemplateRef("root"));
 		const canvasRef = ref();
 		const svgMarkup = ref("");
 		const handleRefresh = () => {
@@ -195,15 +197,22 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		const rootStyle = computed(() => ({
 			width: `${props.size}px`,
 			height: `${props.size}px`,
-			backgroundColor: props.bgColor
+			backgroundColor: props.bgColor === "transparent" ? void 0 : props.bgColor
 		}));
-		const qrBgColor = computed(() => props.bgColor === "transparent" ? "#ffffff" : props.bgColor);
+		const qrColor = computed(() => {
+			if (props.color) return props.color;
+			return themeMode.value === "dark" ? "#f6f6f6" : "#1d2129";
+		});
+		const qrBgColor = computed(() => {
+			if (props.bgColor !== "transparent") return props.bgColor;
+			return themeMode.value === "dark" ? "#232324" : "#ffffff";
+		});
 		const qrOptions = computed(() => ({
 			errorCorrectionLevel: props.errorLevel,
 			margin: props.marginSize,
 			width: props.size,
 			color: {
-				dark: props.color,
+				dark: qrColor.value,
 				light: qrBgColor.value
 			}
 		}));
@@ -259,7 +268,8 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 			props.bgColor,
 			props.errorLevel,
 			props.marginSize,
-			props.boostLevel
+			props.boostLevel,
+			themeMode.value
 		], () => {
 			renderCode();
 		}, {
@@ -269,6 +279,7 @@ var qr_code_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineCo
 		return (_ctx, _cache) => {
 			return hasValue.value ? (openBlock(), createElementBlock("div", {
 				key: 0,
+				ref: "root",
 				class: normalizeClass(rootClass.value),
 				style: normalizeStyle(rootStyle.value)
 			}, [

package/es/qr-code/style/index.css

@@ -67,7 +67,7 @@
   align-items: center;
   justify-content: center;
   text-align: center;
-  background: rgba(255, 255, 255, 0.88);
+  background: color-mix(in srgb, var(--sd-color-bg-2) 88%, transparent);
 }
 .sd-qr-code-status {
   display: inline-flex;

package/es/qr-code/style/token.scss

@@ -9,7 +9,7 @@ $qr-code-color-border: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bo
 
 $qr-code-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 
-$qr-code-color-mask-bg: rgb(255 255 255 / 88%);
+$qr-code-color-mask-bg: color-mix(in srgb, #{$qr-code-color-bg} 88%, transparent);
 
 $qr-code-color-text: var(string.unquote('#{global.$sd-cssvars-prefix}-color-text-1'));
 

package/es/rich-text-editor/style/index.css

@@ -22,7 +22,7 @@
   color: var(--sd-color-neutral-10);
   font-size: 14px;
   line-height: 1.5715;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid var(--sd-color-neutral-3);
   border-radius: var(--sd-border-radius-medium);
   transition: border-color 0.2s cubic-bezier(0.34, 0.69, 0.1, 1), box-shadow 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);

package/es/rich-text-editor/style/token.scss

@@ -1,4 +1,5 @@
 @use '@style/theme/index.scss' as global;
+@use 'sass:string';
 
 @forward '@style/theme/index.scss';
 
@@ -16,7 +17,7 @@ $rich-text-editor-code-padding: global.$spacing-2;
 $rich-text-editor-color-text: global.$color-text-1;
 $rich-text-editor-color-text-disabled: global.$color-text-4;
 $rich-text-editor-color-placeholder: global.$color-text-4;
-$rich-text-editor-color-background: global.$color-bg-2;
+$rich-text-editor-color-background: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 $rich-text-editor-color-background-disabled: global.$color-fill-2;
 $rich-text-editor-color-border: global.$color-border-2;
 $rich-text-editor-color-border-hover: global.$color-primary-5;

package/es/sender/style/index.css

@@ -22,7 +22,7 @@
   position: relative;
   width: 100%;
   overflow: hidden;
-  background: #fff;
+  background: var(--sd-color-bg-2);
   border: 1px solid color-mix(in srgb, var(--sd-color-neutral-3) 10%, transparent);
   border-radius: calc(var(--sd-border-radius-medium) * 2);
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02);

package/es/sender/style/token.scss

@@ -1,4 +1,5 @@
 @use '@style/theme/index.scss' as global;
+@use 'sass:string';
 
 @forward '@style/theme/index.scss';
 
@@ -22,7 +23,7 @@ $sender-color-primary-hover: global.$color-primary-5;
 $sender-color-text: global.$color-text-1;
 $sender-color-text-disabled: global.$color-text-4;
 $sender-color-text-placeholder: global.$color-text-4;
-$sender-color-bg: global.$color-bg-2;
+$sender-color-bg: var(string.unquote('#{global.$sd-cssvars-prefix}-color-bg-2'));
 $sender-color-bg-disabled: global.$color-fill-2;
 $sender-color-header-bg: global.$color-fill-2;
 $sender-color-border: global.$color-border-2;

package/json/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "framework": "vue",
   "name": "@sdata/web-vue",
-  "version": "3.23.0",
+  "version": "3.24.0",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sdata/web-vue",
-  "version": "3.24.0",
+  "version": "3.24.1",
   "description": "SD Design Vue: A Vue.js 3 UI Library",
   "keywords": [
     "sd",