src/pages/popup_src/components/ServiceIcon.svelte


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<script>
  import { onDestroy } from "svelte"
  export let details
  import { config, options } from "../stores"
  let _options
  let _config

  const unsubscribeOptions = options.subscribe(val => (_options = val))
  const unsubscribeConfig = config.subscribe(val => (_config = val))
  onDestroy(() => {
    unsubscribeOptions()
    unsubscribeConfig()
  })

  let theme
  $: if (_options) {
    if (_options.theme == "dark") {
      theme = "dark"
    } else if (_options.theme == "light") {
      theme = "light"
    } else if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
      theme = "dark"
    } else {
      theme = "light"
    }
  }
  $: imageType = _config.services[details.value].imageType
</script>

{#if imageType}
  {#if imageType == "svgMono"}
    {#if theme == "dark"}
      <img src={`/assets/images/${details.value}-icon-light.svg`} alt={details.label} />
    {:else}
      <img src={`/assets/images/${details.value}-icon.svg`} alt={details.label} />
    {/if}
  {:else}
    <img src={`/assets/images/${details.value}-icon.${imageType}`} alt={details.label} />
  {/if}
{/if}