DEV Community: Jennifer Bland

How to Build a Custom Theme in Nuxt UI v4

Jennifer Bland — Tue, 24 Mar 2026 16:26:11 +0000

Every great app has its own visual identity. The default Nuxt UI look is polished and clean. Out of the box, every Nuxt UI app shares the same default look. Whether you're building a SaaS product, a personal blog, or a client project, you'll eventually need to make it yours.

The good news? Theming in Nuxt UI v4 is one of its best features. With just a CSS file and a config file, you can transform the look of your entire application to match any brand.

Nuxt UI's theming system is built around CSS variables and design tokens, with Tailwind CSS and the @theme directive at the center. No forking. No hacks. No overrides. Just clean, token-based theming that scales.

That gives you a few nice benefits:

your theme lives in one obvious place
colors and fonts are easier to reuse
light and dark mode become much easier to manage
you can brand the whole app without rewriting each component one by one

In this guide, we'll build a custom theme from scratch. We will utilize fonts we like, implement our brand's colors, and override component-level defaults. By the end, you'll have a fully branded design system and a clear mental model for extending it further.

What You'll Need

Before diving in, make sure you have:

A Nuxt project with @nuxt/ui v4 installed
Basic familiarity with Tailwind CSS utility classes
Node.js 18 or higher

If you're starting from scratch, scaffold a new project to include Nuxt UI. When you run the following command, you will be prompted to choose a template. Select the "ui - App using Nuxt UI" template.

npx nuxi init nuxt-theme-demo

How Theming Works in Nuxt UI v4

It helps to understand the architecture before touching any files. Nuxt UI v4 theming is built on three layers, each with a distinct responsibility:

Layer 1 — main.css (Design Tokens)
This is where you define your raw design values — fonts, colors, spacing — using Tailwind CSS v4's @theme directive. Think of this as your brand's DNA.

Layer 2 — app.config.ts (Semantic Mapping)
This is where you map your raw tokens to semantic meaning — telling Nuxt UI which color is primary, which is neutral, and so on. This layer is also reactive at runtime, meaning you can swap themes without a redeploy.

Layer 3 — app.config.ts Component Overrides (Component Styling)
Also in app.config.ts, you can override the styles of individual components globally — changing the default button size, making all cards have rounded corners, or making the navigation link text bold.

Let's build each layer.

Step 1: Set Up Your CSS File

NOTE: If you created your project using the "ui" template, this file will already exist. If you are adding Nuxt UI to an existing project, you will need to create this file.

Open (or create) your assets/css/main.css file. This is Nuxt UI's main entry point for global styles and the place where Tailwind v4 configuration lives.

Start with the required imports:

/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

Make sure this file is referenced in your nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  css: ['~/assets/css/main.css'],
  modules: ['@nuxt/ui'],
})

Step 2: Customize Your Fonts

The first thing visitors notice about a brand is often its typography. Nuxt UI v4 integrates with @nuxt/fonts, which means any font you declare in your CSS is automatically loaded and optimized — no manual <link> tags, no Google Fonts boilerplate.

Add your fonts inside a @theme block:

/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

The --font-sans variable controls body text across your entire app. The --font-mono variable handles code blocks and any element using the font-mono utility. Tailwind will instantly expose utilities like font-sans and font-mono for you to use in your templates.

Tip: Choose a sans-serif that matches your brand's personality. Geometric fonts like Inter or DM Sans feel modern and technical. Humanist fonts like Nunito or Lato feel approachable and friendly.

Step 3: Define Your Brand Colors

This is where the fun begins. Nuxt UI uses a semantic color system — you define raw color palettes in CSS, then map them to semantic roles (primary, secondary, etc.) in your config.

3a. Register Your Custom Color Palette

Inside a @theme static block, define your brand color as a full scale from 50 to 950. You need all shades because Nuxt UI components use them for hover states, focus rings, backgrounds, and text.

If you created your project using the "ui" template, this block will already exist as it customizes the color green to match Nuxt's brand color. If you are adding Nuxt UI to an existing project, you will need to create this block.

Here is what the block looks like in the template:

/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

@theme static {
  --font-sans: 'Public Sans', sans-serif;

  --color-green-50: #EFFDF5;
  --color-green-100: #D9FBE8;
  --color-green-200: #B3F5D1;
  --color-green-300: #75EDAE;
  --color-green-400: #00DC82;
  --color-green-500: #00C16A;
  --color-green-600: #00A155;
  --color-green-700: #007F45;
  --color-green-800: #016538;
  --color-green-900: #0A5331;
  --color-green-950: #052E16;
}

If you use set your primary color to green then it uses the Nuxt green color palette.

To customize your brand colors, you can add your own custom color palette. Here's an example using a custom blue-ish "brand" color:

/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
}

@theme static {
  --color-brand-50:  #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;
}

Why @theme static? The static modifier tells Tailwind to resolve these variables at build time, which gives better performance than dynamic resolution. Use @theme static for color palettes that won't change at runtime.

Once defined, Tailwind immediately exposes utilities like bg-brand-500, text-brand-700, and border-brand-200 across your entire project.

