在创作时,支持自定义样式,可以在如图所示的地方编辑你想要的样式。

/* 消息气泡内样式 */
:root {
--SmartThemeBodyColor: red; /* 正文颜色 */
--SmartThemeQuoteColor: cyan; /* 引号内颜色 */
}
/* 底部输入区域 */
.mj-chat-input-container {
background: blue;
}
/* 底部输入框 */
.mj-chat-input-textarea-input {
color: green;
}
/* 快捷回复样式 */
.mj-chat-input-quickreply-chip-content {
color: yellow;
}
/* 针对第二个快捷回复做特殊处理 */
.mj-chat-input-quickreply-chip-2-content {
color: purple;
}:root {
interpolate-size: allow-keywords;
--doc-height: 100%;
--transparent: #0000;
--black30a: #0000004d;
--black50a: #00000080;
--black60a: #0009;
--black70a: #000000b3;
--black90a: #000000e6;
--black100: #000;
--white20a: #fff3;
--white30a: #ffffff4d;
--white50a: #ffffff80;
--white60a: #fff9;
--white70a: #ffffffb3;
--white100: #fff;
--grey10: #191919;
--grey30: #4b4b4b;
--grey50: #7d7d7d;
--grey5020a: #7d7d7d33;
--grey5050a: #7d7d7d80;
--grey70: #afafaf;
--grey75: #bebebe;
--grey30a: #3232324d;
--grey7070a: #afafafb3;
--fullred: red;
--crimson70a: #640000b3;
--crimson-hover: #96323280;
--okGreen70a: #006400b3;
--cobalt30a: #6464ff4d;
--greyCAIbg: #242425;
--ivory: #dcdcd2;
--golden: #f8d300;
--warning: #ff0000e6;
--active: #58b600;
--preferred: #f44336;
--interactable-outline-color: var(--white100);
--interactable-outline-color-faint: var(--white20a);
--reasoning-body-color: var(--SmartThemeEmColor);
--reasoning-em-color: color-mix(
in srgb,
var(--SmartThemeEmColor) 67%,
var(--SmartThemeBlurTintColor) 33%
);
--reasoning-saturation: 0.5;
--SmartThemeBodyColor: red;
--SmartThemeEmColor: #fff;
--SmartThemeUnderlineColor: #bce7cf;
--SmartThemeQuoteColor: #b983ff;
--SmartThemeBlurTintColor: #171717;
--SmartThemeChatTintColor: #171717;
--SmartThemeUserMesBlurTintColor: #0000004d;
--SmartThemeBotMesBlurTintColor: #3c3c3c4d;
--SmartThemeBlurStrength: calc(var(--blurStrength) * 1px);
--SmartThemeShadowColor: #00000080;
--SmartThemeBorderColor: #00000080;
--SmartThemeCheckboxBgColorR: 220;
--SmartThemeCheckboxBgColorG: 220;
--SmartThemeCheckboxBgColorB: 210;
--SmartThemeCheckboxTickColorValue: calc(
(
(
(
(var(--SmartThemeCheckboxBgColorR) * 299) +
(var(--SmartThemeCheckboxBgColorG) * 587) +
(var(--SmartThemeCheckboxBgColorB) * 114)
) /
1000
) -
128
) *
-1000
);
--SmartThemeCheckboxTickColor: rgb(
var(--SmartThemeCheckboxTickColorValue),
var(--SmartThemeCheckboxTickColorValue),
var(--SmartThemeCheckboxTickColorValue)
);
--sheldWidth: 50vw;
--fontScale: 1;
--mainFontSize: calc(var(--fontScale) * 15px);
--mainFontFamily: "Noto Sans", sans-serif;
--monoFontFamily: "Noto Sans Mono", "Courier New", Consolas, monospace;
--blurStrength: 10;
--shadowWidth: 2;
--bottomFormBlockPadding: calc(var(--mainFontSize) / 2.5);
--bottomFormIconSize: calc(var(--mainFontSize) * 1.9);
--bottomFormBlockSize: calc(
var(--bottomFormIconSize) + var(--bottomFormBlockPadding)
);
--topBarIconSize: calc(var(--mainFontSize) * 2);
--topBarBlockSize: calc(var(--topBarIconSize) + var(--topBarBlockPadding));
--topBarBlockPadding: calc(var(--mainFontSize) / 3);
--tool-cool-color-picker-btn-bg: transparent;
--tool-cool-color-picker-btn-border-color: transparent;
--mes-right-spacing: 30px;
--avatar-base-height: 50px;
--avatar-base-width: 50px;
--avatar-base-border-radius: 2px;
--avatar-base-border-radius-round: 50%;
--avatar-base-border-radius-rounded: 10px;
--inline-avatar-small-factor: 0.6;
--animation-duration: 0.125s;
--animation-duration-2x: calc(var(--animation-duration) * 2);
--animation-duration-3x: calc(var(--animation-duration) * 3);
--animation-duration-slow: var(--animation-duration-3x);
}