{% set size = size|default('h-6 w-6') %}
{% set color = color|default('text-gray-800 dark:text-gray-100') %}
<label 
    class="swap {{ class|default('swap-rotate') }} {{ border }} {{ color }}">
    <input 
        id="{{ component_id|default('dark-mode') }}"
        mode="{{ mode|default('light') }}"
        {{ (mode == 'dark') ? 'checked' : '' }}
        type="checkbox" />
    {{  component('icons~sun',{ 
            color: color, 
            size: size, 
            class: 'swap-on' 
        },'svg') 
    }}
    {{  component('icons~moon',{ 
            color: color, 
            size: size, 
            class: 'swap-off' 
        },'svg') 
    }}
</label>