Add dark theme to Debut use @media (prefers-color-scheme: dark) { }

Solved
Shopify Partner
5 1 0

RT

I was trying to use 

@media (prefers-color-scheme: dark) {

}

 

to provide support of dark theme based on the setting of the user's computer.

I added the code below to the original code, part of the code does work like show/hide .blobs based on if the computer is on dark mode or not. But rest just always shows it as a dark mode.

 

Here are the codes I added:

/*================ Dark Mode ================*/
// Dark Mode
@media (prefers-color-scheme: dark) {
  // Text colors
  $color-text: {{ settings.color_body_bg }};
  $color-text-shadow: rgba(0,0,0,0.4);
  $color-body-text: {{ settings.color_body_bg }};
  $color-sale-text: {{ settings.color_sale_text }};
  $color-small-button-text-border: {{ settings.color_small_button_text_border }};
  $color-text-field: {{ settings.color_text_field_text }};
  $color-text-field-text: {{ settings.color_text_field }};
  $color-navigation-text: {{ settings.color_text }};

  // Button colors
  $color-btn-primary: {{ settings.color_button }};
  $color-btn-primary-text: {{ settings.color_button_text }};

  // Hover and focus states
  $color-text-focus: adaptiveColor({{ settings.color_body_bg }}, {{ settings.color_body_bg | color_brightness }});
  $color-overlay-text-focus: adaptiveColor({{ settings.color_image_overlay_text }}, {{ settings.color_image_overlay_text | color_brightness }});
  $color-btn-primary-focus: adaptiveColor({{ settings.color_button }}, {{ settings.color_button | color_brightness }});
  $color-btn-social-focus: adaptiveColor({{ settings.color_borders }}, {{ settings.color_borders | color_brightness }});
  $color-small-button-text-border-focus: adaptiveColor({{ settings.color_small_button_text_border }}, {{ settings.color_small_button_text_border | color_brightness }});

  // Link buttons and secondary cta
  $color-link: $color-body-text;
  $opacity-link-hover: 0.6;
  $transition-link-hover: 0.1s cubic-bezier(0.44, 0.13, 0.48, 0.87);

  // Backgrounds
  $color-body: {{ settings.color_text }};
  $color-bg: {{ settings.color_text }};
  $color-drawer-background: rgba(0, 0, 0, 0.6);
  $color-bg-alt: {{ settings.color_body_bg | color_modify: 'alpha', 0.04 }};

  // Overlays
  $color-overlay-title-text: {{ settings.color_image_overlay_text }};
  $color-image-overlay: {{ settings.color_image_overlay }};
  $opacity-image-overlay: {{ settings.image_overlay_opacity | divided_by: 100.00 }};
  
  img {
    opacity: .75 !important;
    transition: opacity .5s ease-in-out !important;
  }
  img:hover {
    opacity: 1 !important;
  }

  .blobs {
    display: none !important;
  }
  
  .site-header__logo-image {
    img {
      opacity: 1 !important;
    }
  }
  
  .logo-bar__image {
    -webkit-filter: brightness(0) invert(1) !important;
    filter: brightness(0) invert(1) !important;
    opacity: 0.5 !important;
  }
  
  .btn--secondary {
  color: $color-btn-primary !important;
  }
}
0 Likes
Highlighted
Shopify Expert
2686 67 686

You can't use SCSS variables like this. They are used only server-side, when Shopify engine complies your SCSS asset to a CSS file. Check the warning here.

 

Compiler does not care about your media rules and simply assigns values to variables, which are used later in the file, but when the stylesheet hits the clients browser, they are not variables anymore, but fixed values.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted

Success.

Shopify Partner
5 1 0

Thanks for point that out!

 

I solve it by creating a darsktheme.scss.liquid file with the colour part replaced with the code in my post.

Then I added 

 

  <link href="{{ 'darktheme.scss.css' | asset_url }}" rel="stylesheet" media="(prefers-color-scheme: dark)">

to the theme.liquid file after

 

 

  {{ 'theme.scss.css' | asset_url | stylesheet_tag }}

It works perfectly.

 

However, if you know to import the darktheme.scss.css as the original one would love your help. AKA, how to rewrite my import like the original one.

 

 

0 Likes