Tip: Not sure what color values to use? Tools like Tailwind's color palette or uicolors.app can generate a full 50–950 scale from a single hex value.

3b. Map Colors to Semantic Roles

Now open your app.config.ts and tell Nuxt UI what each semantic role maps to:

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'brand',     // Your main brand color
      secondary: 'purple',  // Accent / secondary actions
      success: 'green',
      info: 'blue',
      warning: 'amber',
      error: 'red',
      neutral: 'zinc',      // Grays, backgrounds, borders
    }
  }
})

That's it. Every Nuxt UI component that accepts a color prop will now use your brand color when color="primary" is set:

<template>
  <!-- These all use your brand color automatically -->
  <UButton color="primary">Save Changes</UButton>
  <UAlert color="warning" title="Heads up!" />
  <UBadge color="success">Active</UBadge>
</template>

You can also use semantic color utilities directly in your templates:

<template>
  <div class="bg-primary text-white">Primary background</div>
  <span class="text-success">All good!</span>
  <p class="text-error">Something went wrong.</p>
</template>

Step 3c: Add Your Brand Colors to Semantic Roles

Most Nuxt UI components accept a color prop. This prop can be set to a semantic color role. The default semantic color roles are:

primary
secondary
success
info
warning
error
neutral

You can add your own custom semantic color roles by adding them to the ui.colors object in your app.config.ts file and your nuxt.config.ts file.

I will add a custom semantic color role called brandPrimary and set it to brand.

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'green',
      neutral: 'slate',
      brandPrimary: 'brand'
    }
  }
})

Next, I will add the `brandPrimary` color to the `ui.colors` array in my `nuxt.config.ts` file.

typescript
// nuxt.config.ts
export default defineNuxtConfig({
ui: {
colors: ['brandPrimary']
}
})

Now I can use the brandPrimary color in my components by setting the color prop to brandPrimary.

<template>
  <UButton color="brandPrimary">Save Changes</UButton>
</template>

You can also use semantic color utilities directly in your templates:

<template>
  <div class="bg-brandPrimary text-white">Primary background</div>
  <span class="text-brandPrimary">All good!</span>
</template>

Step 4: Adjust Border Radius

Nuxt UI's rounded corners are controlled by a single CSS variable — --ui-radius — which cascades through every component. This is one small change with a big visual impact.

Add it to your main.css inside a :root block:

:root {
  --ui-radius: 0.5rem; /* default is 0.375rem (rounded-md) */
}

Want a sharper, more corporate feel? Use 0.25rem. Want a soft, friendly feel? Try 0.75rem or 1rem. Want pill-shaped buttons and fully rounded inputs? Push it to 9999px.

Step 5: Dark Mode

Nuxt UI components are built with dark mode in mind from day one. Nuxt UI automatically applies bg-default and text-default to the <body>, which swap between light and dark values based on the user's preference (or your color mode toggle).

Since Nuxt UI integrates with @nuxtjs/color-mode, dark mode works out of the box. Your semantic colors — primary, neutral, etc. — automatically render the right shade in each mode. There's nothing extra to configure.

If you want to verify dark mode is wired up, check your nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/ui'],
  colorMode: {
    classSuffix: ''  // Nuxt UI's default
  }
})

To let users toggle dark mode, add the built-in UColorModeButton component anywhere in your layout:

<template>
  <header>
    <UColorModeButton />
  </header>
</template>

Step 6: Override Component Defaults Globally

This is where your theme becomes truly opinionated. Using the ui key in app.config.ts, you can change the default styles of any Nuxt UI component — globally, for every instance in your app.

Change the Default Button Style

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'brand',
      neutral: 'zinc',
    },
    button: {
      defaultVariants: {
        color: 'primary',
        variant: 'solid',
        size: 'md',
      },
      slots: {
        base: 'font-semibold tracking-wide',
      }
    }
  }
})

Now every <UButton /> in your app is semibold with slightly wider letter-spacing — unless you explicitly override it at the component level.

Style Cards Consistently

card: {
  slots: {
    root: 'ring ring-accented shadow-sm',
    header: 'font-semibold text-highlighted',
    footer: 'border-t border-default',
  }
}

Set Default Input Sizes

input: {
  defaultVariants: {
    size: 'lg',
    color: 'primary',
  }
}

Tip: To find out what slots are available for any component, check the "Theme" section in the Nuxt UI component docs. Every component lists its available slots, variants, and compoundVariants.

Putting It All Together

Here's what a complete, minimal theme looks like across your two files:

/* assets/css/main.css */
@import "tailwindcss";
@import "@nuxt/ui";

@theme {
  --font-sans: 'Inter', system-ui, sans-serif;
}

@theme static {
  --color-brand-50:  #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6;
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
  --color-brand-950: #172554;
}

:root {
  --ui-radius: 0.5rem;
}

// app.config.ts
export default defineAppConfig({
  ui: {
    colors: {
      primary: 'brand',
      secondary: 'purple',
      success: 'green',
      info: 'blue',
      warning: 'amber',
      error: 'red',
      neutral: 'zinc',
    },
    button: {
      defaultVariants: {
        color: 'primary',
        variant: 'solid',
      },
      slots: {
        base: 'font-semibold',
      }
    },
    card: {
      slots: {
        root: 'shadow-sm',
      }
    }
  }
})

