toggle slider style

Author: metaory

README.md

@@ -1,5 +1,5 @@
 <div align="center">
-    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/public/logo.svg" alt="logo" height="128" />
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/logo.svg" alt="logo" height="128" />
     <h2>json-diff-viewer</h2>
     <h5>
         Compare JSON side-by-side, visually
@@ -12,8 +12,8 @@
     <h5>
         <a href="https://metaory.github.io/json-diff-viewer-component/" target="_blank">metaory.github.io/json-diff-viewer-component</a>
     </h5>
-    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/public/screenshot.jpg" alt="demo" width="80%" />
-    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/refs/heads/master/public/screenshot-light.jpg" alt="demo-light" width="80%" />
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot.jpg" alt="demo" width="80%" />
+    <img src="https://raw.githubusercontent.com/metaory/json-diff-viewer-component/master/public/screenshot-light.jpg" alt="demo-light" width="80%" />
 </div>
 
 ## Features

package.json

@@ -3,6 +3,9 @@
   "version": "0.6.0",
   "type": "module",
   "description": "Vanilla JS web component for side-by-side JSON diff visualization",
+  "bugs": "https://github.com/metaory/json-diff-viewer-component/issues",
+  "homepage": "https://metaory.github.io/json-diff-viewer-component/",
+  "repository": "git+https://github.com/metaory/json-diff-viewer-component.git",
   "keywords": [
     "json",
     "diff",

src/lib/styles.js

@@ -47,7 +47,7 @@ export default `
 .switch { display: inline-block; cursor: pointer; }
 .checkbox { display: none; }
 .slider { width: 48px; height: 24px; background-color: var(--bdr); border-radius: 16px; overflow: hidden; display: flex; align-items: center; border: 3px solid transparent; transition: .3s; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.25) inset; cursor: pointer; }
-.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--txt); transform: translateX(-24px); border-radius: 16px; transition: .3s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
+.slider::before { content: ''; display: block; width: 100%; height: 100%; background-color: var(--br); transform: translateX(-24px); border-radius: 16px; transition: .3s; box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
 .checkbox:checked ~ .slider::before { transform: translateX(24px); box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.25); }
 .checkbox:checked ~ .slider { background-color: var(--slider); }
 .checkbox:active ~ .slider::before { transform: translate(0); }