ElementTile.svelte automatically changes text color to ensure high contrast with its background. If its background is transparent, it traverses up the DOM tree to find the first element with non-transparent background color. This an, of course, go wrong e.g. if the tile is absolutely positioned outside its parent element. In that case, pass an explicit text_color prop and text_color_threshold={null} to ElementTile to override the automatic color selection.

<script>
  import { ElementTile, element_data } from '$lib'

  const rand_color = () => `hsl(${Math.random() * 360}, ${Math.random() * 50 + 50}%, ${Math.random() * 50 + 50}%)`
</script>

<ol>
  {#each Array(27).fill(0).map(rand_color) as bg_color, idx}
    <ElementTile {bg_color} element={element_data[idx]} style="width: 4em; margin: 0;" />
  {/each}
</ol>

1 H Hydrogen

2 He Helium

3 Li Lithium

4 Be Beryllium

5 B Boron

6 C Carbon

7 N Nitrogen

8 O Oxygen

9 F Fluorine

10 Ne Neon

11 Na Sodium

12 Mg Magnesium

13 Al Aluminium

14 Si Silicon

15 P Phosphorus

16 S Sulfur

17 Cl Chlorine

18 Ar Argon

19 K Potassium

20 Ca Calcium

21 Sc Scandium

22 Ti Titanium

23 V Vanadium

24 Cr Chromium

25 Mn Manganese

26 Fe Iron

27 Co Cobalt

Displaying values instead of element names by passing the value prop.

<script>
  import { ElementTile, element_data } from '$lib'
</script>

<ol>
  {#each ['red', 'green', 'blue', 'yellow', 'cyan', 'magenta', 'black', 'white'] as bg_color, idx}
    <ElementTile {bg_color} element={element_data[idx]} value={Math.random()} style="width: 4em; margin: 0;" active />
  {/each}
</ol>

1 H 0.433

2 He 0.568

3 Li 0.814

4 Be 0.378

5 B 0.195

6 C 0.0527

7 N 0.396

8 O 0.543

Examples