How to playing with media settings in Dusky Dark Mode

Exclude Settings

Enable Exclude Elements
  1. Description: Allows users to specify certain elements that should not be affected by dark mode.
  2. Usage:
    • Enable this setting if you want to exclude specific elements from being modified by dark mode.
    • This is useful for maintaining the original appearance of logos, icons, or any other elements that should remain in their default style.
Exclude Elements
  1. Description: Define the elements that should be excluded from dark mode adjustments.
  2. Usage:
    • Specify the CSS selectors of the elements you want to exclude.
    • Example: .logo, .brand-icon to exclude elements with these classes.

Image Settings

Darken Background Images
  1. Description: Automatically darken background images to match the dark mode aesthetic.
  2. Usage:
    • Enable this setting to reduce the brightness of background images, making them easier on the eyes in dark mode.
    • Useful for ensuring that background images do not appear too bright compared to other elements.
Low Brightness Images
  1. Description: Adjust the brightness of images to ensure they are not too glaring.
  2. Usage:
    • Enable this setting to apply a low brightness filter to images.
    • Helps in maintaining a consistent visual experience across different images.
Grayscale Images
  1. Description: Convert images to grayscale when dark mode is enabled.
  2. Usage:
    • Enable this setting to desaturate images, making them grayscale.
    • This can help in reducing visual noise and focusing more on content.
Invert Images
  1. Description: Invert the colors of images to better match the dark mode.
  2. Usage:
    • Enable this setting to invert image colors.
    • Useful for images that look better or are more readable when inverted in dark mode.
Image Replacement
  1. Description: Allows for replacing certain images with alternatives better suited for dark mode.
  2. Usage:
    • Specify alternative images that should be used in dark mode.
    • This setting can be used to provide higher contrast or specially designed images for dark backgrounds.

How to Configure Media Settings in Dusky Dark Mode

  1. Access the Settings:
    • Navigate to the Dusky Dark Mode settings panel in your application.
  2. Exclude Settings:
    • Enable the Enable Exclude Elements option.
    • Define the elements you want to exclude by adding their CSS selectors to the Exclude Elements field.
  3. Adjust Image Settings:
    • Enable Darken Background Images to automatically darken background images.
    • Enable Low Brightness Images to apply a low-brightness filter to all images.
    • Enable Grayscale Images to convert images to grayscale.
    • Enable Invert Images to invert the colors of images for better dark mode compatibility.
  4. Set Up Image Replacement:
    • Specify alternative images that should be used in dark mode.
    • This can be done by defining image URLs or paths that correspond to the original images.

By configuring these settings, you can ensure that your application maintains a consistent and visually appealing dark mode experience, while also preserving the integrity of important media elements.