DEV Community: Nutchapon Makelai

Stop flickering theme after page refresh in Sveltekit and Daisy UI

Nutchapon Makelai — Tue, 14 Nov 2023 09:39:19 +0000

Hi, Sveltian today I would like to share you how to stop theme flickering after we refreshing a page while we using Daisy UI with Sveltekit

New in Daisy UI 4.0

Now with Daisy UI 4.0 has been release with new component call Theme Controller it bring us to a more easier way to change between two theme in Daisy UI , for more info about what change and what new in Daisy UI 4.0 let check this link

Let see what Theme Controller can do

Now I expected you has been installing a new Sveltekit project (with a Skeleton Project option selected)

Tailwind CSS and Daisy UI , then we will starting our code

checking you tailwind.config.js , need to have at least 2 of any themes (how to setup themes)

I have set 2 customize theme name 'light' and 'dark'

adding attribute data-theme on html tag in src/app.html page

for me will set it as 'light' theme by default while page is loaded

build svelte component name 'ModeSwitcher' (this name is up to your decide) and in that svelte component put below code into it and using this component on +layout.svelte

I has using Theme Controller using a swap component from DaisyUI and set it value to 'dark' as it is my dark mode theme name

<label class="swap swap-rotate">
    <!-- this hidden checkbox controls the state -->
    <input
        type="checkbox"
        class="theme-controller"
        value="dark"
    />

    <!-- sun icon -->
    <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
    </svg>

    <!-- moon icon -->
    <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
    </svg>
</label>

now you can running your dev server and using the that input checkbox (or now it is a sun & moon button) to changing between two themes , for me it will change between theme name 'light' and 'dark'

BUT!! you will notice that while we reload or refresh the page from a dark theme it will be reloaded back to a default theme that we has been set in html tag from previously

Made theme persistent

firstly I will introduce you to a basically way to persist a theme by using cookie and onMount function of svelte if self

let copy a code below and paste it in your current component

<script>
    import { onMount } from 'svelte';

    let isDark = false;
    onMount(() => {
        let decodedCookie = decodeURIComponent(document.cookie);
        let ca = decodedCookie.split(';');
        const cookiesObject = ca.map((cookie) => {
          const [name, value] = cookie.split('=');
          return { name, value };
        });
        const cookieIsDark = cookiesObject.find(cookie=> cookie.name==='isDark');
        isDark = JSON.parse(cookieIsDark ? cookieIsDark.value : "false") ;
    });


    function setModeCookie() {
        const expirationDate = new Date();
        expirationDate.setDate(expirationDate.getDate() + 365);
        document.cookie = `isDark=${isDark}; expires=${expirationDate.toUTCString()}`;
    }
</script>

<label class="swap swap-rotate">
    <!-- this hidden checkbox controls the state -->
    <input
        type="checkbox"
        class="theme-controller"
        value="dark"
    />

    <!-- sun icon -->
    <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
    </svg>

    <!-- moon icon -->
    <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
    </svg>
</label>

In the code while the component is onMount state it will decoding and get a value of cookie name 'isDark' that data type is boolean and will tell us the page currently in dark mode or not and it value will binding with input checked state

for a first time it will be set to false because page didn't have any cookie yet

