My new company website

👨‍👩‍👧‍👦 Community 🎬 Showcases
1

Hi,

I have been using frontity for a few months now, and everyday i learn more.
In a couple of months, I’m starting my new side business, and I have just published my website.

I love working with Frontity, this is one of 5 projects I have ongoing, and every new project I’m working on, I now always consider Frontity first. The thing I like most about Frontity is the lovely community, and I would not be able to produce the websites I’m doing now without the the community.

Here is the repo for those interrested.

Edit:

Just added darkmode to my site as well, is it possible to save a cookie in the browser that remembers the state.theme.mode ?

7 Likes
2

You should be able to store either in a cookie or in local storage any settings you’d like as you’d do in any other app. In this case, I’d say that you should set the localStorage on the click handler of the dark mode button. The api for localStorage is defined here: Window.localStorage - Web APIs | MDN

Also, maybe you want to consider using the default system settings of the user to set the desired mode (dark or light). This link might be helpful: A Complete Guide to Dark Mode on the Web | CSS-Tricks

4 Likes
3

Hi @kasper,

The site looks really great! :clap: Thank you for the nice words and for your contributions in helping out other members of the community. Can’t wait to see what you build next!

1 Like
4

@jesus.designer did it that way in his theme: personal-blog/index.js at master · goiblas/personal-blog · GitHub

I also like the transition between both modes to avoid the flash effect :slightly_smiling_face: https://goiblas.com/

Congratulations on the website @kasper by the way!! :clap:

1 Like
5

Thank you everyone!

And thank you, @luisherranz for this great tip!

I made this afterCSR

afterCSR: ({ state }) => {
  const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");

  if (window.localStorage.getItem("mode") === "light") {
    state.theme.mode = "light";
  } else if (prefersDarkScheme.matches) {
    state.theme.mode = "dark";
  } else {
    if (window.localStorage.getItem("mode") === "dark") {
      state.theme.mode = "dark";
    }
  }
};

So now it checs if you have anyting in the local storage, or if you have darkmode on the device. And it checks the local storage first, so if a person with a dark mode device have been on the website before, and switched it to light mode, it chooses light mode. The code works, but does it look okay? I’m not very experienced in this kind of stuff.

6

Looks good to me :slightly_smiling_face:

1 Like
7

Hi @kasper ! I love your theme and i am testing it out but I am having trouble seeing my posts. Is there any special configuration for this? Thanks!

8

Hi @james.c.yarbrough !

Is it custom post types or just posts?

9

Thanks for the quick reply Kasper! I’m referring to regular posts.