Browse Source

为滚动条加样式信息,使之适配主题

dengdx 2 months ago
parent
commit
b84ea56571
2 changed files with 39 additions and 0 deletions
  1. 1 0
      src/themes/index.ts
  2. 38 0
      src/themes/theme.css

+ 1 - 0
src/themes/index.ts

@@ -1,4 +1,5 @@
 import { lightTheme } from './lightTheme';
 import { darkTheme } from './darkTheme';
+import './theme.css';
 
 export { lightTheme, darkTheme };

+ 38 - 0
src/themes/theme.css

@@ -0,0 +1,38 @@
+/* 全局滚动条样式 */
+
+
+/* 整个滚动条 */
+::-webkit-scrollbar {
+  width: 5px;       /* 垂直滚动条宽度 */
+  height: 5px;      /* 水平滚动条高度 */
+}
+
+/* 轨道部分 */
+::-webkit-scrollbar-track {
+  background: var(--ant-bg-color); /* 容器/布局背景色 */
+  border-radius: 5%;
+}
+
+/* 滚动块 */
+::-webkit-scrollbar-thumb {
+  background: var(--ant-scrollbar-thumb, #888); /* 可自定义变量,或用主色透明度 */
+  border-radius: 2px;
+}
+
+/* 滚动块悬停时 */
+::-webkit-scrollbar-thumb:hover {
+background: var(--ant-scrollbar-thumb-hover, var(--ant-text-color));
+}
+
+/* 滚动条角落(横竖交界处) */
+::-webkit-scrollbar-corner {
+  background: var(--ant-bg-color, #ccc);
+}
+
+
+/*兼容firefox*/
+/* 设置颜色(thumb 和 track) 需要时再具体修改*/
+.scrollable {
+  scrollbar-color: #888 #f0f0f0; /* thumb, track */
+  scrollbar-width: thin;        /* auto | thin | none */
+}