国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Home Web Front-end JS Tutorial Using CSS variables to create dynamic themes in Puck

Using CSS variables to create dynamic themes in Puck

Jan 08, 2025 pm 09:45 PM

Puck is the open-source visual editor for React, empowering the next generation of page builders and no-code products. Give us a star on GitHub! ??


When integrating Puck into your page-building product, a common requirement is to allow your users to centrally manage the theme of the page without having to make adjustments to every component.

For example: users need a way to manage font styles globally—even for components already added to the page. Here’s how that could look in action:

Using CSS variables to create dynamic themes in Puck

Since Puck is just a React component, there are lots of ways to solve this problem (as well as managing other, more complex state). For this article, I’ll focus on one of the simplest yet most powerful approaches—CSS properties. Let’s dive in!

Using CSS variables to create dynamic themes in Puck

For this tutorial, I’ll assume you have a basic understanding of Puck and its functionality. If you’re new to Puck, don’t worry—you’re still welcome to follow along! However, I recommend checking the getting started guide to familiarize yourself with the fundamentals.

Project Setup using Vite

I’ll start by setting up a project using Vite's scaffolding script. You’re welcome to follow along or skip this section if you already have a project with Puck.

If you’re using Next.js or Remix you could also use one of the official Puck recipes for setting up your project.

Creating Project

To get started, open your terminal and run the following commands to create a new Vite project:

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Installing Puck

Next, install the Puck package:

npm i @measured/puck --save

Deleting conflicting styles

When you start a new project with Vite, it'll come with some default styles that will clash with Puck's. To fix this, delete src/index.css and src/App.css, then remove their imports from src/main.jsx and src/App.jsx:

// main.jsx
import "./index.css"; // Remove this line
// App.jsx
import "./App.css"; // Remove this line

Rendering the Puck editor

With the basic project structure ready, head over to your src/App.jsx file and replace its contents with the code below. This will set up Puck with a basic config for dragging and dropping Heading and Paragraph components:

Note that, for the sake of simplicity I'm using in-line styling in this example

// App.jsx
import { Puck } from "@measured/puck";
import "@measured/puck/puck.css";

// The configs for each of your draggable components
// Ideally you would pull each of these to their own files

const headingConfig = {
  defaultProps: {
    title: "Title",
  },
  fields: {
    title: {
      type: "text",
    },
  },
  render: ({ title }) => {
    return (
      <div>
        <h1>{title}</h1>
      </div>
    );
  },
};

const paragraphConfig = {
  defaultProps: {
    content: "This is a paragraph...",
  },
  fields: {
    content: {
      type: "textarea",
    },
  },
  render: ({ content }) => {
    return (
      <div>
        <p>{content}</p>
      </div>
    );
  },
};

