<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-PP7S83N" height="0" width="0" style="display:none;visibility:hidden">
Tutorial

Integrate your Refine app theming into Weavy

This tutorial will show how to connect your Ant Design theme in your Refine powered React app to the theming capabilities of Weavy.

Have your favorite code editor ready, and let's get started!

1. Prepare your Refine app

Make sure you have a Refine powered app. For this tutorial we make use of NextJS with Ant Design.

Refine has a ready-to-go Authentication with NextAuth.js example for this.

npm create refine-app@latest -- --example with-nextjs-next-auth

2. Configuring Weavy

We need Weavy to be configured with an environment url and authentication to get the components running.

Make sure you have followed the tutorial for What to do first with Refine to configure authentication.

3. Create a theme context

The Ant Design theme is provided through tokens provided through a context. We need to bridge the tokens into the CSS Variables that is needed by Weavy components.

We'll also bridge the dark theme setting to Weavy using the wy-dark class.

  • Create a WeavyThemeProvider component in /src/contexts/weavy/theme.tsx.
  • Make use of the useToken() in theme imported from antd. This will get you the token collection with all the Ant Design tokens.
  • Make a CSSProperties object with the names of any CSS variables you want to set in Weavy together with the values from the corresponding Ant Design tokens.
  • Use the mode from the ColorModeContext to get current dark mode setting and set the wy-dark class name as a string.
  • Return a <div> wrapper where you provide the CSS properties in the style attribute and wy-dark class name in the className attribute.
  • Set the div to display: contents to not take up any space in the layout when you use the component.

 

/src/contexts/weavy/theme.tsx 
"use client"
import React, { useContext } from "react"
import { theme } from "antd"
import { ColorModeContext } from "@contexts/color-mode"

const { useToken } = theme

export const WeavyThemeProvider = (props: React.PropsWithChildren) => {
  const { token } = useToken()
  const { mode } = useContext(ColorModeContext)

  // Follow the dark theme
  let classNames = mode === "dark" ? "wy-dark" : ""

  // Link Ant design tokens to Weavy CSS variables
  const styles: React.CSSProperties & {
    [key: `--${string}`]: string | number | undefined
  } = {
    display: "contents",

    "--wy-theme-color": token.colorPrimary,
    "--wy-font-size": `${token.fontSize}px`,
    "--wy-border-radius": `${token.borderRadius}px`,
    "--wy-avatar-border-radius": "50%",
    "--wy-padding": `${token.padding / 2}px`,

    "--wy-button-padding-x": `${token.paddingContentHorizontalSM / 2}px`,
    "--wy-button-padding-y": `${token.paddingContentVerticalSM / 2}px`,
    "--wy-input-padding-x": `${token.paddingContentHorizontalSM / 2}px`,
    "--wy-input-padding-y": `${token.paddingContentVerticalSM / 2 }px`,

    "--wy-primary": token.colorPrimary,
    "--wy-on-primary": token.Button?.primaryColor,
  }

  return (
    <div className={classNames} style={styles}>
      {props.children}
    </div>
  )
}

4. Apply the theme

Now that we've created our theme provider, we just need to apply it in the right places.

We need to place it within the refine theme and mode contexts to be able to get the values. This will be the same place as we have the Weavy context provider that we previously created.

We also need to use it within any Ant components that alter the placement of elements in the DOM, such as modals and drawers. Otherwise they will not inherit and receive the CSS properties and classes.

  • Open the /src/app/layout.tsx and wrap the {children} with the <WeavyContextProvider>.
  • Open any component with a <Drawer> or <Modal> that contains a Weavy component. Wrap the contents of the Drawer/Modal in <WeavyContextProvider> as well. For instance in the Messenger component or the Notifications component.
/src/app/layout.tsx 
import type { Metadata } from "next"
import React, { Suspense } from "react"
import { RefineContext } from "./_refine_context"
import { AntdRegistry } from "@ant-design/nextjs-registry"
import { cookies } from "next/headers"
import { WeavyContextProvider } from "@contexts/weavy/context"
import { WeavyThemeProvider } from "@contexts/weavy/theme"

export const metadata: Metadata = {
  title: "Refine",
  description: "Generated by create refine app",
  icons: {
    icon: "/favicon.ico",
  },
}

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode
}>) {
  const cookieStore = cookies()
  const theme = cookieStore.get("theme")

  return (
    <html lang="en">
      <body>
        <Suspense>
          <AntdRegistry>
            <RefineContext defaultMode={theme?.value}>
              <WeavyContextProvider>
                <WeavyThemeProvider>
                  {children}
                </WeavyThemeProvider>
              </WeavyContextProvider>
            </RefineContext>
          </AntdRegistry>
        </Suspense>
      </body>
    </html>
  )
}

5. Done!

The theme is now applied and ready to use. Try toggling the dark theme to see it in action!

On this page

There's more

Check out the other tutorials for creating AI prompting, file sharing, and more.

All tutorials
Ask AI
Support

To access live chat with our developer success team you need a Weavy account.

Sign in or create a Weavy account