and after we changing a theme with our theme controller, it will calling setModeCookie function that will set a cookie name 'isDark' with value of our 'isDark' variable (that suppose to be true by now because we clicked a theme controller and change a page's theme to dark)

now if you try to refresh or reload the page, the theme will be back into a theme that we has been using before we refresh or reload the page

BUT AGAIN!! you will notice some flickering effect after we refresh or reload the page while on 'dark' theme that because the page will be rendered from server side as a 'light' theme and then after 'onMount' is complete the page will get a cookies and set it back to our theme controller to made the page to be in 'dark' theme again

Stop theme flickering effect!!!

So far we has been using cookie to set a value that telling us, is currently page is in dark mode or not then in Sveltekit we can accessing that cookie on server side too !!
then what we need to do is we will calling that cookie in server side and passing it value back to our page and the page will rendered on value of that passing from server side

let create new file in src folder and name it +layout.server.js and in that file put below code into it

/** @type {import('./$types').LayoutServerLoad} */
export async function load({ cookies }) {
    const isDark = cookies.get('isDark') ?? "false";
    return { isDark };
}

and put this code below into ModeSwitcher component

<script>
    import { page } from '$app/stores';

    let isDark = JSON.parse($page.data.isDark);

    function setModeCookie() {
        const expirationDate = new Date();
        expirationDate.setDate(expirationDate.getDate() + 365);
        document.cookie = `isDark=${isDark}; expires=${expirationDate.toUTCString()};`;
    }
</script>

<label class="swap swap-rotate">
    <!-- this hidden checkbox controls the state -->
    <input
        type="checkbox"
        class="theme-controller"
        value="dark"
    />

    <!-- sun icon -->
    <svg class="swap-on fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z" />
    </svg>

    <!-- moon icon -->
    <svg class="swap-off fill-current w-10 h-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z" />
    </svg>
</label>

then if you see a code in +layout.server.js we will try to get a value of cookie with name 'isDark' and if it not exist just passing "false" as a string and made our ModeSwitcher component receiving that value by using import { page } from '$app/stores'; this will get a store of page that we will need to subscribe and call it data by $page.data.isDark , last but not less we will set that value back to ModeSwitcher component 's variable name 'isDark' and that variable is got binding on our input checkbox of Theme Controller

that mean while page is rendered, a 'isDark' value will set into a value of our cookie that passing by server side and then it will rendered to correctly theme that suppose to be show in the page with out flickering effect at all

Deploying Sveltekit on IIS !

Nutchapon Makelai — Sat, 15 Jul 2023 05:34:23 +0000

This is will be long article because it a self note for deploying Sveltekit project (as node project) on IIS version 10.
For a while I searching thru the internet and asking in svelte discord (so good community , if you're svelter don't miss to join in) I found out it have little information about how to deploying Sveltekit on IIS , may be I've so many conditions and requirements to made Sveltekit project working on my IIS server.

Conditions and Requirements

running with one port and separate each project by sub-directory.
ex.
projectA ==> https://my.testsites.com:443/projectA
projectB ==> https://my.testsites.com:443/projectB
Need to be Server side rendering (SSR) which is Sveltekit project suppose to be.
Any form actions are not blocked by Cross-site Request Forgery (CSRF) protection of Sveltekit project.

Prerequisites

express.js on sveltekit project
node.js (recommend LTS version) on IIS server globally install
some demo Sveltekit project, Let using Sveltekit demo project
IIS Services -- how to install IIS

after install IIS

How to step by step

run npm i in your sveltekit project folder
installing additional dependencies
- adapter-node for sveltekit npm i -D @sveltejs/adapter-node
- dotenv npm i dotenv
setup .env file in your root folder of your project and put this in your .env file

ORIGIN=http://localhost:PORT_OF_SITES

while PORT_OF_SITES will be your port number of IIS site you want to deploy to let say it is 443 then it will be

ORIGIN=http://localhost:443

this will be using after we have deploy Svletekit project to IIS and prevent CSRF blocked after any form actions

In root folder of your project find svelte.config.js and adding adapter-node and set base path to made it support a sub-directory in Sveltekit, let change all code inside like this

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter(),
        paths: {
            relative: false,
            base: '/NAME_OF_SUB-DIRECTORY'
        }
    }
};

while NAME_OF_SUB-DIRECTORY will specifies where your app is served from and allows the app to live on a non-root path
ex. you want your site address like https://my.sites.com/svelteiis then svelte.config.js code will be like this

import adapter from '@sveltejs/adapter-node';

export default {
    kit: {
        adapter: adapter(),
        paths: {
            relative: false,
            base: '/svelteiis'
        }
    }
};

after we adding adapter-node and adding base path we need to prepend all root-relative links with the base value or they will point to the root of your domain, not your base path (this is how the Sveltekit and browser work)

in src\routes\Header.svelte, src\routes\about\+page.svelte and src\routes\sverdle\+page.svelte we will adding import { base } from '$app/paths'; in <script> tag and adding every <a> tag with {base}
ex. <a href="{base}/">Home</a>, {base}/about">About</a>

