Disqus Appearance Tweaks

Light vs. dark color scheme

A light or dark color scheme is automatically selected based on your site's stylesheets.

How is the color scheme determined?

• The light scheme is loaded when the text color Disqus inherits from your site has >= 50% gray contrast: between color: #000000; and color: #787878;
• The dark scheme is loaded in all other instances.

Overriding the color scheme

The color scheme can be overridden in two ways:

In the Disqus admin

1. At the Disqus admin > Settings > General page, locate the Color Scheme option.
2. Choose the appropriate color scheme, or allow Disqus to choose for you by selecting "Auto".

In your site's stylesheets directly

1. Locate <div id="disqus_thread">
   
   
2. Insert a <p> tag into disqus_thread. This requires editing HTML in the web inspector.
3. Inspect the <p> tag > expand the Computed Style dropdown > observe the 'color' parameter. This is the color that is being inherited.
   
   
4. Expand the dropdown to the left of the 'color' parameter to expose which specific stylesheet rule is setting this color. Change the color being passed via this rule based on the "How is the color scheme determined?" section above.

Link color

Disqus inherits your site's link colors. In order for this to work you'll need to make sure the relevant CSS rules are inheritable by Disqus.

If Disqus isn't inheriting your site's link color, this may require changing link colors in your publishing platform's (e.g., Tumblr or Squarespace) settings or editing your site's CSS stylesheets directly.

To figure out which link color Disqus is inheriting:

1. Locate <div id="disqus_thread">
   
   
2. Insert an <a> tag into disqus_thread. This requires editing HTML in the web inspector.
3. Inspect the anchor tag > expand the Computed Style dropdown > observe the 'color' parameter. This is the color that is being inherited.
   
   

Width, margin and padding

Disqus is set to fill 100% of the width of its parent HTML element and has no margin or padding set on its <div>. This means Disqus often looks best when its parent container gives it some margin or padding. Additionally, the width of the disqus_thread ID can be adjusted using CSS.