Added dark and lightmode for card-item (#39)

Added dark and lightmode for card-item

Reviewed-by: Tino Schr

doc/source/examples/card_item.rst

@@ -6,7 +6,7 @@ Card Item Test
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - OTC Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
@@ -15,35 +15,35 @@ Card Item Test
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud
 
    .. card_item::
       :title: Ansible
-      :image: ../_static/images/ansible.svg
+      :image: ansible.svg
       :description: Ansible is a suite of software tools that enables infrastructure as code. It is open-source and the suite includes software provisioning, configuration management, and application deployment functionality.
 
       - Ansible Collection|https://docs.otc-service.com/ansible-collection-cloud

otc_sphinx_directives/card_item.py

@@ -83,11 +83,10 @@ def card_item_html(self, node):
     data = f'''
     <div class="card-item">
         <div>
-            <img
-                class="card-item-img"
-                src="{node['image']}"
-                alt="{node['title']}"
-            </img>
+            <picture>
+                <source alt="{node['title']}" srcSet="/_static/images/dark/{node['image']}" media="(prefers-color-scheme: dark)" />
+                <img class="card-item-img" alt="{node['title']}" src="/_static/images/light/{node['image']}">
+            </picture>
             <div class="card-item-content">
                 <h4 style="margin: 0px 0 1rem 0; font: var(--telekom-text-style-heading-4);">{node['title']}</h4>
                 <div style="padding-bottom: 1rem;">

otc_sphinx_directives/directive_wrapper.py

@@ -63,7 +63,6 @@ def run(self):
         node['id'] = self.options.get('id', '')
         node['wrapper_type'] = self.options.get('wrapper_type', 'div')
         node['style'] = self.options.get('style', '')
-        print(self.options)
         self.state.nested_parse(self.content, self.content_offset, node)
         return [node]