Run npm run dev and open your app. Every Nuxt UI component is now styled with your brand — no CSS overrides, no !important battles.

What's Next?

You've built the foundation of your design system. From here you can:

Add a runtime theme switcher — app.config is reactive, so you can call updateAppConfig() to swap the primary color on the fly without restarting the server. Great for multi-brand apps or user preferences.
Use the ui prop for one-off overrides — When you need a single component to look different from the global default, pass a ui prop directly: <UCard :ui="{ root: 'bg-gradient-to-b from-brand-50 to-white' }">.
Explore compoundVariants — These let you apply classes only when multiple props match at the same time (for example, style a button differently when it's both color="primary" AND variant="outline").

Summary

Theming in Nuxt UI v4 follows a clean, three-layer approach:

main.css — Define raw design tokens (fonts, color scales, border radius) with Tailwind's @theme directive
app.config.ts → ui.colors — Map tokens to semantic roles (primary, neutral, success, etc.)
app.config.ts → component keys — Override default slots, variants, and defaultVariants globally

This architecture keeps your theme portable, maintainable, and easy to reason about — whether you're building your first Nuxt app or maintaining a design system across multiple products.

Nuxt studio

Jennifer Bland — Wed, 11 Mar 2026 11:41:03 +0000

Pass Arguments As An Object in JavaScript

Jennifer Bland — Fri, 13 Jan 2023 15:00:25 +0000

When you learn to program in JavaScript, you learn to name the arguments that you pass into a function. I am going to show you why you should pass your arguments to a function as an object. Once you see why you will never go back to naming every argument you pass into a function. I promise you.

Example of naming arguments

I have a function called createBook. The function takes 6 arguments:

title
subtitle
author
publisher
datePublished
descr

Here is an example of my function and how you would call it:

const createBook = (title, subtitle, author, publisher, datePublished, descr) => {
  // code goes here
}

createBook('Make 7 Real World Apps in Vue 2', '', 'Jennifer Bland', 'Gumroad', '2022', 'Learn how to create 7 real world apps using Vue 2');

If you were to look at this code, you would not have any idea what each of these arguments was much less know the correct order in which you have to enter them.

Passing Arguments As An Object

I can make your life easy by showing you how to pass arguments as an object. Here is what it looks like:

const createBook = ({ title, subtitle, author, publisher, datePublished, descr }) => {
    // code goes here
}

createBook({
    author: 'Jennifer Bland',
    publisher: 'Gumroad',
    title: 'Make 7 Real World Apps in Vue 2',
    descr: 'Learn how to create 7 real world apps using Vue 2',
    datePublished: '2022'
    subtitle: ''
});

Now when you come across this code, it is clear what parameters are being passed to the function. Bonus: you don't have to worry about the order of the arguments since we are using destructuring in the function.

Buy My Book

I did write a book titled 'Make 7 Real World Apps in Vue 2'. If you are interested in reading it, you can get it on Gumroad.

Let's Connect

Thanks for reading my article today. If you like my content, please consider buying me a coffee ☕.

Adding a Leading Zero in 1 Line in JavaScript

Jennifer Bland — Thu, 12 Jan 2023 15:00:28 +0000

At work, I recently ran into a scenario where we were capturing a user's date of birth (DOB). This information is collected in 3 fields day, month, and year. If your DOB is January 7, 1962, people were inputting 1 for the month, 7 for the day, and 1962 for the year. This sounds good but our back-end database required both the month and day to be 2 digits. So I needed to find a way to add a leading zero for both of these fields.

Starting Data

let month = 1;
let day = 7;

My simple solution in one line is:

month = `0${month}`.slice(-2)

Let's walk through this code. This combines 0 with the value the user inputs for their month. Then it takes the right two digits and assigns this to the month.

But what if the user inputs the value 10 for their month? It still works. It will combine 0 with 10 to produce 010 and then it takes the right two digits which is 10.

Let's Connect

Thanks for reading my article today. If you like my content, please consider buying me a coffee ☕.

How to Merge Objects in JavaScript

Jennifer Bland — Wed, 11 Jan 2023 15:00:31 +0000

An object is frequently used to store data. Sometimes you end up with multiple data objects that you need to combine their contents. In this article, I will show you several ways to merge objects in JavaScript.

Format of an Object

An Object is a collection of key-value pairs. Let's take a look at this simple object:

const customer = {
    name: 'Jennifer',
    age: 60
}

Both name and age are the keys of the object. The key name has a value of Jennifer and the key age has a value of 60.

Merging Objects using Object.assign()

The Object.assign() static method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

Here is the syntax:

Object.assign(target, ...sources)

Using Object.assign does not create a new object. Instead, it copies all the source objects into the target object. Let's look at an example.

const target = { name: 'Jennifer', age: 60 };
const source = { city: 'Athens', state: 'GA' };

Object.assign(target, source);

console.log(target); // { name: 'Jennifer', age: 60, city: 'Athens', state: 'GA' }

What If There Are Duplicate Key-Value Pairs?

It is possible that the source and target objects have a key that are the same. In that case, the source object value overwrites the value in the target object.

Let's look at an example:

const target = { name: 'Jennifer', age: 60, 'city': 'Atlanta' };
const source = { city: 'Athens', state: 'GA' };

Object.assign(target, source);

console.log(target); // { name: 'Jennifer', age: 60, city: 'Athens', state: 'GA' }

What If You Have More Than 2 Objects to Merge?

You are not limited to merging just 2 objects with Object.assign. If you have more than 2 then you just list multiple source objects.

Here is an example:

const target = { name: 'Jennifer', age: 60 };
const source1 = { city: 'Athens', state: 'GA' };
const source2 = { country: 'USA' }

Object.assign(target, source1, source2);

console.log(target); // { name: 'Jennifer', age: 60, city: 'Athens', state: 'GA', country: 'USA' }

NOTE: If you have duplicate key-value pairs with multiple objects, the object that is furthest right in the formula will have its value assigned to the key that is duplicated.

Here is an example:

const target = { name: 'Jennifer', age: 60 };
const source1 = { city: 'Athens', state: 'GA' };
const source2 = { name: 'Anne', country: 'USA' }

Object.assign(target, source1, source2);

console.log(target); // { name: 'Anne', age: 60, city: 'Athens', state: 'GA', country: 'USA' }

Merging Objects using the `Spread ... Operator`

The spread operator was introduced in ES6. It can be used to merge two or more objects. Unlike Object.assign(), the spread operator will create a new Object.

Here is an example:

const target = { name: 'Jennifer', age: 60 };
const source = { city: 'Athens', state: 'GA' };

const newObject = { ...target, ...source };

console.log(newObject); // { name: 'Jennifer', age: 60, city: 'Athens', state: 'GA' }

What If You Have More Than 2 Objects to Merge?

If you have more than 2 objects to. merge, just list them all using the spread operator for each object.

Here is an example:

const target = { name: 'Jennifer', age: 60 };
const source1 = { city: 'Athens', state: 'GA' };
const source2 = { country: 'USA' };

const newObject = { ...target, ...source1, ...source2 };

console.log(newObject); // { name: 'Jennifer', age: 60, city: 'Athens', state: 'GA', country: 'USA' }

NOTE: If you have duplicate key-value pairs with multiple objects, the object that is furthest right in the formula will have its value assigned to the key that is duplicated.

Let's Connect

Thanks for reading my article today. If you like my content, please consider buying me a coffee ☕.

Console.trace in JavaScript

Jennifer Bland — Wed, 11 Jan 2023 00:01:36 +0000

In yesterday's article, I showed you two ways to format your output to the console in JavaScript. If you have not read it, check it out here.

Today I wanted to show you another console command: console.trace().

console.trace()

The console.trace() method outputs a stack trace to the Web console.

Here is an example of how to use this:

function foo() {
  function bar() {
    console.trace();
  }
  bar();
}

foo();

In the console, the following trace will be displayed:

bar
foo
<anonymous>

Let's Connect

Thanks for reading my article today. If you like my content, please consider buying me a coffee ☕.

3 Ways To Remove Duplicates in an Array with JavaScript

Jennifer Bland — Tue, 10 Jan 2023 16:19:19 +0000

Sometimes you have an array of data and you want to remove all duplicates from the array. In this article, I will show you three ways in which you can do this.

1) Remove duplicates using forEach and includes

