Custom Theme not getting applied.

2
closed
HoverBaum
HoverBaum
Posted 3 months ago

Custom Theme not getting applied. #679

Bug report 🐞

Version & Environment

  • Version of browser: Chrome Version 97.0.4692.71 (Offizieller Build) (64-Bit)
  • Version of geist-ui/core: 2.2.3

Expected Behaviour

The behavior I expect is that a custom theme created through the customization interface changes the way components (e.g.: Button) look like.

I am testing this in a default CRA with TypeScript app.

Actual results (or Errors)

The Button component uses the default "lite" theme.

I checked via the "Component" explorer of the React devtools. There is a "GeistProvider" with my custom theme and themeType: "Custom". Further down the tree there is a "ThemeProvider" with the same values, followed by two "ContextProvider". The first of which holds all the themes (light, dark and custom) while the second one only holds the custom theme. Moving further down I find "ScalableGeistButton" which uses a Theme hook that returns the light theme as the Context. Super confused how that happens.

// Inside index.tsx. 
// Copied from the customization page.

const myTheme = Themes.createFromDark({
  type: "Custom",
  palette: {
    accents_1: "#111",
    accents_2: "#333",
    accents_3: "#444",
    accents_4: "#666",
    accents_5: "#a6156d",
    accents_6: "#999",
    accents_7: "#eaeaea",
    accents_8: "#fafafa",
    background: "#000",
    foreground: "#2d80f2",
    selection: "#f81ce5",
    secondary: "#888",
    code: "#79ffe1",
    border: "#333",
    link: "#3291ff",
  },
  expressiveness: {
    dropdownBoxShadow: "0 0 0 1px #333",
    shadowSmall: "0 0 0 1px #333",
    shadowMedium: "0 0 0 1px #333",
    shadowLarge: "0 0 0 1px #333",
    portalOpacity: 0.75,
  },
});

ReactDOM.render(
  <React.StrictMode>
    <GeistProvider themes={[myTheme]} themeType="Custom">
      <CssBaseline />
      <App />
    </GeistProvider>
  </React.StrictMode>,
  document.getElementById("root")
// App.tsx

<Button>Click me </Button>
unix
unix
Created 3 months ago

Thank you for your feedback, this issue has been fixed in version 2.2.4. Now we can install the latest version via yarn add @geist-ui/core.

If that doesn't solve it, please reopen it.

HoverBaum
HoverBaum
Created 3 months ago

Working fine with version 2.2.4 👍