Work Diary:
I’m back to doing some work on this project.
Right now I’m taking what I can observe from the Chakra theme and using that to try and adjust my theme to have defaults that can also be overriden by the frontity.settings.js file.
I added the following to state:
state: {
// State is where the packages store their default settings and other
// relevant state. It is scoped to the "theme" namespace.
theme: {
menu: [],
isBlog: false,
colors: {
primary: {
default: "#2657eb",
heavy: "#1f38c5"
}
}
}
},
The isBlog is simply a mode that tells whether or not the website should be presented as a blog (which means that it presents author name and date information on posts and eventually will have very different styling for the archive page)
I’m having a bit more trouble getting the color stuff to work.
Chakra passes it’s primary colors etc down as props but I think that’s messy looking and I’d prefer to pass stuff from state to a variable that gets set as a CSS variable.
So I currently have this:
const primaryColor= "green";
const globalStyles = css`
:root {
--primary-heavy: #1f38c5;
--primary: ${primaryColor};
--snappy: cubic-bezier(0.075, 0.82, 0.165, 1);
--heavy-snap: cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
}
And that works. But I want to pass the const primaryColor from the state but I’m not sure how to connect the two?
Instead of const primaryColor = "green" I need to use const primaryColor = state.theme.colors.primary.default but that’s not working.
I know this is probably a super basic problem but this is a good example of how I’m still learning how the whole declarative aspect of React works.
When I try setting const primaryColor = state.theme.colors.primary.default I get a “state doesn’t exist” error.
I feel like that must be because the theme javascript object in src/index.js must not be getting passed to it. So do I need to import it or something?
Why does it work though when I use {isBlog && <dateComponent/>} though? Components get passed the state via the arrow function in the src/components/index.js but I’m not sure how to pull the state into that file without using the arrow function so that it can be accessed via the styled-components stuff?
Any suggestions?
EDIT 1:
Okay so I tried setting it like this:
const primaryColor = frontity.state.theme.colors.primary.default;
I’m using npx frontity dev and it works! I see the color change from the test "const primaryColor = “green”; to the proper setting which is blue.
But, if I refresh it breaks. That’s… weird.
EDIT 2:
Yeah… IDK what’s up with this. I can get colors to work by making a file called “theme.js” and putting an object in it that contains the necessary information
import { colors } from "../theme.js";
const primaryColor = colors.primary.default;
But I can’t get it to work by just directly referencing the stuff in the src/index.js file:
import desertJackalope from "../index";
const primaryColor = desertJackalope.state.theme.colors.primary.default;
Which is just a javascript object just like theme.js… so what’s the deal? Is this something specific to Frontity I’m missing?
I’m double checking stuff via google and the error message but not sure what the cause is:
Is there any way we can reproduce it to know if it is a bug?.
