• spider-themes helpdesk logo Helpdesk
  • EazyDocs
  • SpiderThemes
Spider Themes Helpdesk Spider Themes Helpdesk
  • Home
  • Forums
    • All Forums
    • Docy – WordPress Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
    • Zoomy WordPress Theme
    • AMA WordPress Theme
  • Docs
    • All Docs
    • Docy WordPress Theme
    • EazyDocs Documentation Plugin
    • Docy Jekyll Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
  • Blog
Ask/Login
Spider Themes Helpdesk Spider Themes Helpdesk
Ask/Login
Spider Themes Helpdesk
  • Home
  • Forums
    • All Forums
    • Docy – WordPress Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
    • Zoomy WordPress Theme
    • AMA WordPress Theme
  • Docs
    • All Docs
    • Docy WordPress Theme
    • EazyDocs Documentation Plugin
    • Docy Jekyll Theme
    • Banca WordPress Theme
    • Landpagy WordPress Theme
  • Blog
loading
  1. Home
  2. Docs
  3. Ama WordPress Theme
  4. FAQs
  5. How to customize dark mode in AMA theme?
Updated on October 31, 2022

Docy

Ama WordPress Theme

  • Folder icon closed Folder open iconGetting Started
    • Theme Installation
    • Plugins Installation
    • Demo Import
  • Folder icon closed Folder open iconAma Options
    • Theme Settings
    • Page Options
  • Folder icon closed Folder open iconWidgets / Sidebars
  • Folder icon closed Folder open iconTips / Guides / Troubleshoots
    • Updating The Theme
    • Language Translations
    • Optimize Images
  • Folder icon closed Folder open iconFAQs
    • How to customize dark mode in AMA theme?
    • How to Paginate a Post?
    • How to set the site’s favicon?
    • How to change the author’s avatar?
    • How to update premium plugins?
    • How to apply custom CSS code.

How to customize dark mode in AMA theme?

Estimated reading: 1 minute 161 views Contributors

We have enabled dark mode in AMA theme for better readability and flexibility of users. In this documentation we will walk you through some customization techniques, so that you can customize the dark mode better, even when you are building new pages.

We have created some CSS classes to help customize the website. For example – in the following screenshot, we have used a class ‘bg_gradient’ for outputting a beautiful background, it will be simple light background, as soon as you switch to dark mode.

Here is a list of this type of classes –

  • bg_white – White background in light mode, dark background in dark mode
  • bg_gradient – Gradient background in dark mode, dark background in dark mode
Elementor section background

For developers who are competent in CSS –

We have created some CSS variables, which will provide good colors, both in light and dark modes.

  • –bs-white – White background in light mode, Dark background in dark mode
  • –h_title – Title color
  • –p_color – Paragraph color
  • –black_800 – Black Color in Light mode, Dark color in dark mode
  • –black_900 – Black Color in Light mode, Dark color in dark mode
  • –black_600 – Black Color in Light mode, Dark color in dark mode
  • –black_150 – Black Color in Light mode, Dark color in dark mode
  • –black_50 – Subtle black color, good for BORDER of a card
  • –body_bg – Background color for dark and white
  • –bg_gradient – Beautiful gradient background in front end, dark background in dark mode

You can apply these variables while using css.

Next - FAQs How to Paginate a Post?

Still stuck? How can we help?

How can we help?

A premium WordPress theme with integrated Knowledge Base, providing 24/7 community based support

Was this page helpful? Yes No

Leave a Comment Cancel reply

Share this Doc

How to customize dark mode in AMA theme?

Or copy link

Clipboard Icon
CONTENTS

Powered By EazyDocs

Leaf Illustration

This website is made with Docy