persist theme & cleanup

Author: jellydeck

app/app.vue

@@ -3,12 +3,14 @@ import { useEventListener } from '@vueuse/core'
 
 const route = useRoute()
 const router = useRouter()
+const { settings } = useSettings()
 
 const isHomepage = computed(() => route.path === '/')
+const theme = settings.value.theme === 'dark' ? 'dark' : 'light'
 
 useHead({
   htmlAttrs: {
-    'data-theme': 'light',
+    'data-theme': 'dark',
   },
   titleTemplate: titleChunk => {
     return titleChunk ? titleChunk : 'npmx - Better npm Package Browser'
@@ -73,19 +75,23 @@ if (import.meta.client) {
 }
 
 :root[data-theme='dark'] {
+  /* background colors */
   --bg: oklch(0.145 0 0);
   --bg-subtle: oklch(0.178 0 0);
   --bg-muted: oklch(0.218 0 0);
   --bg-elevated: oklch(0.252 0 0);
 
+  /* text colors */
   --fg: oklch(0.985 0 0);
   --fg-muted: oklch(0.709 0 0);
   --fg-subtle: oklch(0.633 0 0);
 
+  /* border, seperator colors */
   --border: oklch(0.269 0 0);
   --border-subtle: oklch(0.239 0 0);
   --border-hover: oklch(0.371 0 0);
 
+  /* user selected accent */
   --accent: oklch(1 0 0);
   --accent-muted: oklch(0.922 0 0);
 

app/components/PackageDownloadStats.vue

@@ -30,23 +30,24 @@ const config = computed(() => ({
       show: false,
     },
     area: {
-      color: '#6A6A6A',
       useGradient: false,
+      // here css variable doesn't seem to work here
+      color: '#6A6A6A',
       opacity: 10,
     },
     dataLabel: {
       offsetX: -10,
       fontSize: 28,
       bold: false,
-      color: '#FAFAFA',
+      color: 'var(--fg)',
     },
     line: {
-      color: '#6A6A6A',
+      color: 'var(--fg-subtle)',
       pulse: {
         show: true,
         loop: true, // runs only once if false
         radius: 2,
-        color: '#8A8A8A',
+        color: 'var(--fg-muted)',
         easing: 'ease-in-out',
         trail: {
           show: true,
@@ -56,17 +57,17 @@ const config = computed(() => ({
     },
     plot: {
       radius: 6,
-      stroke: '#FAFAFA',
+      stroke: 'var(--fg)',
     },
     title: {
       text: lastDatapoint.value,
       fontSize: 12,
-      color: '#8A8A8A',
+      color: 'var(--fg)',
       bold: false,
     },
     verticalIndicator: {
       strokeDasharray: 0,
-      color: '#FAFAFA',
+      color: 'var(--fg-muted)',
     },
   },
 }))

app/components/SettingsMenu.vue

@@ -113,7 +113,7 @@ onKeyStroke(',', e => {
           <!-- Include @types in install toggle -->
           <button
             type="button"
-            class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50 inset-shadow"
+            class="w-full flex items-center justify-between gap-3 px-2 py-2 rounded-md hover:bg-bg-muted transition-[background-color] duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fg/50"
             role="menuitemcheckbox"
             :aria-checked="settings.includeTypesInInstall"
             @click="settings.includeTypesInInstall = !settings.includeTypesInInstall"

app/composables/useSettings.ts

@@ -9,11 +9,14 @@ export interface AppSettings {
   relativeDates: boolean
   /** Include @types/* package in install command for packages without built-in types */
   includeTypesInInstall: boolean
+  /** Theme of site, default dark */
+  theme: 'dark' | 'light'
 }
 
 const DEFAULT_SETTINGS: AppSettings = {
   relativeDates: false,
   includeTypesInInstall: true,
+  theme: 'dark',
 }
 
 const STORAGE_KEY = 'npmx-settings'