npm-docs: migrate to css

README.md

@@ -20,7 +20,7 @@ style.
 |        Apotea         |                [Install](https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/apotea/apotea.user.css)                |        [Info](sites/apotea)         |
 |         SMHI          |                               [Install](https://github.com/aruncveli/userstyles/raw/main/smhi/smhi.user.styl)                                |            [Info](smhi)             |
 | Trafikinformation tåg | [Install](https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/trafikinformation-tåg/trafikinformation-tåg.user.css) | [Info](sites/trafikinformation-tåg) |
-|       npm Docs        |                           [Install](https://github.com/aruncveli/userstyles/raw/main/npm-docs/npm-docs.user.styl)                            |          [Info](npm-docs)           |
+|       npm Docs        |             [Install](https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/npm-docs/npm-docs.user.styl)              |       [Info](sites/npm-docs)        |
 |          npm          |                   [Install](https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/npm/npm.user.css)                   |          [Info](sites/npm)          |
 |        YouGov         |                             [Install](https://github.com/aruncveli/userstyles/raw/main/yougov/yougov.user.styl)                              |           [Info](yougov)            |
 |        AWS CDK        |               [Install](https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/aws-cdk/aws-cdk.user.css)               |        [Info](sites/aws-cdk)        |

package.json

@@ -16,7 +16,7 @@
 		"@biomejs/biome": "1.9.4",
 		"@tsconfig/strictest": "2.0.5",
 		"@types/ejs": "3.1.5",
-		"@types/node": "22.12.0",
+		"@types/node": "22.13.0",
 		"ejs": "3.1.10",
 		"husky": "9.1.7",
 		"lint-staged": "15.4.3",

sites/npm-docs/README.md

@@ -0,0 +1,5 @@
+# npm Docs Dark
+
+[Install](https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/npm-docs/npm-docs.user.styl)
+
+![Screenshot of page](screenshot.png)

sites/npm-docs/npm-docs.user.css

@@ -0,0 +1,60 @@
+/* ==UserStyle==
+@name           npm Docs Dark
+@namespace      github.com/aruncveli/userstyles
+@version        25.2.2
+@description    Dark theme for npm Docs
+@author         Arun Chandanaveli <aruncveli@gmail.com> (https://github.com/aruncveli)
+@homepageURL    https://github.com/aruncveli/userstyles
+@supportURL     https://github.com/aruncveli/userstyles/issues
+@updateURL      https://raw.githubusercontent.com/aruncveli/userstyles/refs/heads/main/sites/npm-docs/npm-docs.user.styl
+@license        MIT
+@preprocessor   default
+@var color fg "Foreground" white
+@var color bg "Background" black
+@var color bg1 "Background lightened 1" #111
+@var color bg2 "Background lightened 2" #222
+@var color link-color "Link" #ff453a
+==/UserStyle== */
+@-moz-document url-prefix("https://docs.npmjs.com") {
+	:root {
+		color-scheme: dark;
+		--fgColor-accent: var(--link-color);
+		--fgColor-default: var(--fg);
+		--fgColor-muted: var(--fg);
+		--bgColor-default: var(--bg);
+		--bgColor-accent-muted: var(--bg1);
+		--bgColor-neutral-muted: var(--bg1);
+		--control-transparent-bgColor-hover: var(--bg1);
+		--control-transparent-bgColor-active: var(--bg2);
+		--control-transparent-bgColor-selected: var(--bg2);
+		--borderColor-default: var(--bg);
+		--button-default-borderColor-active: var(--bg);
+		--button-default-borderColor-hover: var(--bg);
+		--button-default-borderColor-rest: var(--bg);
+		--button-default-bgColor-rest: var(--bg1);
+		--button-default-bgColor-hover: var(--bg2);
+		--button-default-bgColor-active: var(--bg2);
+		--button-default-fgColor-rest: var(--fg);
+		--overlay-bgColor: var(--bg1);
+		--borderColor-muted: var(--bg1);
+	}
+	.haGPdU {
+		color: var(--link-color);
+	}
+	.bRtvlF {
+		color: var(--fg) !important;
+		background-color: var(--bg1) !important;
+	}
+	.VTnRl.token /*Code blocks*/ {
+		&.function {
+			color: var(--link-color) !important;
+		}
+		&.plain,
+		&.builtin.class-name,
+		&.operator,
+		&.punctuation,
+		&.keyword {
+			color: var(--fg) !important;
+		}
+	}
+}