Change body class via <svelte:body /> #3105

PaulMaly · 2019-06-25T09:55:01Z

It's just an idea, but it'll be very convenient if we'll able to switch classes on body element like this:

<svelte:body class:profile={isProfilePage} />

Conduitry · 2019-06-25T13:02:32Z

I've considered this before - what should happen with this when compiling for SSR? There's nowhere in the current .render() response where we could say what classes are on <body>.

PaulMaly · 2019-06-25T14:43:41Z

Seems, we already have something similar with head:

const { head, html, css, body } = App.render({ ... });

And can be used in Sapper like this:

<head>
  ...
  %sapper.head%
</head>
<body %sapper.body%>

</body>

I really believe the body class for pages is a common case for many apps.

jorgegorka · 2019-08-16T17:33:46Z

In case someone wants to change the class of the body it's very easy.

Add this to the script part of your main layout file:

document.body.classList.add('my-class')

Then in a global css file like public/global.css add the styles for .my-class

PaulMaly · 2019-08-16T22:34:44Z

@jorgegorka Sorry, but everyone knows that. Here we're talking about a universal (client and server) and declarative way to set body classes. The way you described won't work with SSR and not declarative.

nsivertsen · 2019-08-27T07:32:47Z

The same kind of thing would be very useful for setting attributes on html, such as lang. react-helmet handles this by returning htmlAttributes and bodyAttributes when calling helmet.renderStatic()[link]. Maybe a similar approach would make sense here?

ramiroaisen · 2019-09-02T20:06:26Z

vote positive on <svelte:body class:name={confition} is usefull

Chaciej · 2019-10-09T05:51:08Z

+1 It would be great if we could set it like this, from the special component and with SSR.

CanRau · 2019-10-10T04:38:11Z

+1 for

<svelte:body class:name={confition}>

as well as

<svelte:html lang={lang}>

hgl · 2019-10-12T06:28:45Z

If you want to change the whole background without having the content being taller than the fold, being able to change body class is pretty vital.

Is there currently a workaround?

If I'm not wrong, using document.body.classList won't work for SSR.

I want to give body different classes based on which page is active.

hgl · 2019-10-21T08:34:40Z

BTW, I think this feature might somewhat relate to sveltejs/sapper#374.

That issue is basically asking a way for svelte to render directly at the html/body level, instead of a child node, and that probably affects how components can manipulate {body, html} {classes,attributes}

3tmaan · 2020-02-10T09:44:03Z

I don't know what is the status of <svelte:body class:name={condition} implementation, but in the meantime, I've managed to overpass this issue by using <svelte:head> instead. As my need was to add styling to my page's body.

