-
-
-
+
+
+
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 037c8f662c..94f8ccda82 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -43,6 +43,10 @@
"settings": {
"relative_dates": "Relative dates",
"include_types": "Include {'@'}types in install",
+ "theme": "Theme",
+ "theme_light": "Light",
+ "theme_dark": "Dark",
+ "theme_system": "System",
"language": "Language",
"help_translate": "Help translate npmx"
},
diff --git a/nuxt.config.ts b/nuxt.config.ts
index f19046ba35..b50775f58f 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -31,9 +31,17 @@ export default defineNuxtConfig({
'@vite-pwa/nuxt',
'@vueuse/nuxt',
'@nuxtjs/i18n',
+ '@nuxtjs/color-mode',
],
- css: ['vue-data-ui/style.css'],
+ colorMode: {
+ preference: 'system',
+ fallback: 'dark',
+ dataValue: 'theme',
+ storageKey: 'npmx-color-mode',
+ },
+
+ css: ['~/assets/main.css', 'vue-data-ui/style.css'],
devtools: { enabled: true },
diff --git a/package.json b/package.json
index fdd3800b1c..16d65f6257 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
"@nuxt/a11y": "1.0.0-alpha.1",
"@nuxt/fonts": "^0.13.0",
"@nuxt/scripts": "^0.13.2",
+ "@nuxtjs/color-mode": "^4.0.0",
"@nuxtjs/html-validator": "^2.1.0",
"@nuxtjs/i18n": "10.2.1",
"@shikijs/langs": "^3.21.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8081a8b91e..f9ca4084e5 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -30,6 +30,9 @@ importers:
'@nuxt/scripts':
specifier: ^0.13.2
version: 0.13.2(@unhead/vue@2.1.2(vue@3.5.27(typescript@5.9.3)))(db0@0.3.4(better-sqlite3@12.5.0))(ioredis@5.9.2)(magicast@0.5.1)(typescript@5.9.3)(vue@3.5.27(typescript@5.9.3))
+ '@nuxtjs/color-mode':
+ specifier: ^4.0.0
+ version: 4.0.0(magicast@0.5.1)
'@nuxtjs/html-validator':
specifier: ^2.1.0
version: 2.1.0(@voidzero-dev/vite-plus-test@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(happy-dom@20.3.5)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(magicast@0.5.1)
@@ -1807,6 +1810,9 @@ packages:
'@nuxtjs/color-mode@3.5.2':
resolution: {integrity: sha512-cC6RfgZh3guHBMLLjrBB2Uti5eUoGM9KyauOaYS9ETmxNWBMTvpgjvSiSJp1OFljIXPIqVTJ3xtJpSNZiO3ZaA==}
+ '@nuxtjs/color-mode@4.0.0':
+ resolution: {integrity: sha512-xyaVR/TPLdMuRa2VOgH6b75jvmFEsn9QKL6ISldaAw38ooFJfWY1ts2F3ye43wcT/goCbcuvPuskF2f8yUZhlw==}
+
'@nuxtjs/html-validator@2.1.0':
resolution: {integrity: sha512-ldo8ioSsH3OEumtgwDMokTxlhjgO9FxjJWViAxisq5l/wjvaVX8SYTQ02wjtQcQQPSvS6BwgypAp400RlyFHng==}
@@ -7903,6 +7909,7 @@ packages:
tar@7.5.6:
resolution: {integrity: sha512-xqUeu2JAIJpXyvskvU3uvQW8PAmHrtXp2KDuMJwQqW8Sqq0CaZBAQ+dKS3RBXVhU4wC5NjAdKrmh84241gO9cA==}
engines: {node: '>=18'}
+ deprecated: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exhorbitant rates) by contacting i@izs.me
temp-dir@2.0.0:
resolution: {integrity: sha512-aoBAniQmmwtcKp/7BzsH8Cxzv8OL736p7v1ihGb5e9DJ9kTwGWHrQrVB5+lfVDzfGrdRzXch+ig7LHaY1JTOrg==}
@@ -9566,7 +9573,7 @@ snapshots:
dependencies:
'@babel/code-frame': 7.28.6
'@babel/generator': 7.28.6
- '@babel/parser': 7.27.7
+ '@babel/parser': 7.28.6
'@babel/template': 7.28.6
'@babel/types': 7.28.6
debug: 4.4.3
@@ -11012,6 +11019,16 @@ snapshots:
transitivePeerDependencies:
- magicast
+ '@nuxtjs/color-mode@4.0.0(magicast@0.5.1)':
+ dependencies:
+ '@nuxt/kit': 4.3.0(magicast@0.5.1)
+ exsolve: 1.0.8
+ pathe: 2.0.3
+ pkg-types: 2.3.0
+ semver: 7.7.3
+ transitivePeerDependencies:
+ - magicast
+
'@nuxtjs/html-validator@2.1.0(@voidzero-dev/vite-plus-test@0.0.0-ffb4d08a8edafe855c59736c0a38ee85a2373ebb(@types/node@24.10.9)(esbuild@0.27.2)(happy-dom@20.3.5)(jiti@2.6.1)(terser@5.46.0)(typescript@5.9.3)(yaml@2.8.2))(magicast@0.5.1)':
dependencies:
'@nuxt/kit': 3.21.0(magicast@0.5.1)
diff --git a/shared/utils/constants.ts b/shared/utils/constants.ts
index f4ec66d1f1..b992e947af 100644
--- a/shared/utils/constants.ts
+++ b/shared/utils/constants.ts
@@ -19,10 +19,10 @@ export const ERROR_SUGGESTIONS_FETCH_FAILED = 'Failed to fetch suggestions.'
// Theming
export const ACCENT_COLORS = {
- rose: '#e9aeba',
- amber: '#fbbf24',
- emerald: '#34d399',
- sky: '#38bdf8',
- violet: '#a78bfa',
- coral: '#fb7185',
+ rose: 'oklch(0.797 0.084 11.056)',
+ amber: 'oklch(0.828 0.165 84.429)',
+ emerald: 'oklch(0.792 0.153 166.95)',
+ sky: 'oklch(0.787 0.128 230.318)',
+ violet: 'oklch(0.714 0.148 286.067)',
+ coral: 'oklch(0.704 0.177 14.75)',
} as const
diff --git a/uno.config.ts b/uno.config.ts
index 2985f9c069..a6aa70badd 100644
--- a/uno.config.ts
+++ b/uno.config.ts
@@ -31,31 +31,31 @@ export default defineConfig({
colors: {
// Minimal black & white palette with subtle grays
bg: {
- DEFAULT: '#0a0a0a',
- subtle: '#111111',
- muted: '#1a1a1a',
- elevated: '#222222',
+ DEFAULT: 'var(--bg)',
+ subtle: 'var(--bg-subtle)',
+ muted: 'var(--bg-muted)',
+ elevated: 'var(--bg-elevated)',
},
fg: {
- DEFAULT: '#fafafa',
- muted: '#a1a1a1',
- subtle: '#8A8A8A',
+ DEFAULT: 'var(--fg)',
+ muted: 'var(--fg-muted)',
+ subtle: 'var(--fg-subtle)',
},
border: {
- DEFAULT: '#262626',
- subtle: '#1f1f1f',
- hover: '#404040',
+ DEFAULT: 'var(--border)',
+ subtle: 'var(--border-subtle)',
+ hover: 'var(--border-hover)',
},
accent: {
- DEFAULT: 'var(--accent-color, #666666)',
- fallback: '#666666',
+ DEFAULT: 'var(--accent)',
+ fallback: 'var(--accent-muted)',
},
// Syntax highlighting colors (inspired by GitHub Dark)
syntax: {
- fn: '#b392f0', // function/command - purple
- str: '#9ecbff', // string/argument - light blue
- kw: '#f97583', // keyword - red/pink
- comment: '#6a737d', // comment - gray
+ fn: 'var(--syntax-fn)',
+ str: 'var(--syntax-str)',
+ kw: 'var(--syntax-kw)',
+ comment: 'var(--syntax-comment)',
},
// Playground provider brand colors
provider: {
@@ -101,7 +101,7 @@ export default defineConfig({
['container', 'max-w-4xl mx-auto px-4 sm:px-6'],
// Focus states - subtle but accessible
- ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/20 ring-offset-2 ring-offset-bg)'],
+ ['focus-ring', 'outline-none focus-visible:(ring-2 ring-fg/10 ring-offset-2)'],
// Buttons
[