better docs

README.md

@@ -66,6 +66,15 @@ Link to the minified file in HTML:
 <script type="module" src="./scroll-progress.min.js"></script>
 ```
 
+## css
+Override the variable `--scroll-progress-color` to customize the color.
+
+```css
+.scroll-progress {
+    --scroll-progress-color: pink;
+}
+```
+
 ## examples
 
 ### JS
@@ -74,7 +83,7 @@ Link to the minified file in HTML:
 // index.ts
 import Tonic from '@bicycle-codes/tonic'
 import { ScrollProgress } from '@bicycle-codes/scroll-progress'
-import './index.css'
+import '@bicycle-codes/scroll-progress.css'
 import '@bicycle-codes/scroll-progress'
 
 function ScrollExample () {

src/index.css

@@ -3,7 +3,7 @@
     --scroll: 0;
 }
 
-.scroll-position {
+.scroll-progress {
     min-height: 10px;
     width: var(--scroll);
     position: fixed;

src/index.ts

@@ -42,7 +42,7 @@ export class ScrollProgress extends Tonic {
     }
 
     render () {
-        const classes = (['scroll-position'])
+        const classes = (['scroll-progress'])
             // @ts-expect-error broken upstream
             .concat((this.props.class || '').split(' '))
             .filter(Boolean)