Added: beautiful aesthetic design to scrollbar (#429)

* Added: beautiful aesthetic design to scrollbar

* Implemented: dynamic styling of scrollbar

* Fixed: re-rendering of scrollbar

* FIxed: formatting spacing

Author: saksham-joshi

src/containers/Main.js

@@ -12,6 +12,24 @@ import Error404 from "../pages/errors/error404/Error";
 import ResumePage from "../pages/resume/Resume.js";
 
 export default class Main extends Component {
+  componentDidMount() {
+    document.documentElement.style.setProperty(
+      "--scrollbar-color",
+      this.props.theme.imageHighlight
+    );
+  }
+  componentDidUpdate(prevProps) {
+    if (
+      prevProps.theme &&
+      this.props.theme &&
+      prevProps.theme.imageHighlight !== this.props.theme.imageHighlight
+    ) {
+      document.documentElement.style.setProperty(
+        "--scrollbar-color",
+        this.props.theme.imageHighlight
+      );
+    }
+  }
   render() {
     return (
       <BrowserRouter basename="/">

src/index.css

@@ -63,3 +63,11 @@ body {
     line-height: normal;
   }
 }
+
+:root {
+  --scrollbar-color: white; /* it will change when the page loads*/
+}
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--scrollbar-color) transparent;
+}