The Array includes() method determines whether an array includes a certain value among its entries, returning true or false as appropriate.

With this method, we will create a new empty array. All unique values from our array will be put into this array. We will loop over our array of data and check if the current item is in our new array. If it isn't then we put it in our new array. If it is in our new array then we do nothing.

let myData = [1, 2, 2, 4, 5, 5, 5, 7, 'Hello','World', true, false];

let uniqueValues = [];
myData.forEach((item) => {
    if (!uniqueValues.includes(item)) {
        uniqueValues.push(item);
    }
});

console.log(uniqueValues); // [1, 2, 4, 5, 7, 'Hello', 'World', true, false]

2) Remove duplicates using filter and indexOf

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

The filter() method creates a shallow copy of a portion of a given array, filtered down to just the elements from the given array that pass the test implemented by the provided function.

With this method, we do not have to initially define an empty array. The filter() method will return an array so we just assign this array to a value.

let myData = [1, 2, 2, 4, 5, 5, 5, 7, 'Hello','World', true, false];

let duplicateValues = myData.filter((item, index) => {
    return myData.indexOf(item) == index;
});

console.log(duplicateValues); // [1, 2, 4, 5, 7, 'Hello', 'World', true, false]

3) Remove duplicates using a Set

The Set object lets you store unique values of any type, whether primitive values or object references.

This method requires us to convert our data array to a set. Duplicates will be automatically removed. Then we convert the set back to an array.

let myData = [1, 2, 2, 4, 5, 5, 5, 7, 'Hello','World', true, false];
let uniqueValues = [...new Set(myData)];

console.log(uniqueValues) // [1, 2, 4, 5, 7, 'Hello', 'World', true, false]

