Although it's not currently possible to apply custom CSS to the Disqus iFrame, the appearance can still be tweaked in a few different ways.
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
- 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
- At the Disqus Admin > Setup > Appearance page, locate the Color Scheme option.
- Choose the appropriate color scheme, or allow Disqus to choose for you by selecting "Auto".
In your site's stylesheets directly
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.
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:
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.
Branding and Style Options
If you have a Pro subscription plan, you can remove Disqus branding including the logo and "Add Disqus to your site" link. You can update this by going to Settings > General in your Disqus Admin.
Elements that can't be edited or removed
- Social login buttons (Facebook, Twitter, Google, Disqus)
- Community tab (your site name at the top of the embed)
- Font size
- Voting, sharing, and favorite star buttons
- "Add Disqus to your site" text
- "# Comments" text above the embed (For home page comment counts, see Adding comment count links to your home page)
- "Join the Discussion" text