Changing blockquote & other css formatting based on color theme

[groundedtako]

Checklist

• I have read and accepted the contributing guidelines.

How did you create the site?

Generated from chirpy-starter

Description

blockquote {
padding: 0.5em 10px;
margin: 1em 0;
border-left: 4px solid #3498db; // Blue provides good contrast on both light and dark
font-style: italic;
background-color: #eab20c; // Dark background for dark theme
color: #333; // Default color for light mode

p {
margin: 0;
}
}

@media (prefers-color-scheme: dark) {
blockquote {
background-color: #42350f; // Dark background for dark theme
color: #ccc; // Lighter text color for readability in dark mode
border-left-color: #ecf0f1; // A lighter border color that stands out in dark mode

  p {
      color: inherit; // Ensures text inside p inherits from blockquote
  }

}
}

I have this css for blockquote. I was hoping that it would apply different formatting to dark and light, but that's not happening. Is there a way to apply different css based on current theme_mode?

Operations you have already tried

I tried generating two
@media () blocks, one for light and one for dark

Anything else?

No response

[huanyushi]

Adding the following code to assets/jekyll-theme-chirpy.scss can solve your problem:

html {
    @media (prefers-color-scheme: light) {
      &:not([data-mode]),
      &[data-mode='light'] {
        //your styles
      }
  
      &[data-mode='dark'] {
        //your styles
      }
    }
  
    @media (prefers-color-scheme: dark) {
      &:not([data-mode]),
      &[data-mode='dark'] {
        //your styles
      }
  
      &[data-mode='light'] {
        //your styles
      }
    }
  }

As an example, you can see the source code of jekyll-theme-chirpy.