<svelte:head>
   {#if isModal}
      <style>
         body {
            overflow: hidden;
         }
      </style>
   {/if}
</svelte:head>

techa · 2020-02-26T10:15:33Z

Simple theme chooser.

<script>
  const themes = ['', 'dark-theme', 'light-theme']
  const icons = ['🌙', '🌞', '⭐']
  let index = 0
</script>

<button on:click={() => { index = (index + 1) % themes.length }}>{icons[index]}</button>

<svelte:body class={themes[index]}/>

<svelte:head>
  <style>
    /* CSS file */
    :root {
      --background-color: #a19585;
      --text-color: #f7f7f7;
      --primal-color: #30a5a7;
    }

    .light-theme {
      --background-color: #fffaf4;
      --text-color: #201f20;
    }

    .dark-theme {
      --background-color: #201f20;
      --text-color: #fffaf4;
    }

    body {
      background-color: var(--background-color);
      color: var(--text-color);
    }
  </style>
</svelte:head>

PaulMaly · 2020-03-06T12:15:13Z

@Conduitry @Rich-Harris Any comments here? Seems this proposal is very popular.

AliBasicCoder · 2020-07-03T22:36:12Z

i have the same issue

niklasgrewe · 2020-07-06T16:21:22Z

i also find that dynamic class assignments to the body element are really needed, especially in the sapper environment with SSR

fran1990Web · 2020-09-05T15:55:23Z

where is the solution? Someone knows?

neurocmd · 2020-09-05T22:40:58Z

I want this feature alongside <svelte:html /> . On server side it might look like this:

const { head, html, css, htmlAttrs, bodyAttrs } = App.render({ ... })

Sapper template:

<html %sapper.htmlAttrs%>
<head>
  ...
  %sapper.head%
</head>
<body %sapper.bodyAttrs%>
  ...
</body>
</html>

anito · 2020-09-29T15:44:31Z

+1
In the meantime in:
_layout.svelte

<script>
import { stores } from '@sapper/app';
import { onMount } from 'svelte';

const { session } = stores();
let root;

onMount( () => {
    root = document.documentElement;
}
$: root && (hasUser => root.classList.toggle('loggedin', hasUser))(!!$session.user);
</script>

kwiat1990 · 2021-02-14T10:32:07Z

Well I think it would be very helpful to be able to change a class or any other attribute on body simply by using <svetle:body>. I was a little bit surprised that it isn't currently supported.

hartwm · 2022-12-06T16:41:10Z

<svelte:body style:--something={whatever} />

This is what I was looking for. Clearly many common use cases for changing body class or variables. This needs to be solved in core

mathg · 2023-01-06T16:53:08Z

Would really wish this would be implemented, but in the meantime, I used something similar to what @vegardlarsen has implemented.

This is my utility function

export const bodyClass = (node: HTMLBodyElement, className: string) => {
  node.classList.add(className);

  return {
    destroy() {
      node.classList.remove(className);
    }
  }
}

This is called directly in the +page.svelte.

<svelte:body use:bodyClass={'classname-to-toggle'} />

cyborgdennett · 2023-01-23T20:00:54Z

<!-- app.html -->

<html lang="%lang%" class="%theme%">
  ...
</html>

how do you import the class here? I have 2 css files, one for darkmode one for lightmode, currently I import 2 stylesheets. how do you transform stylesheet to html class?

caleb531 · 2023-02-02T00:42:38Z

Chiming in here with my particular use case: I have a similar need, but with data-* attributes instead of CSS classes. Namely, I'd like to do something like the following (in my SvelteKit app):

<!-- +layout.svelte -->
<script lang="ts">
  import { page } from '$app/stores';
</script>

<svelte:body data-page-id={$page.data.id} />

So I think if a solution to this issue is implemented, it should work for any attribute that can be applied to the <body>, not just class.

rendall · 2023-02-07T09:05:23Z

Even a non-dynamic <svelte:body class="foo"> would be useful.

RomanistHere · 2023-02-07T09:07:22Z

Event a non-dynamic <svelte:body class="foo"> would be useful.

src/app.html, works with tailwind

rendall · 2023-02-07T09:51:34Z

Thanks for trying to help, but that's not useful for this use case. What is needed is a server-side method to put a class attribute on the <body> tag of nested pages. There does not appear to be any way to do this in Svelte.

boian-ivanov · 2023-02-10T17:21:01Z

I'm not against adding this potentially great feature, but as it was already mentioned once, it seems that you can use the transformPageChunk method to do a similar thing. In my example I have the following in the hooks.server.ts

const response = await resolve(event, {
  transformPageChunk: ({ html }) => html.replace('%lang%', locale), // assume locale is 'en'
});

The resolve method is passed on the handle request and from there you can mutate your base HTML template. In the above case that lang exists on the main tag like so <html lang="%lang%">.
You can emulate the same behaviour for the other tags as well, such as <body class="%bodyClass%"> and so on.
It'd be great for the aforementioned features to be added, but there is a solution working currently.

FlippingBinary · 2023-02-10T18:05:52Z

It'd be great for the aforementioned features to be added, but there is a solution working currently.

I don't think anyone is disputing the existence of work-arounds, but it would still be nice to get rid of all that boilerplate that is currently required for something that is extremely common. Your example only shows a small part of what is required to get a functional dark theme switcher to work. You also have to force a full refresh from the server after changing the value or dynamically modify the page in-browser while handling all edge cases and being careful not to disrupt the rest of the state. @iolyd gave a more complete example of what it takes.

It is a great strategy. No doubt about that. But all that boilerplate could be replaced with something as simple as <svelte:html class={getThemeClassName()} /> if Svelte managed the attributes on <html /> and <body /> through the <svelte:tagname /> construct.

emmbm · 2023-02-10T18:29:28Z

I'm siding with @FlippingBinary and the voices claiming handling body or html attributes shouldn't require verbose solutions like mine. They put the burden on devs of making sure things stay in sync across client and server states, and are more prone to dom manipulation errors or race conditions, concerns I feel meta-frameworks are specifically expected to take care of.

Nevertheless, for posterity on my example, here's an updated / cleaned up implementation using a data attribute to foresee a cleaner handling in case I were to use this approach for multiple attributes. Feel free to adapt it to your use case:

<!--
  @component
  # Root Theme
  This singleton component manages the theme class applied to the `:root` element of the app.html.
  The theme can be updated by the client using the global theme store.
  Percolation of theme updates to the theme cookie can also be enabled/disabled for each use cases.
 -->
<script lang="ts" context="module">
  import { browser } from '$app/environment';
  import { COOKIES } from '$utils/enums';
  import { THEMES, type ThemeName } from '$utils/themes';
  import type { RequestEvent } from '@sveltejs/kit';
  import jscookie from 'js-cookie';
  import { onDestroy, onMount } from 'svelte';
  import { writable } from 'svelte/store';
  /**
   * Use this theme to initialize the first SSR result inside hooks.
   */
  export let defaultTheme: ThemeName = THEMES.light;
  const COOKIE_LIFETIME = 60 * 60 * 24 * 365;
  const ROOT = browser ? document.documentElement : undefined;
  function setUserTheme(name: ThemeName | null) {
    if (browser) {
      if (name) {
        jscookie.set(COOKIES.THEME, name, {
          path: '/',
          expires: Date.now() + COOKIE_LIFETIME,
        });
      } else {
        jscookie.remove(COOKIES.THEME, { path: '/' });
      }
    }
  }
  export function getUserTheme(event?: RequestEvent) {
    const cookie = event
      ? event.cookies.get(COOKIES.THEME)
      : browser
      ? jscookie.get(COOKIES.THEME)
      : undefined;
    if (!cookie || !(THEMES as any)[cookie]) {
      return defaultTheme;
    }
    return cookie as ThemeName;
  }
  const init = getUserTheme();
  export const rootTheme = (function () {
    const { subscribe, set: _set } = writable(init);
    function set(name: ThemeName, setCookie: boolean = false) {
      if (ROOT) {
        ROOT.setAttribute('data-theme', name);
      }
      if (setCookie) {
        setUserTheme(name);
      }
      _set(name);
    }
    function reset(setCookie: boolean = false) {
      set(init, setCookie);
    }
    return {
      subscribe,
      reset,
      set,
    };
  })();
</script>

<script lang="ts">
  /**
   * Set a root theme and reset to default theme following the lifecycle this component's instance.
   */
  export let theme: ThemeName;
  onMount(() => {
    rootTheme.set(theme);
  });
  onDestroy(() => {
    rootTheme.reset();
  });
</script>

// hooks/server.ts

export const handle: Handle = async ({ event, resolve }) => {
  // ...
  const theme = THEMES[getUserTheme(event)];
  const res = await resolve(event, {
    transformPageChunk: ({ html }) => html.replace('%app.theme%', theme),
  });
  return res;
};

@cyborgdennett My themes are generated as a series of [data-theme=...] definitions from a custom vite plugin I put together to parse a given js theme into css. You can see it here: https://github.com/CUPUM/nplex/blob/dev/frontend/src/plugins/themes/index.ts

It generates a simple stylesheet like so:

[data-theme='light'] {
  --color-bg-100: hsl(55, 20%, 97%);
  ...
  --rgb-bg-100: 249, 249, 246;
  ...
}

[data-theme='dark'] {
  ...
}

After that, its just a question of importing that stylesheet in your root layout.svelte and things should work as expected.

barvian · 2023-02-22T17:09:47Z

I made a small SvelteKit library to address this and add a make-shift svelte:html, all with SSR support. Here's a code sample:

<ska:html lang="en" on:keyup={onHtmlKeyup} />
<svelte:body class:dark={darkModeEnabled} />

Not as good as first-class support in Svelte core obviously, but it should help.

mmccoy · 2023-03-08T17:40:18Z

@barvian thanks for the library, really hoping this gets considered for core sveltekit.

eslym · 2023-03-31T04:48:07Z

it would nice to have this feature however there is some issue might need to discuss before even start implementing it

<!-- Overlay.svelte -->
<script lang="ts">
    export let show = false;
</script>
<svelte:body class:overlay={show} />
<slot/>
<style>
  :global(body.overlay) {
    overflow: none !important;
  }
</style>

<!-- App.svelte -->
<script lang="ts">
    import Overlay from './Overlay.svelte';
</script>
<Overlay show={true}/>
<Overlay show={false}/>

we can see a clear conflict in this case

FlippingBinary · 2023-03-31T12:07:18Z

@eslym that looks to me like it should be handled the same as duplicate CSS rules. The last one wins. However, maybe both could be output as CSS by the bundler in the order they appear so the browser can make that decision.

Likewise, if a nested component and its parent both set a body property, both rules could be included in the output CSS so the browser can decide. The order they appear should be based on the order they naturally would be processed by the Svelte compiler so this contradictory use-case does not add much processing overhead. The documentation could note that the order in which duplicate rules are output and which rule takes precedence is not guaranteed.

Xoiatix · 2023-04-26T21:47:55Z

Little workaround I used, might be useful.

<script>
  let body;
  let darkMode = false;

  const bindBody = (node) => (body = node);
  
  const setDarkClasses = (...classes) => {
    if (!body) return;

    if (darkMode) {
      body.classList.add(...classes);
    } else {
      body.classList.remove(...classes);
    }
};

  $: {
    darkMode;
    setDarkClasses('class1', 'class2', 'class3');
  }
</script>

<svelte:body use:bindBody />

<button on:click={() => (darkMode = !darkMode)}>Dark Mode</button>

Stephen10121 · 2023-06-03T01:33:08Z

@wistrix This is a workaround but would result in the page flickering due to this being rendered in the client side. We are looking for something that's ssr friendly.

ghostdevv · 2023-06-03T22:45:23Z

I have a svelte-body utility library for this purpose - hopefully we can get this in svelte soon though!

Stephen10121 · 2023-06-05T16:20:52Z

does it add the class name when the page is rendering in the backend?

emmbm · 2023-06-05T17:37:14Z

does it add the class name when the page is rendering in the backend?

Looking at the package shared by @ghostdevv, no this does not apply to SSR (it's an action-based approach and actions are browser-only since they bind to DOM nodes)

SSR-friendly apparoaches need to provide some handle server hook to parse and replace some value passed by clients (either through cookies or fetch-request bodies)

Look into @barvian's package, its the most complete and cleanest solution for now.

kosei28 · 2023-06-22T17:23:05Z

I made a library svelte-attr that can dynamically change the attributes of html and body tags that also works with SSR.

<HtmlAttr lang="en" />
<BodyAttr data-theme="dark" />

This library does not support the class:name directive, but it should not be a big problem without it.

PaulMaly · 2023-06-22T18:10:42Z

Interesting implementation, but basically it’s not equivalent solution, because your approach is mostly client-side and actual attributes doesn’t applied to the body/html tags during SSR. Anyway, this issue doesn’t have user-land solution and should be built-in to the Svelte itself.

Stephen10121 · 2023-12-24T00:05:11Z

My problem was that I needed to set the theme colors in the backend to prevent that annoying flicker.
Then I realized that svelte provides a :global() attribute in when working with styles. You can access the body with this attribute even during SSR.

So, in theory you can set the body variable and other styles during the SSR phase by using the :global() attribute.

To implement this solution, I decided to set the classname of an html div element (the class of the div gets set in the backend rendering phase.)

<script lang="ts">
    export let data;

    let theme = data.theme;  // "lightTheme" | "darkTheme" | "systemTheme"
</script>

<div id="themeSetter" class="{theme}" />

Then, in the style section, I use the css :has() attribute, also the :global() attribute that svelte provides to set the body styles and variables.

<style>
    :global(body):has(#themeSetter.lightTheme) {
        --text: #131615;
        --background: #f6f9f7;
        --primary: #59ab7e;
        --secondary: #97d8b5;
        --accent: #69d89d;
    }
</style>

You can go even more in depth:

<style>
    @media (prefers-color-scheme: light) {
        :global(body):has(#themeSetter.systemTheme) {
            --text: #131615;
            --background: #f6f9f7;
            --primary: #59ab7e;
            --secondary: #97d8b5;
            --accent: #69d89d;
        }
    }

    @media (prefers-color-scheme: dark) {
        :global(body):has(#themeSetter.systemTheme) {
            --text: #e9eceb;
            --background: #060907;
            --primary: #54a679;
            --secondary: #276845;
            --accent: #27965b;
        }
    }

    :global(body):has(#themeSetter.darkTheme) {
        --text: #e9eceb;
        --background: #060907;
        --primary: #54a679;
        --secondary: #276845;
        --accent: #27965b;
    }

    :global(body):has(#themeSetter.lightTheme) {
        --text: #131615;
        --background: #f6f9f7;
        --primary: #59ab7e;
        --secondary: #97d8b5;
        --accent: #69d89d;
    }
</style>

This solution worked for me. The :has() attribute seems to be supported by all the major browsers. The flicker no longer exists, and no javascript is required in the frontend to set the color variables because everything is happening in the backend.

Stephen10121 · 2023-12-24T00:07:32Z

The only problem is that you're not setting the class name in the body tag. But by setting the class of an html div element and using the :global() and :has() attributes, you are essentially setting the classname for the body.

Also you can change the classname in the frontend without any reloads.

<script lang="ts">
    export let data;

    let theme = data.theme;

    function themeChange(event) {
        document.cookie = `theme=${event.target.value}; expires=Thu, 18 Dec 2030 12:00:00 UTC`;
        theme = event.target.value;
    }
</script>

<div id="themeSetter" class="{theme}" />

<select on:change={themeChange}>
    <!-- excuse the ugly code -->
    <option value="darkTheme" selected={data.theme==="darkTheme"}>Dark</option>
    <option value="lightTheme" selected={data.theme==="lightTheme"}>Light</option>
    <option value="systemTheme" selected={data.theme==="systemTheme"}>System</option>
</select>

fvilers · 2023-12-24T08:07:15Z

I'm solving this issue using a custom action that set the class(es) I need on the body.

classList.ts

import type { Action } from "svelte/action";

export const classList: Action<Element, string | string[]> = (node, classes) => {
  const tokens = Array.isArray(classes) ? classes : [classes];
  node.classList.add(...tokens);

  return {
    destroy() {
      node.classList.remove(...tokens);
    },
  };
};

+page.svelte

<script lang="ts">
  import { classList } from "$lib/actions/classList";
</script>

<svelte:body use:classList={"bg-gray-50"} />

ivodolenc · 2024-07-03T13:27:24Z

I guess this is a difficult feature to implement since there is no official solution from the team.

It seems to be a very popular request for a long time, and ultimately it's a really useful and reasonable request to simply change classes and other attributes for html and body tags to achieve content manipulation or other functionality as needed.

I really hope this can be added to the stable version of Svelte 5.

As already suggested above (#1, #2), here is an example that works well for my use case. Also this #3 will not work in SvelteKit since actions are client-side only so it will flicker on page reload.

I needed to change some styles only for a specific page. This is a workaround when it comes to styles.

First, let's set the derived pageId value to the main +layout.svelte so that it can easily change dynamically as we navigate through the page.

<!-- +layout.svelte -->

<script lang="ts">
  import { page } from '$app/stores'
  import '../styles/main.css'

  let { children } = $props()

  // optional parsing step for friendly string output
  function parsePath(path: string) {
    let newPath: string = ''
    if (path === '/') newPath = '/home'
    else newPath = path

    // replaces route `/` with `dash`
    return newPath.replace(/\//g, '-').slice(1)
  }

  let pageId = $derived(parsePath($page.url.pathname))
</script>

<!-- automatically sets `page-id` on each route change -->
<div data-page="{pageId}">{@render children()}</div>

After that you can easily add styles for html or body tag, of course there are no issues for now with this approach, no flicker etc and works in sveltekit with ssr/static.

/* styles/main.css */

/* html styles for 'home' page */
html:has(div[data-page='home']) {
  background: blue;
}

/* body styles for 'about' page */
body:has(div[data-page='about']) {
  background: green;
}

/* etc... */

Conduitry added the proposal label Jun 25, 2019

Conduitry mentioned this issue Nov 24, 2019

<svelte:body class:class--name={true} /> #3985

Closed

This comment has been minimized.

Sign in to view

sveltejs deleted a comment from dalisoft Jul 3, 2020

This comment has been minimized.

Sign in to view

mindrones added the feature: svelte:body label Jul 7, 2020

This comment has been minimized.

Sign in to view

pngwn added popular more than 20 upthumbs feature request and removed proposal labels Jun 26, 2021

PatrickG mentioned this issue Nov 26, 2022

<svelte:body/> Allow adding classes to the body tag #8058

Closed

longnguyen2004 mentioned this issue Apr 17, 2023

Initial dark mode state - incorrect dark mode switching in AppShell example svelteuidev/svelteui#334

Open

Prinzhorn mentioned this issue Jan 14, 2024

Special Element for Document Element(<html/> tag) #10183

Closed

7nik mentioned this issue Aug 13, 2024

Allow $effect.pre to run on the server #9278

Open

dummdidumm self-assigned this Nov 15, 2024

Change body class via <svelte:body /> #3105

Change body class via <svelte:body /> #3105

Comments

PaulMaly commented Jun 25, 2019

Conduitry commented Jun 25, 2019

PaulMaly commented Jun 25, 2019 • edited Loading

jorgegorka commented Aug 16, 2019

PaulMaly commented Aug 16, 2019

nsivertsen commented Aug 27, 2019

ramiroaisen commented Sep 2, 2019 • edited Loading

Chaciej commented Oct 9, 2019

CanRau commented Oct 10, 2019

hgl commented Oct 12, 2019 • edited Loading

hgl commented Oct 21, 2019

3tmaan commented Feb 10, 2020

techa commented Feb 26, 2020

PaulMaly commented Mar 6, 2020

This comment has been minimized.

AliBasicCoder commented Jul 3, 2020

This comment has been minimized.

niklasgrewe commented Jul 6, 2020

fran1990Web commented Sep 5, 2020

neurocmd commented Sep 5, 2020

This comment has been minimized.

anito commented Sep 29, 2020

This comment has been minimized.

kwiat1990 commented Feb 14, 2021

hartwm commented Dec 6, 2022 • edited Loading

mathg commented Jan 6, 2023

cyborgdennett commented Jan 23, 2023

caleb531 commented Feb 2, 2023 • edited Loading

rendall commented Feb 7, 2023 • edited Loading

RomanistHere commented Feb 7, 2023 • edited Loading

rendall commented Feb 7, 2023

boian-ivanov commented Feb 10, 2023 • edited Loading

FlippingBinary commented Feb 10, 2023

emmbm commented Feb 10, 2023 • edited Loading

barvian commented Feb 22, 2023 • edited Loading

mmccoy commented Mar 8, 2023

eslym commented Mar 31, 2023

FlippingBinary commented Mar 31, 2023

Xoiatix commented Apr 26, 2023

Stephen10121 commented Jun 3, 2023

ghostdevv commented Jun 3, 2023

Stephen10121 commented Jun 5, 2023 • edited Loading

emmbm commented Jun 5, 2023

kosei28 commented Jun 22, 2023 • edited Loading

PaulMaly commented Jun 22, 2023

Stephen10121 commented Dec 24, 2023

Stephen10121 commented Dec 24, 2023 • edited Loading

fvilers commented Dec 24, 2023

classList.ts

+page.svelte

ivodolenc commented Jul 3, 2024

PaulMaly commented Jun 25, 2019 •

edited

Loading

ramiroaisen commented Sep 2, 2019 •

edited

Loading

hgl commented Oct 12, 2019 •

edited

Loading

hartwm commented Dec 6, 2022 •

edited

Loading

caleb531 commented Feb 2, 2023 •

edited

Loading

rendall commented Feb 7, 2023 •

edited

Loading

RomanistHere commented Feb 7, 2023 •

edited

Loading

boian-ivanov commented Feb 10, 2023 •

edited

Loading

emmbm commented Feb 10, 2023 •

edited

Loading

barvian commented Feb 22, 2023 •

edited

Loading

Stephen10121 commented Jun 5, 2023 •

edited

Loading

kosei28 commented Jun 22, 2023 •

edited

Loading

Stephen10121 commented Dec 24, 2023 •

edited

Loading