// The Puck configuration object
const config = {
  components: {
    Heading: headingConfig,
    Paragraph: paragraphConfig,
  },
  root: {
    render: ({ children }) => {
      return (
        <main
         >



<p>Finally, run the application in development mode, navigate to http://localhost:5173, and check that everything is working as expected:<br>
</p>

<pre class="brush:php;toolbar:false">npm run dev

Using CSS variables to create dynamic themes in Puck

Awesome! Now that you have a foundation to build on, let's add theming for your users.

Adding theming

As I mentioned before, CSS custom properties are an excellent choice for adding interactive theming to your editor. Why is this a great approach? Because it’s lightweight, doesn’t require external dependencies, and is (for the most part) handled natively by the browser.

Setup

To add dynamic theming with CSS properties you'll need to define your theme variables as properties at some parent of the component that needs them. This could be Puck's root component or any other parent component in your editor's hierarchy, it really doesn't matter as long as you define them and then read them where you need using the var CSS function.

For this tutorial, I'll focus on using Puck's root component so that users are able to set font size and color for headings and paragraphs in a single place at the top level of the editor:

Using CSS variables to create dynamic themes in Puck

Step 1: Define the Variables

Start by defining an object to centralize all the CSS variables names. This will improve consistency and save you from the rabbit hole of debugging issues caused by mistyped property names in CSS.

Pro tip: If you’re using TypeScript you could use an enum instead of an object to get additional type safety

npm create vite@latest puck-global-themes -- --template react
cd puck-global-themes
npm install

Step 2: Add the Variables to the Parent Component

Next, update the root config to include the props and fields for the theme variables. This will allow users to update the custom properties directly from within the root fields of the editor.

To do this, you’ll need to define the fields for the new root props and their default values:

npm i @measured/puck --save

After that, in the root’s render function, read the custom properties from the props and pass them to the root element as CSS variables.

// The Puck configuration object
const config = {
  components: {
    //... existing components
  },
  root: {
    //... the root fields configuration

    render: ({ children, fontColor, headingFontSize, paragraphFontSize}) => {
      return (
        <main
         >



<p>If you now go to the editor, you should see the new fields at the root level for each one of the props. There is no visual feedback yet, but if you inspect the styles of the editor’s root, you will see the variables being set with every change you make to the fields.</p>

<p><img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/173634396450671.jpg"  class="lazy" alt="Using CSS variables to create dynamic themes in Puck" /></p><h3>
  
  
  Step 3: Access Shared Variables in Child Components
</h3>

<p>Finally, access the theme variables in the components you need by using the var CSS function in your styles.</p>

<p>In our example, you’ll add them in the headingConfig and the paragraphConfig:<br>
</p>

<pre class="brush:php;toolbar:false">const headingConfig = {
  //... The heading fields configuration

  render: ({ title }) => {
    return (
      <div>
        <h1
         >



<p>If you return to the editor, drag and drop some headings and paragraphs, and then modify the fields at the root level, you’ll notice that all the headings and paragraphs update to reflect those changes:</p>

<p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173634396650466.jpg" class="lazy" alt="Using CSS variables to create dynamic themes in Puck"></p>

<p>? And that’s it! Your users are now able to define a theme seamlessly applied across different components in their pages.</p>

<h3>
  
  
  Pros & Cons of using CSS properties
</h3>

<p>? Pros:</p>

  • Simple and intuitive setup
  • Built-in cascading and override functionality in page hierarchy, allowing for easy management of shared styles and the ability to customize individual components
  • Zero external dependencies and lightweight footprint—CSS custom properties are natively supported by browsers
  • Less boilerplate and maintenance complexity than other options

? Cons:

  • Only suitable for simple styling—can't handle complex data or logic
  • Debugging can be difficult when nesting multiple levels of CSS property overrides

Taking it further

Depending on your specific use case, there are plenty of ways to take your editor theming even further:

  • Use predefined themes - In some applications, you may need to provide default theme options—like Dark, Light, or Minimal. For this, you could use a select field with multiple theme objects. These objects can group all the CSS properties as a unit, allowing users to easily swap between different themes for their pages without having to fill in single fields.
  • Integrate styling libraries – For larger editors, it may be better to use a styling library to leverage pre-built styles, streamline your definitions, and reduce boilerplate. Libraries like Tailwind or Emotion can easily integrate with Puck, giving you flexibility and efficiency while maintaining a polished look. In fact, Puck even offers an Emotion plugin that simplifies the integration process for you!
  • Add component-level theme overrides – Sometimes users may need to customize individual components in their pages so that they stand out from the rest of the theme. Since we’re using CSS properties, this can easily be achieved by overriding the parent-level theme variables at the component level. For example, you could add an optional font color field inside your Heading component that, if provided, would redefine the CSS property specifically for that h1 element.

Stay Connected and Keep Building ?

I hope this tutorial has empowered you to leverage CSS variables for dynamic theming in Puck-powered page builders. The open-source developer community is at the heart of Puck's evolution, and I can’t wait to see the innovative apps you create!

We’re dedicated to pushing Puck’s capabilities even further, with a constant stream of new features, including a revolutionary drag-and-drop engine for complex grids and layouts launching imminently, and a suite of new plugins on the horizon.

So, if Puck has inspired you or if you’d like to stay up to date with the latest features, here’s how you can get involved:

  • ? Star us on GitHub to support the project and inspire others to explore its potential.
  • ? Join our Discord community to share your projects, ask questions, and collaborate.
  • ? Follow us on X and Bluesky for the latest updates, sneak peeks, and feature announcements.
  • ? Dive deeper into the official documentation for advanced techniques and insights that can take your no-code workflows to the next level.

The above is the detailed content of Using CSS variables to create dynamic themes in Puck. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undress AI Tool

Undress AI Tool

Undress images for free

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

JavaScript vs. Java: Which Language Should You Learn? JavaScript vs. Java: Which Language Should You Learn? Jun 10, 2025 am 12:05 AM

JavaScriptisidealforwebdevelopment,whileJavasuitslarge-scaleapplicationsandAndroiddevelopment.1)JavaScriptexcelsincreatinginteractivewebexperiencesandfull-stackdevelopmentwithNode.js.2)Javaisrobustforenterprisesoftwareandbackendsystems,offeringstrong

Which Comment Symbols to Use in JavaScript: A Clear Explanation Which Comment Symbols to Use in JavaScript: A Clear Explanation Jun 12, 2025 am 10:27 AM

In JavaScript, choosing a single-line comment (//) or a multi-line comment (//) depends on the purpose and project requirements of the comment: 1. Use single-line comments for quick and inline interpretation; 2. Use multi-line comments for detailed documentation; 3. Maintain the consistency of the comment style; 4. Avoid over-annotation; 5. Ensure that the comments are updated synchronously with the code. Choosing the right annotation style can help improve the readability and maintainability of your code.

The Ultimate Guide to JavaScript Comments: Enhance Code Clarity The Ultimate Guide to JavaScript Comments: Enhance Code Clarity Jun 11, 2025 am 12:04 AM

Yes,JavaScriptcommentsarenecessaryandshouldbeusedeffectively.1)Theyguidedevelopersthroughcodelogicandintent,2)arevitalincomplexprojects,and3)shouldenhanceclaritywithoutclutteringthecode.

Java vs. JavaScript: Clearing Up the Confusion Java vs. JavaScript: Clearing Up the Confusion Jun 20, 2025 am 12:27 AM

Java and JavaScript are different programming languages, each suitable for different application scenarios. Java is used for large enterprise and mobile application development, while JavaScript is mainly used for web page development.

Javascript Comments: short explanation Javascript Comments: short explanation Jun 19, 2025 am 12:40 AM

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

Mastering JavaScript Comments: A Comprehensive Guide Mastering JavaScript Comments: A Comprehensive Guide Jun 14, 2025 am 12:11 AM

CommentsarecrucialinJavaScriptformaintainingclarityandfosteringcollaboration.1)Theyhelpindebugging,onboarding,andunderstandingcodeevolution.2)Usesingle-linecommentsforquickexplanationsandmulti-linecommentsfordetaileddescriptions.3)Bestpracticesinclud

JavaScript Data Types: A Deep Dive JavaScript Data Types: A Deep Dive Jun 13, 2025 am 12:10 AM

JavaScripthasseveralprimitivedatatypes:Number,String,Boolean,Undefined,Null,Symbol,andBigInt,andnon-primitivetypeslikeObjectandArray.Understandingtheseiscrucialforwritingefficient,bug-freecode:1)Numberusesa64-bitformat,leadingtofloating-pointissuesli

JavaScript vs. Java: A Comprehensive Comparison for Developers JavaScript vs. Java: A Comprehensive Comparison for Developers Jun 20, 2025 am 12:21 AM

JavaScriptispreferredforwebdevelopment,whileJavaisbetterforlarge-scalebackendsystemsandAndroidapps.1)JavaScriptexcelsincreatinginteractivewebexperienceswithitsdynamicnatureandDOMmanipulation.2)Javaoffersstrongtypingandobject-orientedfeatures,idealfor

See all articles