分享一个自用的cherry studio css配置

书接上回

于是在桌面端用上了cherry studio
一如既往的开始配置小玩具(就和装arch后开始整一堆kde, gnome一样ww)
感觉Dracula主题还不错,于是加上了一些格子捏

不错!

以下是修改后的css

/* Dracula主题 */
:root {
    /* 基础色板 */
    --color-white: #F8F8F2;       /* Dracula Foreground */
    --color-white-soft: rgba(248, 248, 242, 0.8);
    --color-white-mute: rgba(248, 248, 242, 0.6);
    --color-black: #282A36;      /* Dracula Background */
    --color-black-soft: #343746;  /* 稍暗背景 */
    --color-black-mute: #44475A;  /* Dracula Current Line */
    
    /* 灰度阶梯 */
    --color-gray-1: #6272A4;      /* Dracula Comment */
    --color-gray-2: #44475A;      /* Current Line */
    --color-gray-3: #343746;      /* 深灰 */
    
    /* 文本色阶 */
    --color-text-1: #F8F8F2;      /* Foreground */
    --color-text-2: rgba(248, 248, 242, 0.7);
    --color-text-3: rgba(248, 248, 242, 0.5);
    
    /* 背景系统 */
    --color-background: var(--color-black);
    --color-background-soft: var(--color-black-soft);
    --color-background-mute: var(--color-black-mute);
    --color-background-opacity: rgba(40, 42, 54, 0.9);  /* Dracula背景+透明度 */
    
    /* 主色系统 */
    --color-primary: #BD93F9;      /* Dracula Purple */
    --color-primary-soft: #BD93F999;
    --color-primary-mute: #BD93F933;
    
    /* 图标与边框 */
    --color-icon: rgba(248, 248, 242, 0.6);
    --color-icon-white: #F8F8F2;
    --color-border: rgba(248, 248, 242, 0.1);
    --color-border-soft: rgba(248, 248, 242, 0.08);
    --color-border-mute: rgba(248, 248, 242, 0.05);
    
    /* 功能色 */
    --color-error: #FF5555;        /* Dracula Red */
    --color-link: #8BE9FD;         /* Dracula Cyan */
    --color-code-background: #343746;
    
    /* 交互状态 */
    --color-hover: rgba(68, 71, 90, 0.5);  /* Current Line 50%透明度 */
    --color-active: rgba(68, 71, 90, 0.8); 
    
    /* 组件特定 */
    --color-frame-border: #6272A4;        /* Comment颜色 */
    --color-group-background: var(--color-black-soft);
    --color-reference: #44475A;
    --color-reference-text: #F8F8F2;
    --color-reference-background: #282A36;
    
    /* 导航栏与聊天 */
    --navbar-background-mac: rgba(40, 42, 54, 0.8);
    --navbar-background: #282A36;
    --chat-background: #282A36;
    --chat-background-user: #44475A;       /* Current Line */
    --chat-background-assistant: #343746;  /* 深灰 */
    --chat-text-user: #F8F8F2;
}

.bubble .message-user .message-action-button:hover {
  background-color: var(--color-background-mute);
}
body[theme-mode="dark"]{
    --color-list-item: var(--color-background-soft) !important;
    --color-list-item-hover: var(--color-background-soft) !important;
}
body[theme-mode="light"]{
    --color-list-item: var(--color-background-soft) !important;
    --color-list-item-hover: var(--color-background-soft) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(0deg, var(--grid-line-color) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: var(--grid-opacity);
}
body {
  position: relative;
}
body[theme-mode="dark"] {
  --grid-line-color: rgba(248, 248, 242, 0.08);
  --grid-opacity: 0.35;
}
body[theme-mode="light"] {
  --grid-line-color: rgba(40, 42, 54, 0.12);
  --grid-opacity: 0.25;
}

[!info]-挖坑,下次看看能不能像我的code一样加上个类似background的效果(

16 个赞

好看ww

1 个赞

感谢大佬。

2 个赞

感谢分享

1 个赞

感谢分享

1 个赞

感谢分享

1 个赞

感谢分享

1 个赞

非常棒,已经用上了

1 个赞