Skip to content

Bottom Panel 底部面板

大表哥 edited this page Dec 30, 2021 · 2 revisions

基础面板

描述 token 项 dark 变量值 light 变量值
面板边框颜色将面板和编辑器分开 panel.border dark-idegrey-5
#43484D light-idegrey-5
#E0E0E0
【未实现】 面板前景色 panel.foreground dark-idegrey-9
#D7DBDE light-idegrey-9
#4D4D4D
面板辅助前景色 kt.panel.secondaryForeground dark-idegrey-7
#868C91 light-idegrey-7
#999999
面板背景色 panel.background dark-idegrey-1
#202224 light-idegrey-1
#FFFFFF
【未实现】 面板前景色(文字)选中色背景 panel.selectionBackground opacity(dark-idegrey-6,25)
#5F656B40 opacity(light-idegrey-6,25)
#CCCCCC40
【未实现】 面板内分割线的颜色 panel.separatorBackground dark-idegrey-3
#2C3033 light-idegrey-3
#F2F2F2

底部菜单

描述 token 项 dark 变量值 light 变量值
菜单栏前景色 activityBar.foreground dark-idegrey-9
#D7DBDE light-idegrey-9
#4D4D4D
菜单栏背景色 panelMenuBar.background dark-idegrey-3
#2C3033 light-idegrey-3
#F2F2F2
拖动项的背景色 kt.activityBar.dropUpBackground dark-ideblue-4
#1F507D light-ideblue-2
#CCE7FF
拖动时目标位置的背景色 activityBar.dropBackground dark-idegrey-5
#43484D light-idegrey-5
#E0E0E0
【未实现】 拖动项的阴影 activityBar.dropShadow
  • 0px 1px 2px -2px rgba(0,0,0,0.48)
  • 0 3px 6px 0px rgba(0,0,0,0.36)
  • 0 5px 12px 4px rgba(0,0,0,0.27) |
  • 0px 1px 2px -2px rgba(0,0,0,0.16)
  • 0 3px 6px 0px rgba(0,0,0,0.12)
  • 0 5px 12px 4px rgba(0,0,0,0.09) | | 菜单失效时的前景色 | activityBar.inactiveForeground | dark-idegrey-7 #5F656B | light-idegrey-7 #CCCCCC | | 菜单选中前景色 | activityBar.activeForeground | dark-idegrey-10 #FFFFFF | light-idegrey-10 #262626 | | 菜单选中线段标识 | activityBar.activeBorder | dark-ideblue-6 #167CDB | light-ideblue-6 #1785EB | | 菜单边框颜色将活动栏和编辑器分开 | activityBar.border | dark-idegrey-2 #252729 | light-idegrey-5 #E0E0E0 | | 菜单中徽标的前景色 | panelMenuBarBadge.foreground | opacity(dark-idegrey-6,25) #5F656B40 | opacity(light-idegrey-6,25) #CCCCCC40 | | 菜单中徽标的背景色 | panelMenuBadge.background | opacity(dark-black,25) #00000040 | light-idegrey-1 #FFFFFF |

标题栏(标题&页卡)

描述 token 项 dark 变量值 light 变量值
标题的文字颜色 panelTitle.inactiveForeground dark-idegrey-9
#D7DBDE light-idegrey-9
#4D4D4D
【未实现】 底部标题栏 hover 的前景色 panelTitle.hoverForeground dark-idegrey-10
#FFFFFF light-idegrey-10
#262626
底部标题栏选中的前景色 panelTitle.activeForeground dark-idegrey-10
#FFFFFF light-idegrey-10
#262626
底部标题栏选中边框 panelTitle.activeBorder dark-ideblue-6
#167CDB light-ideblue-6
#1785EB
标题容器背景色 kt.panelTitle.background dark-idegrey-3
#2C3033 light-idegrey-3
#F2F2F2
页卡未激活态前景色 kt.panelTab.inactiveForeground dark-idegrey-9
#D7DBDE light-idegrey-9
#4D4D4D
页卡未激活态背景色 kt.panelTab.inactiveBackground dark-idegrey-4
#2C3033 light-idegrey-3
#F2F2F2
页卡激活态前景色 kt.panelTab.activeForeground dark-idegrey-10
#FFFFFF light-idegrey-10
#262626
页卡激活态背景色 kt.panelTab.activeBackground dark-idegrey-1
#202224 light-idegrey-1
#FFFFFF
页卡的分隔线段 kt.panelTab.border dark-idegrey-3
#2C3033 light-idegrey-5
#E0E0E0
【未实现】 页卡的操作图标色 panelTabBarActionIcon.Background dark-idegrey-7
#868C91 light-idegrey-7
#999999
【未实现】 报错提醒的符号颜色 panelTabBarError.foreground dark-red-7
#DB4345 light-red-6
#F5222D

终端

描述 token 项 dark 变量值 light 变量值
集成终端的默认前景色 terminal.foreground dark-idegrey-9
#D7DBDE light-idegrey-9
#4D4D4D
集成终端视口的背景 terminal.background dark-idegrey-1
#202224 light-idegrey-1
#FFFFFF
分隔终端内分割窗格的边框颜色 terminal.border dark-idegrey-2
#252729 light-idegrey-5
#E0E0E0
断网提醒前景色 terminal.offlineForeground dark-idegrey-7
#868C91 light-idegrey-7
#999999
断网提醒链接色 terminal.offlineLinkForeground dark-ideblue-7
#3895EB light-ideblue-6
#1785EB
断网提醒背景色 terminal.offlineBackground opacity(dark-red-6,25)
#D21F2840 opacity(light-red-4,25)
#FF787540

图例

image.png