Let's Connect

Thanks for reading my article today. If you like my content, please consider buying me a coffee ☕.

Formatting output to the console

Jennifer Bland — Mon, 09 Jan 2023 07:00:41 +0000

If you have been a programmer for more than a day, then you have used a console.log to display data. You may want to see the value of data while your programming running or you may be trying to troubleshoot a problem. Sometimes the data displayed in the console can be a challenge to read. I will show you some methods to make the display of the data more readable.

The biggest challenge in using a console.log is when you want to display data that is an array or an object. By default, this data does not display very well in the console.

For example, you have this array:

[
    {
        school: 'University of Georgia',
        mascot: 'UGA',
        students: 37606,
        location: 'Athens, GA'
    },
    {
        school: 'University of Georgia Tech',
        mascot: 'Yellow Jackets',
        students: 26839,
        location: 'Atlanta, GA'
    },
    {
        school: 'Georgia Southern University',
        mascot: 'Eagles',
        students: 20517,
        location: 'Statesboro, GA'
    }
]

If you console.log this array, this is what you see in the console:

If you actually want to see the data you have to expand the data and you see this:

This display the entire content of each object on a single line. This is not very helpful if there are a large number of entries in your object.

You can drill down into a single object by expanding it and you see this:

Let me show you some better ways to display your array of objects in the console

Use JSON.stringify

The JSON.stringify() static method converts a JavaScript value to a JSON string.

Here is the syntax:

JSON.stringify(value)
JSON.stringify(value, replacer)
JSON.stringify(value, replacer, space)

We want to use the last syntax option. The 3rd parameter you can pass to JSON.stringify is a value for space. That value is used to insert white space (including indentation, line break characters, etc.) into the output JSON string for readability purposes.

If we use this command:

console.log(JSON.stringify(mydata, null, 4))

This is what we will see in the console:

I don't know about you but for me, this is a thousand times better!

console.table

Another way we can make the output look better is to use console.table(). NOTE: This method only works if you have a limited number of items in your object.

If I enter this command:

console.table(mydata)

This is what we will see in the console:

Let's Connect

Thanks for reading my article today. If you like my content, please consider buying me a coffee ☕.

Grid to List Toggle using CSS Grid

Jennifer Bland — Fri, 06 Jan 2023 14:34:12 +0000

In this article, I will show you how to create a toggle to display items in a grid from a list. This will be using basic JavaScript skills with no external code or libraries. We will be using CSS Grid.

What We Will Be Creating

How to Create Our Starter Files

Let's start by creating three files called index.html and style.css and app.js. In your index.html file add the following starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Grid List Toggle using CSS Grid</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <script src="app.js"></script>
</body>
</html>

In the style.css file add the following starter code:

body{
  padding: 0;
  margin: 0;
  height: 100vh;
  background-color: azure;
}

For now, we will leave the app.js file blank. We will put in the code later.

How To Add Our Toggle Buttons

The first thing we want to do is to create two buttons. These two buttons will have a title Grid and List. When clicked these buttons will change the layout of the cards on the screen.

The entire content of the page will be placed inside a div with a class of container. The two buttons will be placed inside a div with a class of buttons. Each button will have a class of btn. Each button will have a unique id assigned to it. Later on we will use this id to handle when the button is clicked.

Add the following code inside the body tag in your index.html file:

    <div class="container">
        <div class="buttons">
            <button class="btn" id="gridBtn">Grid</button>
            <button class="btn" id="listBtn">List</button>
        </div>
    </div>

How To Style Our Container and Buttons

Everything we display is wrapped inside a div with a class of container. We want this container to have a specified width that is centered on the screen.

Add this code to your style.css file:

.container {
    width: 90vw;
    max-width: 800px;
    margin: 50px auto;
}

Next, we want our two buttons to be centered on the screen. The buttons are wrapped by a div with a class of buttons. This class will use CSS Grid to center the buttons.

We want these two buttons to have a blue background with white text. To make them look like they are lifted off the page we will add a box shadow.

Add the following code to your style.css file:

.btn {
    height: 55px;
    background: #2364d2;
    color: white;
    padding: 10px 20px;
    margin-right: 20px;
    border: none;
    border-radius: 5px;
    font-size: 22px;
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
    box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
}

This is what our buttons look like:

How To Add The Cards

I want to add 6 cards that will be displayed. Each card will have a title and a paragraph of Lorem Ipsum text.

I want all of the cards to be contained within a div. The styling on this div will determine if the cards are displayed in a grid or in a list. I will add both an id and a class to this div.

Each card is wrapped by a div with a class of card. It will have a title and a paragraph of text. Since each card will be the same, once I have created one card, I can copy and paste it to create a total of 6 cards.

Add this code to your index.html file:

        <div id="card-wrapper" class="list">
            <div class="card">
                <h3>Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non felis euismod lectus convallis interdum eget eu eros.</p>
            </div>
        </div>

How to Add Styling To Our Cards

We will not add much styling to the card. We will give each card a border and some padding so that the text is not next to the border. We will also add a margin below each card.

Add the following code to your style.css file:

