Light background inherits dark color when website theme is selected light?

[abuturabofficial]

When Browser theme is set to dark and I toggle my website theme to light, the callout block doesn't show light. Is this suppose to happen?

Similarly when light theme is set browser wide, and website dark theme toggle is turned on, it looks like this:

I'm using Hugo stack theme. Is there any fix for this? Or this is the limitation of static sites?

[abuturabofficial]

I have jammed together a janky solution for the time being, using ChatGPT. It also lacks the ability to modify the background color, it doesn't properly set a variable for it.....

Jank Code Warning

// Base colors for admonition types
$admonition-colors: (
  abstract:   #209fb5,
  caution:    #e64553,
  code:       #7287fd,
  conclusion: #dd7878,
  danger:     #fe640b,
  error:      #d20f39,
  example:    #dc8a78,
  experiment: #51bb2a,
  goal:       #e64553,
  idea:       #df8e1d,
  important:  #7D4DDA,
  info:       #04a5e5,
  memo:       #e64553,
  note:       #096ae1,
  notify:     #0d48bd,
  question:   #179299,
  quote:      #7287fd,
  success:    #40a02b,
  task:       #8839ef,
  tip:        #179299,
  warning:    #df8e1d
);

// Theme colors
$light-bg: #ffffff;
$dark-bg: #1D1E20;
$light-text: #000000;
$dark-text: #e6e6e6;
$light-code-bg: #f5f5f5;
$dark-code-bg: #313244;
$light-code-text: #24292e;
$dark-code-text: #cdd6f4;
$light-blockquote-border: #e0e0e0;
$dark-blockquote-border: #45475a;

// Base admonition styles
.admonition {
  margin: 1rem 0;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: all 0.3s ease;
}

.admonition-header {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  font-weight: 600;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 1.1rem;
  border-radius: 4px 4px 0 0;
  
  svg {
    width: 1.1em;
    height: 1.1em;
    margin-right: 0.5rem;
    fill: currentColor;
  }
}

.admonition-content {
  padding: 1rem;
  background-color: $light-bg;
  border-radius: 0 0 4px 4px;
  color: $light-text;
  transition: background-color 0.3s ease, color 0.3s ease;

  p {
    margin: 0 0 0.5rem 0;
    &:last-child { margin-bottom: 0; }
  }

  ul, ol {
    margin: 0 0 0.5rem 0;
    padding-left: 1.2rem;
    &:last-child { margin-bottom: 0; }
  }

  blockquote {
    margin: 0 0 0.5rem 0;
    padding-left: 1rem;
    border-left: 3px solid $light-blockquote-border;
    &:last-child { margin-bottom: 0; }
  }

  code {
    background-color: $light-code-bg;
    color: $light-code-text;
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
  }
}

// Dark mode styles
@media (prefers-color-scheme: dark) {
  .admonition-content {
    background-color: $dark-bg;
    color: $dark-text;

    code {
      background-color: $dark-code-bg;
      color: $dark-code-text;
    }

    blockquote {
      border-left-color: $dark-blockquote-border;
      color: $dark-code-text;
    }
  }
}

body.dark {
  .admonition-content {
    background-color: $dark-bg;
    color: $dark-text;

    code {
      background-color: $dark-code-bg;
      color: $dark-code-text;
    }

    blockquote {
      border-left-color: $dark-blockquote-border;
      color: $dark-code-text;
    }
  }
}

// Generate admonition types
@each $type, $color in $admonition-colors {
  .admonition.#{$type} {
    background: transparent;
    border-left: 4px solid $color;
    
    .admonition-header {
      background: rgba($color, 0.1);
      color: $color;
    }
  }
}

I have currently customized it for my use.

Janky solution in action

[abuturabofficial]

I got it fixed properly. I was setting the theme variables wrong, which were not used by my hugo-stack theme.

---
data-scheme="light/dark"
---

Now it follows by set background colors via --admonition-bg variable.

I was trying to make it work with:

---
data-theme="light/dark"
---

How/If you want to take it ahead? As every hugo theme dev will set this value according to their style. OR I hope you come up with something better.

[davekch]

hi @abuturabofficial, I'm new to this and i don't understand where data-scheme="light/dark" is supposed to go, could you please explain? I tried putting it in config.toml but it did not solve the problem for me. I also tried in the frontmatter yaml of my post (with : instead of =) but also to no avail.
I'm also using a different theme than you do (gokarna), could you tell me how you found out what you needed to put where? grepping data-scheme or data-theme in the source of the theme does not yield any results.

[jmooring]

Is there any reason to keep this issue open? It doesn't seem actionable to me.

[abuturabofficial]

Is there any reason to keep this issue open? It doesn't seem actionable to me.

If it's not actionable, you can close the issue. IF someone is facing this behavior, they might hopefully get enough insight from the above comments.

[KKKZOZ]

Is there any reason to keep this issue open? It doesn't seem actionable to me.

If it's not actionable, you can close the issue. IF someone is facing this behavior, they might hopefully get enough insight from the above comments.

@abuturabofficial Hi, thanks for you feedback 🙏

Maybe we can turn this issue into discussions for future reference?

[KKKZOZ]

Is there any reason to keep this issue open? It doesn't seem actionable to me.

Hi @jmooring,

I've noticed an issue with the current theme switching implementation in hugo-admonitions. The problem lies in how we handle dark/light modes:

1. The SCSS uses both @media (prefers-color-scheme: dark) and .dark class selectors for dark mode styling, but they don't always work together harmoniously.

2. When a user's system is in dark mode but the website is set to light theme (or vice versa), the admonition backgrounds don't properly respect the website's theme setting. This is because the media query takes precedence over the class-based theme switching.

Looking at different Hugo themes, I notice they handle theme switching differently:

• Some use data attributes (data-theme/data-scheme)
• Others use body classes
• Some implement custom CSS variables

What are your thoughts on the best approach to make hugo-admonitions more compatible with various theme implementations?

[abuturabofficial]

Maybe we can turn this issue into discussions for future reference?
@KKKZOZ Yeah for sure.

[jmooring]

@KKKZOZ The short answer is, "Make it configurable."

Without putting a lot of thought into it, something like...

[params.modules.hugo_admonitions.mode]
basis = 'system' # The basis for mode selection, either `system` or `attribute`. Default is `system`.

# The parameters below are applicable when `basis` is `attribute`.
[params.modules.hugo_admonitions.mode.attribute]
element = 'html'              # The HTML element that contains the data attribute. Default is `html`.
attributeName = 'data-theme'  # The name of the attribute that contains the mode indicator. Default is `data-theme`.
attributeValueDark= 'dark'    # The indicator for light mode. Default is `dark`.
attributeValueLight = 'light' # The indicator for dark mode. Default is `light`.

Then in _admonitions.scss, something like...

{{ $mode := site.Params.modules.hugo_admonitions.mode }}
{{ if eq $mode.basis "system" }}
  ...
{{ else if eq $mode.basis "attribute" }}
  ...
{{ else }}
  {{ errorf "The hugo-admonitions module encountered a configuration error: mode.basis must be either 'system' or 'attribute'" }}
{{ end }}

[KKKZOZ]

@jmooring Thank you ! I'll try it out as soon as I can 🚀