question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Theme Preset not loading all the styles:

See original GitHub issue

Hi I was wondering why all the theme presets I’m trying to load are not loading completely, the thing is that I’m trying to build a simple app using theme ui with the deeppreset and it seems that not all colors are being loaded

To Reproduce theme.js

import { deep } from '@theme-ui/presets'

export default {
  ...deep,
  styles: {
    ...deep.styles,
  },
}

Inject the theme provider in the root of the app.

import React from 'react';
import { ThemeProvider } from 'theme-ui'
import theme from './theme'
import AppRouter from './router/AppRouter';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <AppRouter />
    </ThemeProvider>
  );
}

export default App;

Run the app shows me the correct backgroung but it seems that links don’t style properly.

Screen Shot 2020-01-29 at 22 07 53

Body styles looks like this, I think it should have more style properties Screen Shot 2020-01-29 at 22 08 59

Expected behavior I expect the preset to behave like the theme-ui doc page: Screen Shot 2020-01-29 at 22 11 23

Currently repo is not on github but if you want me to upload it I will do it.

I’m using react-create-app not gatsby

Versions "theme-ui": "^0.3.1" "@theme-ui/presets": "^0.3.0",

Also using @emotion/core and @emotion/styled if that’s relevant.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:10 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
CanRaucommented, Feb 2, 2020

I usually “just” log the result of useThemeUI hook

/** @jsx jsx */
import { jsx, useThemeUI } from 'theme-ui'

export default (props) => {
  const { theme } = useThemeUI()
  console.log(theme)
  return <h1>My website</h1>
}

or you check out the source

1reaction
CanRaucommented, Jan 31, 2020

Uh I see you mean the css custom properties should be at least defined 🤔 yea my body looks like this

body {
    --theme-ui-colors-primary: #fff;
    --theme-ui-colors-text: #fff;
    --theme-ui-colors-background: #000;
    --theme-ui-colors-secondary: #fff;
    --theme-ui-colors-accent: #fff;
    --theme-ui-colors-muted: hsla(0,0%,100%,0.75 ));
    color: #fff;
    background-color: #000;
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Override CSS preset Style and form styles are not displayed
Hi,. I have an issue pretty weird. First I wanted to customize Header and footer and couldn't with default theme preset.
Read more >
Tailwind preset is outputting css, but not showing styles on the ...
Please help me understand why the preset is outputting css to the output file but not showing the styles in the browser.
Read more >
Custom Preset Path to CSS File Problem - BB Theme
I added the custom css file to the child theme folder, but it's not displaying the styles. The preset is showing properly in...
Read more >
What are theme "presets" or "styles" and how do I change them?
All styles are included with your single theme purchase, and you do not need to choose a style ahead of time when purchasing...
Read more >
Divi "Global preset" styles gone after applying child theme and ...
Might be that your child theme has some error, which causing the theme builder to malfunction. You may try to download a blank...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found