I'm trying to change the focus outline color and set custom fonts using a custom Chakra UI theme in my React app, but neither the focus outline color nor the fonts are being applied as expected. Specifically, I want the input element to have a custom outline color when focused/selected, but it’s not happening.

Here's how I define my custom theme (theme.ts):

import { createSystem, defaultConfig } from "@chakra-ui/react";

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      fonts: {
        heading: { value: `'Bebas Neue', sans-serif` },
        body: { value: `'Poppins', sans-serif` },
      },
      shadows: {
        outline: {value: "0 0 0 3px rgba(225, 92, 66, 0.5)"}
      }
    },
  },
});
export default system;

And this is how I wrap my app (Provider.tsx):

import { ChakraProvider } from "@chakra-ui/react";
import { system } from "./theme";

export function Provider({ children }) {
  return <ChakraProvider value={system}>{children}</ChakraProvider>;
}

Finally, I use it in index.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "./components/ui/provider";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
);

My App.tsx:

import { Input, Heading } from '@chakra-ui/react';

function App() {
  return (
        <div>
            <Heading>Hello</Heading>
            <Input></Input>
        </div>
  );
}

export default App;

I'm trying to change the focus outline color and set custom fonts using a custom Chakra UI theme in my React app, but neither the focus outline color nor the fonts are being applied as expected. Specifically, I want the input element to have a custom outline color when focused/selected, but it’s not happening.

Here's how I define my custom theme (theme.ts):

import { createSystem, defaultConfig } from "@chakra-ui/react";

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      fonts: {
        heading: { value: `'Bebas Neue', sans-serif` },
        body: { value: `'Poppins', sans-serif` },
      },
      shadows: {
        outline: {value: "0 0 0 3px rgba(225, 92, 66, 0.5)"}
      }
    },
  },
});
export default system;

And this is how I wrap my app (Provider.tsx):

import { ChakraProvider } from "@chakra-ui/react";
import { system } from "./theme";

export function Provider({ children }) {
  return <ChakraProvider value={system}>{children}</ChakraProvider>;
}

Finally, I use it in index.tsx:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { Provider } from "./components/ui/provider";

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <React.StrictMode>
    <Provider>
      <App />
    </Provider>
  </React.StrictMode>
);

My App.tsx:

import { Input, Heading } from '@chakra-ui/react';

function App() {
  return (
        <div>
            <Heading>Hello</Heading>
            <Input></Input>
        </div>
  );
}

export default App;

• reactjs
• chakra-ui

2 Answers 2

Answer Update

Thanks to the helpful suggestions above, I managed to get the fonts working. However, in my case, I needed to apply the !important directive to the body font style to ensure it overrides any other font-family settings that might be present in my project.

Here’s my full working theme.ts:

import { createSystem, defaultConfig } from "@chakra-ui/react";

export const system = createSystem(defaultConfig, {
theme: {
    tokens: {
    fonts: {
        heading: { value: `'Bebas Neue', sans-serif` },
        body: { value: `'Poppins', sans-serif` },
    },
    shadows: {
        outline: { value: "0 0 0 3px rgba(225, 92, 66, 0.5)" },
    },
    },
    recipes: {
    input: {
        base: {
        _focus: {
            boxShadow: "outline",
        },
        },
    },
    },
},
globalCss: {
    "html, body": {
       fontFamily: "body !important",
    },
    "h1, h2, h3, h4, h5, h6": {
       fontFamily: "heading",
    },
},
});
export default system;

Explanation:

• Poppins is applied to all non-heading text globally by using the fontFamily style with the !important rule. This ensures that Poppins is applied regardless of any other conflicting styles.

• Bebas Neue is applied to the heading elements (h1, h2, h3, h4, h5, h6), as intended.

I hope this helps someone else who’s facing similar issues. Thanks again for the guidance!

There are two things here. First, the way you use shadows mentioned in above code applies only if you use outline with shadow, as shown below:

App.tsx

import { Box } from "@chakra-ui/react";

function App() {
  return (
    <Box shadow="outline" p={5} borderRadius="md">

    </Box>
  );
}

export default App;

But if you want to add outline to your input then you need to use recipes according to the documentation.

import { createSystem, defaultConfig } from "@chakra-ui/react";

export const system = createSystem(defaultConfig, {
  theme: {
    tokens: {
      fonts: {
        heading: { value: `'Bebas Neue', sans-serif` },
        body: { value: `'Poppins', sans-serif` },
      },
      shadows: {
        outline: { value: "0 0 0 3px rgba(225, 92, 66, 0.5)" },
      },
    },
    recipes: {
      input: {
        base: {
          _focus: {
            boxShadow: "outline", // Use the same outline shadow
          },
        },
      },
    },
  },
});
export default system;

App.tsx should look like this:

import { Box, Input } from "@chakra-ui/react";

function App() {
  return (
    <Box shadow="outline" p={5} borderRadius="md">
      <Input placeholder="Enter text..." />
    </Box>
  );
}

export default App;