> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.stylishcostcalculator.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# Adding Stylish Cost Calculator in a dark background page or section

# ${color}[#314AF3](Introduction)

**Dark backgrounds** are a popular choice for many websites, especially those with dark mode options. The **Stylish Cost Calculator** plugin is designed primarily for light backgrounds, but you can easily adapt it for use on darker pages with a few adjustments.

---

## ${color}[#314AF3](Why Use Dark Backgrounds?)

* Dark backgrounds can be easier on the eyes.
* They provide a sleek, modern look.
* They can help certain elements stand out.

---

## ${color}[#314AF3](Tweaking the Colors)

By default, **Stylish Cost Calculator** works on any background. However, since the default colors are optimized for lighter backgrounds, you'll need to make some adjustments for dark backgrounds. Here’s how:

### Step 1.

* Go to the font settings in the plugin.

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/font-setting_14jhr2t.png)

### Step 2.

* Change the font colors to lighter shades that contrast well with the dark background. Replace any dark colors with ones that are more suitable.

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/font-color_bn4tpz.png)

### Step 3.

* Save your changes and test to make sure everything looks good.

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/dark-background_128iihb.png)

---

## ${color}[#314AF3](Getting Creative with CSS)

For those comfortable with **CSS**, you can further customize the **Stylish Cost Calculator** to perfectly match your page design. This allows for more flexibility and creativity.

![](https://storage.crisp.chat/users/helpdesk/website/c5f0153cc3f4b000/css-settings_e2nsvw.png)

## ${color}[#314AF3](Conclusion)

Using the **Stylish Cost Calculator** on a dark background is a great way to enhance your website’s design. With some simple tweaks and possibly a bit of CSS, you can make sure it looks perfect.

---

## ${color}[#314AF3](Additional Information)

### All Elements & Features
  
Learn more about [All Elements](/en/article/elements-13-12gquna/) 
Learn more about [All Features](/en/article/features-3-xlgunu/)  
 
### Need Support? 
  
Ask a [question or request support](https://stylishcostcalculator.com/support/)  
Request [a feature or give feedback](https://stylishcostcalculator.com/how-can-we-be-better/)

[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508157/original/Txm2CafyMfEybziVGXvw-BnfU2V-9TJUBg.png?1666381303)](https://stylishcostcalculator.com/features/)

[![](https://s3.amazonaws.com/cdn.freshdesk.com/data/helpdesk/attachments/production/48258508158/original/DWBiVRBRBPATUwVN7APXzDACQgYCwYmXVQ.png?1666381303)](https://stylishcostcalculator.com/templates/)