Web: Comments embed customization

Goal

Enable embedded comments to be added to pages with alternative color schemes.

What needs to be done

Acceptance Criteria

• As a network owner, I want to customize the colors of the comments embed so that it works on a dark background
  • Create a dark mode theme with a transparent background and fonts + other colors that work well against a dark (e.g. black) background
  • Enable toggling of light mode / dark mode via data-attributes on the embed code
  • Enable hiding of the Powered by Minds branding via data-attributes on the embed code

e.g.

<div
  class="minds-comments"
  data-href="https://developers.minds.com/docs/plugins/embedded-comments"
  data-owner-guid="1559194096893956110"
  data-theme="dark"
  data-accent-color="yellow"
  data-minds-branded="false"
></div>
<script async defer crossorigin="anonymous" src="https://www.minds.com/plugins/embedded-comments/js/embed.js"></script>

QA

UX/Design

Dark mode colors:

Font color: Usernames, text input

• #f2f2f2

Font color: Paragraphs

• #b9bbc0;

Border colors

• #53565a

Background color: button:hover

• transparent !important;

Upvote color

• [accent color]

vs.

Mobile

• Is Mobile Required?

Personas

Experiments

Definition of Ready Checklist

• Definition Of Done (DoD)
• Acceptance criteria
• Weighted
• QA
• UX/Design
• Personas
• Experiments