.card {
    border: 1px solid black;
    padding: 10px;
    background: white;
    margin-bottom: 20px;
}

This is what our card looks like:

In your index.html file copy the code for the single card and paste it so there are a total of 6 cards.

Styling our Grid and List

We will add styling for card-wrapper to make it display using CSS Grid and to have a width of 100% of our container. I will also add a margin on top so there is some spacing between the buttons and the cards. I also want to add a gap between each card.

Add the following code to your style.css file:

#card-wrapper {
    display: grid;
    width: 100%;
    margin-top: 50px;
    gap: 10px 20px;
}

With CSS Grid you can define the number of columns. For our grid layout, we want to have 3 columns. For our list layout, we want to have just 1 column.

Add the following code:

.grid {
    grid-template-columns: 1fr 1fr 1fr;
}

.list {
    grid-template-columns: 1fr;
}

Final Result

Now when you view the code in your browser, you will see the layout change as your click each of the buttons.

Here is what it looks like:

Let's Connect

Thanks for reading my article today. You can get the source code here.

If you like my content, please consider buying me a coffee ☕.

Grid to List Toggle using Flexbox and JavaScript

Jennifer Bland — Fri, 06 Jan 2023 12:56:28 +0000

What we will be creating

Create our starter files

Let's start by creating three files called index.html and style.css and app.js. In your index.html file add the following starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Grid List Toggle</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <script src="app.js"></script>
</body>
</html>

In the style.css file add the following starter code:

body{
  padding: 0;
  margin: 0;
  height: 100vh;
  background-color: azure;
}

For now, we will leave the app.js file blank. We will put in the code later.

Adding our toggle buttons

The first thing we want to do is to create two buttons. These two buttons will have a title Grid and List. When clicked these buttons will change the layout of the cards on the screen.

Add the following code inside the body tag in your index.html file:

    <div class="container">
        <div class="buttons">
            <button class="btn" id="gridBtn">Grid</button>
            <button class="btn" id="listBtn">List</button>
        </div>
    </div>

Styling our Container and Buttons

Everything we display is wrapped inside a div with a class of container. We want this container to have a specified width that is centered on the screen.

Add this code to your style.css file:

.container {
    width: 90vw;
    max-width: 800px;
    margin: 50px auto;
}

Next, we want our two buttons to be centered on the screen. The buttons are wrapped by a div with a class of buttons. This class will use Flexbox to center the buttons.

We want these two buttons to have a blue background with white text. To make them look like they are lifted off the page we will add a box shadow.

Add the following code to your style.css file:

.btn {
    height: 55px;
    background: #2364d2;
    color: white;
    padding: 10px 20px;
    margin-right: 20px;
    border: none;
    border-radius: 5px;
    font-size: 22px;
    font-weight: 500;
    font-family: "Source Sans Pro", sans-serif;
    box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
}

This is what our buttons look like:

Adding the cards

I want to add 6 cards that will be displayed. Each card will have a title and a paragraph of Lorem Ipsum text.

I want all of the cards to be contained within a div. The styling on this div will determine if the cards are displayed in a grid or in a list. I will add both an id and a class to this div.

Add this code to your index.html file:

        <div id="card-wrapper" class="list">
            <div class="card">
                <h3>Title</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non felis euismod lectus convallis interdum eget eu eros.</p>
            </div>
        </div>

Styling our cards

We will not add much styling to the card. We will give each card a border and some padding so that the text is not next to the border. We will also add a margin below each card.

Add the following code to your style.css file:

.card {
    border: 1px solid black;
    padding: 10px;
    background: white;
    margin-bottom: 20px;
}

This is what our card looks like:

In your index.html file copy the code for the single card and paste it so there are a total of 6 cards.

Styling our Grid and List

The style for the list will be easy to create because we are using the default style for a div. We want each card to be on a line by itself.

Add the following code to your style.css file:

.list {
    display: block;
}

To create our grid we will use Flexbox. Add the following code to your style.css file:

