www
/
www-new
12
3
Fork 5
Code Issues 58 Pull Requests 42 Projects Releases Wiki Activity

add light and dark mode scrollbar (#571)
continuous-integration/drone/push Build is passing Details 

Co-authored-by: Tejas Srikanth <tcsrikan@high-fructose-corn-syrup.csclub.uwaterloo.ca>
Reviewed-on: #571
Reviewed-by: Shahan Nedadahandeh <snedadah@csclub.uwaterloo.ca>
This commit is contained in:
Tejas Srikanth 2023-04-28 18:34:46 -04:00
parent 48c056ea92
commit cc99e2d02b
2 changed files with 50 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/Theme.tsx
View File

@ -19,6 +19,10 @@ export const PALETTE_NAMES = [
"--primary-background",
"--secondary-background",
"--scrollbar-track",
"--scrollbar-thumb",
"--scrollbar-hover",
"--primary-accent",
"--primary-accent-soft",
"--primary-accent-light",

49
pages/_app.css
View File

@ -42,7 +42,7 @@ body {
--light--icon: #2A2A62;
--light--navbar-page-overlay: hsla(0,0%,47.1%,0.6980392156862745);
--light--navbar-page-overlay: hsla(0, 0%, 47.1%, 0.6980392156862745);
--light--code-background: #f0f0f0;
--light--button-background: #1482e3;
@ -56,6 +56,14 @@ body {
--light--border: #2a2a62;
--light--marker: #1482e3;
--dark--scrollbar-hover: #626294;
--dark--scrollbar-thumb: var(--dark--code-background);
--dark--scrollbar-track: var(--dark--secondary-background);
--light--scrollbar-hover: var(--light--blue-gradient);
--light--scrollbar-thumb: var(--dark--primary-accent-soft);
--light--scrollbar-track: var(--light--dark-card-background);
--dark--primary-background: #171729;
--dark--secondary-background: #252542;
@ -72,7 +80,7 @@ body {
--dark--form-invalid: #9f616a;
--dark--warning-background: #dd0014;
--dark--warning-text: #ffffff;
--dark--warning-text: #ffffff;
--dark--link: #4ED4B2;
--dark--link-hover: #C1F0E4;
@ -120,6 +128,10 @@ body {
--secondary-accent: var(--light--secondary-accent);
--secondary-accent-light: var(--light--secondary-accent-light);
--scrollbar-track: var(--light--scrollbar-track);
--scrollbar-thumb: var(--light--link);
--scrollbar-hover: var(--light--link-hover);
--primary-heading: var(--light--primary-heading);
--form-invalid: var(--light--form-invalid);
@ -170,6 +182,8 @@ body {
margin: 0;
}
input {
font-family: "Poppins", "sans-serif";
}
@ -225,11 +239,12 @@ p {
* A lot of elements right next to an h4 (eg p, ol, ul, etc) have a 16px margin.
* We need to make sure that the next item has an 8px margin-top.
*/
h4 + * {
h4+* {
margin-top: calc(8rem / 16);
}
@media only screen and (max-width: calc(768rem / 16)) {
/* h1, h2 = h3 on mobile */
h1,
h2 {
@ -241,6 +256,11 @@ h4 + * {
}
}
@media only screen and (prefers-color-scheme: dark) {
body {
--primary-background: var(--dark--primary-background);
@ -277,6 +297,10 @@ h4 + * {
--icon: var(--dark--icon);
--scrollbar-track: var(--dark--scrollbar-track);
--scrollbar-thumb: var(--dark--scrollbar-thumb);
--scrollbar-hover: var(--dark--scrollbar-hover);
--primary-title: var(--dark--primary-title);
--primary-subtitle: var(--dark--primary-subtitle);
--secondary-subtitle: var(--dark--secondary-subtitle);
@ -293,5 +317,24 @@ h4 + * {
--blue-gradient: var(--dark--blue-gradient);
--border: var(--dark--border);
--marker: var(--dark--marker);
}
}
::-webkit-scrollbar {
width: 1em;
height: 1em;
}
::-webkit-scrollbar-track {
background-color: var(--scrollbar-track);
}
::-webkit-scrollbar-thumb {
background-color: var(--scrollbar-thumb);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--scrollbar-hover);
}