next we will build our project as a node project by using npm run build and let adapter-node handle it's job . . . . . after some times you will have a build folder appear in your root project like image below

let change side to config our IIS , firstly open our IIS and on your left pane just opening till you seen Default Web Site just right click on it and click explore like image below

-it will open a new window of file explorer with path C:\inetpub\wwwroot(let note this as a wwwroot folder) after that you can copy a build folder that we has created earlier in our Sveltekit project folder and let changing it name form build to a name of what your sub-directory you want that will match with base path that we config earlier or it cause some issue on navigating to your site!
after this step your wwwroot folder will be like image below

**you can deploy your project on new IIS site too by creating a new site in IIS and set physicals path to your deploy folder and bring your build folder into there and following the step by changing build folder name.

next we need to copy 2 files form your root project folder, that is .env file and package.json file and bring it to your deploying folder in wwwroot and running just npm i --omit=dev in this folder to made node downloading only required dependencies after running npm creating new web.config file and adding this code into your web.config file

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <webSocket enabled="false" />
    <handlers>
      <add name="iisnode" path="server.cjs" verb="*" modules="iisnode" />
    </handlers>
    <iisnode node_env="production" nodeProcessCommandLine="C:\Program Files\nodejs\node.exe" />
    <rewrite> 
        <rules>             
            <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
                <match url="^server.cjs\/debug[\/]?" />
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
            </rule>

            <rule name="StaticContent">
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false" />
                <action type="Rewrite" url="public{PATH_INFO}" />
            </rule>

            <rule name="DynamicContent">
                <conditions logicalGrouping="MatchAll" trackAllCaptures="false">
                    <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                </conditions>
                <action type="Rewrite" url="server.cjs" />
            </rule> 
        </rules>
        <outboundRules>
            <rule name="back">
                <match serverVariable="RESPONSE_Location" pattern="(.*)/server.cjs" />
                <action type="Rewrite" value="{R:1}" />
            </rule>
        </outboundRules>
    </rewrite>  
    <defaultDocument>
        <files>
            <add value="server.cjs" />
        </files>
    </defaultDocument>
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin" />
        </hiddenSegments>
        <requestLimits maxAllowedContentLength="4294967295" />
      </requestFiltering>
    </security>
    <httpErrors existingResponse="PassThrough" />
  </system.webServer>
</configuration>

after this config your Sveltekit deploy folder will be like a image below

last but not least we need to have some JavaScript file that will be running after iisnode calling to our project , that made our project can adjust some environment setting let create a new file name server.cjs or any other name but if you change the name you need to put that name into a web.config file from earlier (try search and replace server.cjs with your new file's name in web.config) after creating a server.cjs file add this code below to your file

require('dotenv').config();
const express = require('express')

import('./handler.js')
    .then((handler) => {
        const app = express();
        // Custom middleware to make routing case-insensitive
        app.use((req, res, next) => {
            const urlSegments = req.url.split('/');
            urlSegments[1] = urlSegments[1].toLowerCase();
            req.url = urlSegments.join('/');
            next();
        });

        // let SvelteKit handle everything else, including serving prerendered pages and static assets
        app.use(handler.handler);

        app.listen(process.env.PORT, () => {
            console.log(
                'app start on port ' + process.env.PORT
            );
        });

    }).catch((err) => console.error(err));

this will made your .env file that you copying from earlier working as aspect and will set your origin of project to prevent CSRF protection from a form actions of the project itself and it will made your site can accessing with case insensitive url at a first sub-directory.
by the way you can disabled case insensitive by comment out below code in server.cjs

app.use((req, res, next) => {
            const urlSegments = req.url.split('/');
            urlSegments[1] = urlSegments[1].toLowerCase();
            req.url = urlSegments.join('/');
            next();
        });

now inside the project folder in wwwroot will look like this

after that you can try going to the site that you have deploy by go to
http://localhost/NAME_OF_SUB-DIRECTORY or http://localhost:YOUR_IIS_PORT/NAME_OF_SUB-DIRECTORY
and finally you has achieved Sveltekit deploying on IIS !

If you has any question or suggestion on my walkthrough feel free to giving me a comment below. ;)

Thanks you
Have a nice day and keep coding