Prefers-Color-Scheme Client Hint and SvelteKit

hooks.js

/**
  See https://wicg.github.io/user-preference-media-features-headers/ for more info on the Client Hint
  
  This code will inform the server which color scheme the user prefers.
  It can be used to apply to correct classes and prevent a flash of the wrong scheme during load.
*/
export async function handle({ event, resolve }) {
  // Read the Color Scheme Client Hint
  const colorScheme = event.request.headers.get('Sec-CH-Prefers-Color-Scheme')

  if (!colorScheme) {
    // If not present, send back that this server accepts the color scheme hint   
    const response = new Response('custom response');
      response.headers.set('Accept-CH', 'Sec-CH-Prefers-Color-Scheme')
      return response;
  }

  // Attach to locals so it can be read in getSession or whatever
  event.locals.colorScheme = colorScheme;
    
  // Usual stuff
  const response = await resolve(event);
  return response;
}