Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Theme not getting applied. #679

Closed
HoverBaum opened this issue Jan 21, 2022 · 2 comments · Fixed by #681
Closed

Custom Theme not getting applied. #679

HoverBaum opened this issue Jan 21, 2022 · 2 comments · Fixed by #681
Assignees
Labels
type: bug Something isn't working type: need review

Comments

@HoverBaum
Copy link

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 self-assigned this Jan 22, 2022
@unix unix added type: bug Something isn't working type: need review labels Jan 22, 2022
@unix unix linked a pull request Jan 22, 2022 that will close this issue
9 tasks
@unix unix closed this as completed in #681 Jan 22, 2022
@unix
Copy link
Member

unix commented Jan 22, 2022

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
Copy link
Author

Working fine with version 2.2.4 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: bug Something isn't working type: need review
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants