The menu

Restyle the share sheet

Every colour in the share sheet comes from a custom property, so a whole palette is a handful of lines rather than a fight with our selectors. You get the ground, the ink, the rules and the corners; the layout of the panel stays ours.

The code

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

The properties

They live on .ats_overlay, which is the scrim the panel sits in, so one block covers the panel, its head, its field and its rows.

--ats-bg           panel ground
--ats-fg           panel ink
--ats-muted        the count and the placeholder
--ats-line         the rule under the head
--ats-field        the filter field's ground
--ats-field-line   the filter field's border
--ats-hover        a hovered row
--ats-focus        the focus ring's colour
--ats-ring         the focus ring's halo

Light and dark are already handled

These properties have a dark set of values that the reader’s system picks on its own. Override them and you own both cases, so check yours in each. If all you wanted was to pin the sheet to one of the two, the theme option does that without any CSS.

window.ats_config = { theme: 'dark' };

The tiles are inline

A brand colour is written onto the element, so a rule has to be at least as specific and say so. This flattens every tile in the sheet to one ink.

.ats_menu_item .ats_icon {
  background: #111827 !important;
}

Live demo

Demo ↗

An article worth passing on

Press More. The sheet that opens is painted by the CSS below, not by our defaults.

Services (4 selected)

Button size

Shape

Behaviour

snippet.htmlOpen in builder ↗

<style>
.ats_overlay {
  --ats-bg: #0f172a;
  --ats-fg: #f8fafc;
  --ats-muted: #94a3b8;
  --ats-line: #1e293b;
  --ats-hover: #1e293b;
  --ats-field: #0b1220;
  --ats-field-line: #334155;
}
.ats_menu { border-radius: 0; }
</style>

<div class="ats_kit ats_kit_size_32">
  <a class="ats_btn_facebook"></a>
  <a class="ats_btn_x"></a>
  <a class="ats_btn_linkedin"></a>
  <a class="ats_btn_whatsapp"></a>
  <a class="ats_dd"></a>
</div>

<script async src="//static.addtosite.com/widget.js"></script>

Your own colours