How to customize dark mode in AMA theme?
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
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.
