分享一个CherryStudio自用CSS主题样式（字体美化）

开发调优
,
43

感谢分享 :pray:

44

贴一个claude搭配这个字体版本

/* 优化后的代码 */
/* 添加字体声明 */
/* 修改后的全局字体设置 */
@font-face {
    font-family: 'LXGW-WenKai-Mono-GB';
    src: url('E:\\Archives\\OldDocuments\\cherry_character_style\\LXGWWenKaiMonoGBScreen.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    unicode-range: U+4E00-9FFF /* 扩展CJK字符范围 */
}

/* 强制全局应用字体 */
*,
*::after {
    font-family: 
        Consolas,                    /* 西文字体 这个可以改*/
        'LXGW-WenKai-Mono-GB',       /* 中文字体 可以改*/
        sans-serif !important;       /* 强制覆盖所有样式 */
}

/* 单独设置等宽字体 */
code, pre, kbd, samp, tt {
    font-family: 
        Consolas,
        Monaco,
        'Andale Mono',
        'Ubuntu Mono',
        monospace !important;
}

/* 覆盖表单元素 */
input, button, textarea, select {
    font-family: inherit !important;
}

/**
#inputbar textarea.ant-input {
    height: 120px !important;
    padding: 10px;
}

body {
    --file-line-width: 65rem; /* 设置行宽，默认值为 45rem */
    --font-default: "LXGW WenKai Screen", "Microsoft YaHei", "sans-serif"; /* 设置默认字体 */
}

/* 编辑模式下，右侧空白太大 */
.markdown-source-view.mod-cm6.is-readable-line-width .cm-content {
    max-width: 100%; /* 设置最大宽度为 100% */
}
**/

/* Claude 主题 2.0 */
/* 主题变量 */
:root {
  --color-black-soft: #2A2B2A; /* 深灰黑色，接近炭黑 */
  --color-white-soft: #F8F7F2; /* 温暖的米色，略带象牙色调 */
}

/* 深色主题 */
body[theme-mode="dark"] {
  /* 颜色定义 */
  --color-background: #2B2B2B; /* 深炭灰色 */
  --color-background-soft: #303030; /* 稍浅的炭灰色 */
  --color-background-mute: #282C34; /* 带深蓝调的石墨灰 */
  --navbar-background: var(--color-black-soft); /* 深灰黑色 */
  --chat-background: var(--color-black-soft); /* 深灰黑色 */
  --chat-background-user: #323332; /* 中深炭灰色 */
  --chat-background-assistant: #2D2E2D; /* 深橄榄灰色 */
}

/* 深色主题特定样式 */
body[theme-mode="dark"] {
  #content-container {
    background-color: var(--chat-background-assistant) !important;
  }

  #content-container #messages {
    background-color: var(--chat-background-assistant);
    color: hsl(50, 14%, 91%) !important; /* 暖色调浅米白色 */
  }

  .message-content-container {
    background: hsl(60, 2%, 21%) !important; /* 深橄榄灰色，带微弱黄绿色调 */
    box-shadow: 0 4px 16px -8px rgba(0,0,0,0.04) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 18px !important;
    margin: 8px 0 !important;
    padding: 10px 10px 10px 10px !important;
    color: hsl(50, 14%, 91%) !important; /* 暖色调浅米白色 */
  }

  .message-user .message-content-container {
    box-shadow: 0 8px 32px -12px rgba(0,0,0,0.03) !important;
    color: hsl(50, 14%, 91%) !important; /* 暖色调浅米白色 */
  }

  .inputbar-container {
    background-color: #3D3D3A; /* 中灰色带微橄榄绿调 */
    border: 1px solid #5E5D5940; /* 中灰色带40%透明度 */
    border-radius: 8px;
  }

  /* 代码样式 */
  code {
    background-color: #E5E5E20D; /* 浅灰白色，7%透明度 */
    color: #EA928A; /* 淡珊瑚红色 */
  }

  pre code {
    color: #ABB2BF; /* 浅钢蓝灰色 */
  }
}

/* 浅色主题 */
body[theme-mode="light"] {
  /* 颜色定义 */
  --color-white: #FFFFFF; /* 纯白色 */
  --color-background: hsl(55, 19%, 89%); /* 淡米黄灰色 */
  --color-background-soft: hsl(51, 16%, 85%); /* 浅麦秆黄色 */
  --color-background-mute: #E4E1D7; /* 灰米色，带微暖调 */
  --navbar-background: var(--color-white-soft); /* 温暖的米色 */
  --chat-background: var(--color-white-soft); /* 温暖的米色 */
  --chat-background-user: #F8F7F2; /* 温暖的米色，略带象牙色调 */
  --chat-background-assistant: hsl(51, 24%, 95%); /* 非常浅的麦秆黄色 */
}

/* 浅色主题特定样式 */
body[theme-mode="light"] {
  #content-container {
    background-color: var(--chat-background-assistant) !important;
  }

  #content-container #messages {
    background-color: var(--chat-background-assistant);
  }

  .message-content-container {
    background: hsl(40, 23%, 98%) !important; /* 极浅的米黄色，接近纯白 */
    box-shadow: 0 4px 16px -8px rgba(0,0,0,0.04) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 18px !important;
    margin: 8px 0 !important;
    padding: 10px 10px 10px 10px !important;
    color: hsl(47, 15%, 25%) !important; /* 深橄榄褐色 */
  }

  .message-user .message-content-container {
    background: hsl(51, 19%, 87%) !important; /* 浅麦秆黄色 */
    box-shadow: 0 8px 32px -12px rgba(0,0,0,0.03) !important;
    color: hsl(47, 15%, 25%) !important; /* 深橄榄褐色 */
  }

  .inputbar-container {
    background-color: #FFFFFF; /* 纯白色 */
    border: 1px solid #87867F40; /* 中灰褐色带40%透明度 */
    border-radius: 16px;
  }

  /* 代码样式 */
  code {
    background-color: #3D39290D; /* 深棕褐色，5%透明度 */
    color: #7C1B13; /* 砖红褐色 */
  }

  pre code {
    color: #000000; /* 纯黑色 */
  }
}

image
image2054×1358 281 KB

2 个赞
45

代码块class名是啥？

46

好看–

47

可以ctrl+shift+I然后再找？没学过前端这些东西懒得查了，本来代码块单独一个字体更好

48

搞定了，不知道为什么开发者工具调不出来，重启一下好了。

49

这样设置后，是不是把浏览器默认的字体渲染样式是不是也给覆盖了？

50

字体下载到本地，不用安装：
src: url(‘file:///C:/Users/Administrator/Downloads/LXGWWenKaiMonoGBScreen.ttf’) format(‘truetype’);
目录（自定义）：C:/Users/Administrator/Downloads/
字体文件：LXGWWenKaiMonoGBScreen.ttf

51

此话题已在最后回复的 30 天后被自动关闭。不再允许新回复。