Embed: improve the visual distinction between example and exercise

[galeyang]

UX study result

When few participants first saw many visually identical editors (some are examples, while others are exercises) in the Future codelab dart-lang/site-www#1659, they were unsure what they were supposed to do (entering code vs. clicking the Run).

Going from code window where you're supposed to write in, to code window where you're not supposed to write in in the same scroll is confusing to me --- the confusion between which ones were supposed to be edited, just like got a glance.

Sometimes, I wasn't sure like whether I should just to code something or I'm supposed to just run it to see it.

For short term, @legalcodes has made two changes to the Future codelab

• use light theme for examples and dark theme for exercises
• add a prominent title (Example or Exercise) above each embed

Improvements to considered

• Change the tab label to Example or Exercise (or add extra heading, like W3School)
  
• Style the placeholder Style the instructional placeholder/comments #1156

Example from Kotlin

Matching the our color theme

• Or maybe in the demo mode, hide the format, reset, and analyzer UI unless users start making changes

Feedback welcome!

---

Status of this issue is also tracked in https://github.com/orgs/flutter/projects/3.

[parlough]

As part of the new, simplified version of the DartPad frontend, the exercise functionality this was related to was removed.

If anyone would like to see similar functionality brought back, please check out #2702 or open a new issue. Thanks so much!