.grid {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

Now if you change the class in the card-wrapper div to be grid, you might expect our cards to be a grid. In fact, that does not happen. The reason is that each card is a div and by default, a div will take up all the space on a row. We need to be able to tell each card to take up a specified percentage of the screen.

We have 6 cards. In grid mode, I want to have 2 rows with 3 cards each. You might think you can set each card to have a width of 33%. That would work but each card would be right next to the other.

Instead, I want to set each card to have a width of 30%. With 3 cards that would take up 90% of the width of the container. The extra 10% can be padding between each card.

To do this add this one line to the .card class style in the style.css file:

flex: 0 1 30%;

This is what our grid looks like:

Toggling between Grid and List when clicking a button

Now we will add our JavaScript code. At a high level what we want to do is create a variable that points to each button. We will add a click event listener to the buttons.

When either button is clicked it will call a function. This function will programmatically change the class assigned to the div with an id of card-wrapper. When the Grid button is clicked the class will be grid. Likewise when the List button is clicked the class will be list.

Add the following code to your app.js file:

const gridBtn = document.getElementById('gridBtn');
const listBtn = document.getElementById('listBtn');

Now that we have our variable for each button we need to add an event listener to handle when the button is clicked. For now, I am going to call the two functions clickGrid and clickList.

Add the following code to your app.js file:

gridBtn.addEventListener('click', clickButton);
listBtn.addEventListener('click', clickButton);

Next, we need to create our clickButton function. The function will remove the current class assigned to the card-wrapper div. Then it will add a class that corresponds to which button was clicked.

Since we are calling the same function when either button is clicked, how will we determine which button was actually clicked? The simple answer is that the function will be passed a parameter called event. We can use this to get the id of the button.

The id of the grid button is gridBtn and the id of the list button is listBtn. Those is correspond almost to the name of our class we will provide to the card-wrapper div. We need to get the id and remove the Btn part of the title.

Add the following code to your app.js file:

function clickButton(event) {
    e.preventDefault();
    let newStyle = event.target.id;
    newStyle = newStyle.replace('Btn', '');
}

This gives us part of the functionality we need. The next step is to assign the class to the card-wrapper div.

For simplicity, I do not know what class is currently assigned to this div. For that reason, I am going to remove both classes. If the class is present it will be removed. For the other class that is not present it will do nothing. Then I will add a class that corresponds to which button was clicked using the newStyle variable we have already created.

Add the following code to your clickButton function in the app.js file.

    const element = document.getElementById("card-wrapper");
  element.classList.remove("grid");
    element.classList.remove("list");
    element.classList.add(newStyle);

Final Result

Now when you view the code in your browser, you will see the layout change as your click each of the buttons.

Here is what it looks like:

Let's Connect

Thanks for reading my article today. You can get the source code here.

If you like my content, please consider buying me a coffee ☕.

Learn CSS: Create the Google Logo

Jennifer Bland — Thu, 05 Jan 2023 16:08:34 +0000

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Google logo:

position relative and absolute
pseudo classes ::before and ::after
positioning an element that is absolute
transform: translateY
create triangle

What we will be creating

We will create the Google logo in pure CSS. It will look like this:

Create our starter files

Let's start by creating two files called index.html and style.css. In your index.html file add the following starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Logo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

In the style.css file add the following starter code:

body{
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: azure;
}

Dissecting the Google Logo

The Google logo is a multi-colored letter G. If we look at it closely it is basically a multi-colored circle with part of it removed and replaced with a line. Knowing that then we will use that in creating the Google logo.

Add the following line inside the body tag of your index.html file:

    <div class="google-logo"></div>

Creating our multi-colored circle

The first step in creating the Google logo is to create a multi-colored logo. This first step is to create a circle with a different color for each corner. For this demo, I am going to set the circle to have a height and width of 300px.

Add the following code to your style.css file:

.google-logo {
    position: relative;
    width: 300px;
    height: 300px;
    padding: 0;
    border-top: 100px solid #ea4335;
    border-right: 100px solid #4285f4;
    border-bottom: 100px solid #34a853;
    border-left: 100px solid #fbbc05;
    border-radius: 50%;
    background-color: azure;
}

This is what our logo looks like now:

Position absolute and relative

The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.

If you define an element to have position of absolute, the element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor.

We defined the .google-logo to have a position of relative. The next step in the logo is to create the line part of the letter G. This element will have a position of absolute.

pseudo class ::before

We need to create the line part of the G letter. We will use the pseudo class :before to draw this line.

We will define the line to have a position of absolute. Then we will define its position by using the top and right properties.

We set the top to be 50%. That makes the top of the line to be at 50% of the circle. This puts the line below the center. This is not what we want. To move it to be in the center we will use a CSS trick using the transform property.

Add the following code to your style.css file:

.google-logo::before {
    content: "";
    /* z-index: 100; */
    position: absolute;
    top: 50%;
    right: -95px;
    transform: translateY(-50%);
    width: 245px;
    height: 100px;
    background-color: #4285f4;
}

This is what our logo looks like now:

Creating a triangle

The last step of our logo is to create a triangle above the line. This triangle will be transparent which will hide part of our original multi-colored circle.

Here is what we want to accomplish:

We will use the pseudo class ::after to draw the triangle. To make the triangle hide part of the circle we will give it the same background color as our body which is azure.

In a previous article about creating the YouTube logo, I showed how to create a triangle in CSS. We will be doing exactly the same here.

Add the following code to your style.css file:

.google-logo::after {
    content: "";
    position: absolute;
    top: -100px;
    right: -100px;
    width: 0;
    height: 0;
    border-top: 200px solid transparent;
    border-right: 200px solid azure;
}

Final Logo

If you view your index.html file in a browser. you should see the completed Google Logo:

Let's Connect

Thanks for reading my article today. You can get the source code here.

If you like my content, please consider buying me a coffee ☕.

Learn CSS: Create the Git Logo

Jennifer Bland — Wed, 04 Jan 2023 01:20:23 +0000

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Git logo:

Transform to rotate an image
position relative and absolute
pseudo classes ::before and ::after

What we will be creating

We will create the Git logo in pure CSS. It will look like this:

Create our starter files

Let's start by creating two files called index.html and style.css. In your index.html file add the following starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git Logo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

In the style.css file add the following starter code:

body{
  padding: 0;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: azure;
}

Dissecting our Logo

The Git logo is an orange square that is rotated 45 degrees. Inside the square are two lines.

The first line reaches the edge of the square. It has a circle at the end of the line. It also has another circle in the middle of the line.

The second line runs vertically down the middle of the square. The line has a circle at the end.

Now we need to add our code for our logo and the two lines. Add the following code inside the body tags in your index.html file:

    <div class="git-logo">
        <div class="line1"></div>
        <div class="line2"></div>
    </div>

transform: rotate()

The transform CSS property lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model.

The Git logo is a square that is rotated 45 degrees. We will use the CSS transform property to rotate our logo.

Add the following code to your style.css file:

.git-logo{
    height: 150px;
    width: 150px;
    background-color: #f06033;
    border-radius: 15px;
    position: relative;
    transform: rotate(45deg);
}

This is what our logo likes like now:

Adding our first line

Our first line is the one that attaches to the edge of the square. The square is 150px long. I will make the line have a length of 110px. The color of the line will be white.

This line will be positioned absolutely to make sure it is in the right spot on the logo.

Add the following code to your style.css file:

.line1{
    width: 110px;
    background-color: white;
    height: 10px;
    top: 40px;
    position: absolute;
}

Our logo looks like this now:

pseudo class ::before

In CSS, ::before creates a pseudo-element that is the first child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

We will use this property to create the circle in the middle of the line. We will position this circle as absolute. As it is a circle it will have the same height and width and a broder-radius of 50%.

Add this code to your style.css file:

.line1::before{
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    top: -8px;
    left: 30px;
}

This is what our logo looks like now:

pseudo class ::after

In CSS, ::after creates a pseudo-element that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default.

We will do the same thing to add a ball at the end of our first line.

Add the following code to your style.css file:

.line1::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    top: -8px;
    left: 90px;
}

