@data-fair/lib-vue 1.14.0 → 1.15.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-fair/lib-vue",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "description": "Composables and other utilities for Vue applications in the data-fair stack.",
   "main": "index.js",
   "files": [

package/session.d.ts

@@ -51,6 +51,8 @@ interface FullSiteInfo {
         darkColors?: Colors;
         hc: boolean;
         hcColors?: Colors;
+        hcDark: boolean;
+        hcDarkColors?: Colors;
     };
 }
 export interface SiteInfo {
@@ -59,7 +61,7 @@ export interface SiteInfo {
     dark?: boolean;
     colors: Colors;
 }
-type Theme = 'default' | 'dark' | 'hc';
+type Theme = 'default' | 'dark' | 'hc' | 'hc-dark';
 export interface Session {
     state: SessionState;
     user: ComputedRef<SessionState['user']>;

package/session.js

@@ -11,12 +11,11 @@ const debug = Debug('session')
 debug.log = console.log.bind(console)
 function getDefaultTheme (site) {
   // see https://www.scottohara.me/blog/2021/10/01/detect-high-contrast-and-dark-modes.html
-  if (site.theme.hc) {
-    if (window.matchMedia && window.matchMedia('(forced-colors: active)').matches) { return 'hc' }
-  }
-  if (site.theme.dark) {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) { return 'dark' }
-  }
+  const preferDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  const preferHC = window.matchMedia && window.matchMedia('(forced-colors: active)').matches
+  if (site.theme.hcDark && preferDark && preferHC) { return 'hc-dark' }
+  if (site.theme.hc && preferHC) { return 'hc' }
+  if (site.theme.dark && preferDark) { return 'dark' }
   return 'default'
 }
 function jwtDecodeAlive (jwt) {
@@ -73,7 +72,7 @@ export async function getSession (initOptions) {
   // cookies are the source of truth and this information is transformed into the state reactive object
   const cookies = initOptions?.cookies ?? new Cookies(options.req?.headers.cookie)
   const readState = () => {
-    theme.value = cookies.get('theme') ?? 'default'
+    theme.value = cookies.get('theme') ?? null
     const langCookie = cookies.get('i18n_lang')
     state.lang = langCookie ?? options.defaultLang
     const idToken = cookies.get('id_token')
@@ -250,6 +249,10 @@ export async function getSession (initOptions) {
         partialSite.colors = siteInfo.theme.darkColors
         partialSite.dark = true
       }
+      if (theme.value === 'hc-dark') {
+        partialSite.colors = siteInfo.theme.hcDarkColors
+        partialSite.dark = true
+      }
       site.value = partialSite
     } else {
       site.value = siteInfo