pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

improved scrollbar visibility in dark mode

Browse source
This commit is contained in:
Kim, Jimin 2022-03-05 09:00:56 +09:00
parent 67ee9c0e32
commit 96b41ff88e
2 changed files with 12 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/styles/globalStyle.tsx
View file

@ -48,18 +48,27 @@ const anchorCSS = css`
const scrollbarCSS = css` const scrollbarCSS = css`
body::-webkit-scrollbar { body::-webkit-scrollbar {
width: ${theming.size.x_small}; width: 8px;
} }
body::-webkit-scrollbar-track { body::-webkit-scrollbar-track {
border-radius: ${theming.size.x2_small}; border-radius: ${theming.size.x2_small};
background: rgba(0, 0, 0, 0.06);
background: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: theming.light.backgroundColor0,
dark: theming.dark.backgroundColor0,
})};
box-shadow: inset 0 0 5px rgb(0 0 0 / 10%); box-shadow: inset 0 0 5px rgb(0 0 0 / 10%);
} }
body::-webkit-scrollbar-thumb { body::-webkit-scrollbar-thumb {
border-radius: ${theming.size.x2_small}; border-radius: ${theming.size.x2_small};
background: rgba(0, 0, 0, 0.1); background: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: theming.light.backgroundColor2,
dark: "#888888",
})};
box-shadow: inset 0 0 10px rgb(0 0 0 / 20%); box-shadow: inset 0 0 10px rgb(0 0 0 / 20%);
} }
` `

1
src/styles/theming.ts
View file

@ -21,7 +21,6 @@ const theming = {
}, },
size: { size: {
x2_small: "3px", x2_small: "3px",
x_small: "8px",
small: 0, small: 0,
medium: "1rem", medium: "1rem",
large: 0, large: 0,