简介

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

示例

/*  消息气泡内样式  */
: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);
}
幕间 Mujian 文档站