Adding the second line

Just like the first line, we will add a second line. This line will also be positioned absolutely. We will use the top and left values to set the location. The last thing we need to do is to rotate the line 45 degrees like the square.

Add the following code to your style.css file:

.line2{
    width: 90px;
    background-color: white;
    height: 12px;
    position: absolute;
    top: 70px;
    left: 30px;
    transform: rotate(45deg);
}

Our logo looks like this now:

The last thing we need to do is to use the pseudo class ::before to add a circle to the end of this line.

Add this code to your style.css file:

.line2::before{
    content: "";
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: white;
    border-radius: 50%;
    top: -8px;
    left: 70px;
}

Final Logo

If you view your index.html file in a browser. you should see the completed Git Logo:

Let's Connect

Thanks for reading my article today. You can get the source code here.

If you like my content, please consider buying me a coffee ☕.

DEV Community: Jennifer Bland

How to Build a Custom Theme in Nuxt UI v4

What You'll Need

How Theming Works in Nuxt UI v4

Step 1: Set Up Your CSS File

Step 2: Customize Your Fonts

Step 3: Define Your Brand Colors

3a. Register Your Custom Color Palette

3b. Map Colors to Semantic Roles

Step 3c: Add Your Brand Colors to Semantic Roles

Step 4: Adjust Border Radius

Step 5: Dark Mode

Step 6: Override Component Defaults Globally

Change the Default Button Style

Style Cards Consistently

Set Default Input Sizes

Putting It All Together

What's Next?

Summary

Nuxt studio

Pass Arguments As An Object in JavaScript

Example of naming arguments

Passing Arguments As An Object

Buy My Book

Let's Connect

Adding a Leading Zero in 1 Line in JavaScript

Starting Data

Let's Connect

How to Merge Objects in JavaScript

Format of an Object

Merging Objects using Object.assign()

What If There Are Duplicate Key-Value Pairs?

What If You Have More Than 2 Objects to Merge?

Merging Objects using the Spread ... Operator

What If You Have More Than 2 Objects to Merge?

Let's Connect

Console.trace in JavaScript

console.trace()

Let's Connect

3 Ways To Remove Duplicates in an Array with JavaScript

1) Remove duplicates using forEach and includes

2) Remove duplicates using filter and indexOf

3) Remove duplicates using a Set

Let's Connect

Formatting output to the console

Use JSON.stringify

console.table

Let's Connect

Grid to List Toggle using CSS Grid

What We Will Be Creating

How to Create Our Starter Files

How To Add Our Toggle Buttons

How To Style Our Container and Buttons

How To Add The Cards

How to Add Styling To Our Cards

Styling our Grid and List

Final Result

Let's Connect

Grid to List Toggle using Flexbox and JavaScript

What we will be creating

Create our starter files

Adding our toggle buttons

Styling our Container and Buttons

Adding the cards

Styling our cards

Styling our Grid and List

Toggling between Grid and List when clicking a button

Final Result

Let's Connect

Learn CSS: Create the Google Logo

What we will be creating

Create our starter files

Dissecting the Google Logo

Creating our multi-colored circle

Position absolute and relative

pseudo class ::before

Creating a triangle

Final Logo

Let's Connect

Learn CSS: Create the Git Logo

Merging Objects using the `Spread ... Operator`