Social media Dashboard with theme switcher

Community feedback

• 

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  Hi 👋

  I've taken a look at your source code and narrowed it down.

  The reason this weird behaviour is happening with the first element not changing colour in dark mode is to do with how you are using CSS selectors in your SASS.

  Right now you have the following selector for selecting each of the cards individually in dark mode:

  .fb-resume-data + .dark-cards-resume,
  .twitter-resume-data + .dark-cards-resume,
  .ig-resume-data + .dark-cards-resume {
    background-color: var(--Dark-Desaturated-Blue-card-bg);
  }
  

  However, the + operator does not select an element which has both the class preceeding the + operator and that following the operator. Rather, this is the adjacent sibling selector. A more general example is:

  a + b selects element b if and only if it is the immediate sibling that directly follows element a. It won't select any other b elements that are not directly preceded by a. In your case, this means all elements except the first are selected, because the first is not preceeded by any sibling.

  Hope this makes sense, these selectors can be quite confusing.

  To select an element that has both classes, you just need to concatenate the classes in the selector:

  .fb-resume-data.dark-cards-resume,
  .twitter-resume-data.dark-cards-resume,
  .ig-resume-data.dark-cards-resume {
    background-color: var(--Dark-Desaturated-Blue-card-bg);
  }
  

  Otherwise great work! Happy coding 😁

  Marked as helpful

  1

  ---

  

  MarieG41•210

  @MarieG41Posted 8 months ago

  @jakegodsall thank you for your help !

  0

  

  P

  Jake Godsall•1,390

  @jakegodsallPosted 8 months ago

  @MarieG41 you’re very welcome!

  0