Skip to content

Commit

Permalink
feat: ライトダークボタンのtransitionを有効にした
Browse files Browse the repository at this point in the history
  • Loading branch information
吉野敬太郎 authored and 吉野敬太郎 committed Mar 15, 2024
1 parent ad07f6f commit f7d34bb
Showing 1 changed file with 45 additions and 43 deletions.
88 changes: 45 additions & 43 deletions src/components/organisms/LightDarkButton.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,50 +29,52 @@
}
</script>
<button name="明暗切り替えボタン" aria-label="明暗切り替えボタン" id="light-and-dark-button" class="rounded-full h-10 w-16 bg-white" >
<span class="inline-block dark:hidden pr-6 pt-1">
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-90 -90 700 700" style="width: 32px; height: 32px; opacity: 1; background-color: #f97316; border-radius: 100%;" xml:space="preserve">
<style type="text/css">

.st0{fill:#4B4B4B;}

</style>
<g>
<path class="st0" d="M403.469,395.031c-129.203,0-233.938-104.75-233.938-233.953c0-62.438,24.5-119.125,64.375-161.078
C109.313,17.953,13.563,125.094,13.563,254.656C13.563,396.781,128.781,512,270.906,512c98.688,0,184.359-55.578,227.531-137.125
C469.406,387.781,437.297,395.031,403.469,395.031z" style="fill: rgb(51, 65, 85);"></path>
<path class="st0" d="M349.641,179.328c1.047,1.016,1.516,2.484,1.266,3.922l-8.563,49.938c-0.281,1.672,0.406,3.344,1.766,4.344
c1.359,0.984,3.156,1.109,4.656,0.328l44.859-23.578c1.281-0.688,2.813-0.688,4.109,0l44.859,23.578
c1.484,0.781,3.297,0.656,4.656-0.328c1.359-1,2.031-2.672,1.75-4.344l-8.563-49.938c-0.25-1.438,0.219-2.906,1.266-3.922
L478,143.969c1.203-1.172,1.641-2.938,1.125-4.531c-0.531-1.594-1.906-2.781-3.578-3.016l-50.141-7.297
c-1.438-0.203-2.688-1.109-3.344-2.406l-22.422-45.453c-0.734-1.516-2.281-2.453-3.969-2.453c-1.672,0-3.219,0.938-3.953,2.453
l-22.438,45.453c-0.641,1.297-1.891,2.203-3.328,2.406l-50.141,7.297c-1.672,0.234-3.063,1.422-3.578,3.016
s-0.078,3.359,1.125,4.531L349.641,179.328z" style="fill: rgb(51, 65, 85);"></path>
</g>
</svg>
</span>
<span class="hidden dark:inline-block pl-6 pt-1">
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-90 -90 700 700" style="width: 32px; height: 32px; opacity: 1; background-color: #334155; border-radius: 100%;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4B4B4B;}
</style>
<g>
<ellipse class="st0" cx="256" cy="256" rx="137.275" ry="137.28" style="fill: rgb(249, 115, 22);"></ellipse>
<rect x="241.16" class="st0" width="29.68" height="81.62" style="fill: rgb(249, 115, 22);"></rect>
<rect x="241.16" y="430.38" class="st0" width="29.68" height="81.62" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="181.665,97.56 140.855,26.88 115.15,41.72 155.96,112.41 " style="fill: rgb(249, 115, 22);"></polygon>
<div class="pt-1 pr-6 transform dark:translate-x-6 transition-transform duration-300">
<span class="inline-block dark:hidden">
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-90 -90 700 700" style="width: 32px; height: 32px; opacity: 1; background-color: #f97316; border-radius: 100%;" xml:space="preserve">
<style type="text/css">

<rect x="322.784" y="427.522" transform="matrix(-0.5001 -0.866 0.866 -0.5001 162.3364 978.4368)" class="st0" width="81.618" height="29.677" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="26.88,140.85 97.565,181.66 112.41,155.96 41.72,115.15 " style="fill: rgb(249, 115, 22);"></polygon>
<polygon class="st0" points="399.594,356.04 470.285,396.85 485.125,371.15 414.435,330.34 " style="fill: rgb(249, 115, 22);"></polygon>
<rect y="241.16" class="st0" width="81.625" height="29.68" style="fill: rgb(249, 115, 22);"></rect>
<rect x="430.375" y="241.16" class="st0" width="81.625" height="29.68" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="26.88,371.14 41.72,396.85 112.406,356.04 97.565,330.33 " style="fill: rgb(249, 115, 22);"></polygon>
<polygon class="st0" points="485.125,140.85 470.285,115.15 399.594,155.96 414.435,181.66 " style="fill: rgb(249, 115, 22);"></polygon>
.st0{fill:#4B4B4B;}

<rect x="133.566" y="401.543" transform="matrix(-0.866 -0.5 0.5 -0.866 55.7691 899.6527)" class="st0" width="29.682" height="81.624" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="330.335,97.56 356.04,112.41 396.85,41.72 371.15,26.88 " style="fill: rgb(249, 115, 22);"></polygon>
</g>
</svg>
</span>
</style>
<g>
<path class="st0" d="M403.469,395.031c-129.203,0-233.938-104.75-233.938-233.953c0-62.438,24.5-119.125,64.375-161.078
C109.313,17.953,13.563,125.094,13.563,254.656C13.563,396.781,128.781,512,270.906,512c98.688,0,184.359-55.578,227.531-137.125
C469.406,387.781,437.297,395.031,403.469,395.031z" style="fill: rgb(51, 65, 85);"></path>
<path class="st0" d="M349.641,179.328c1.047,1.016,1.516,2.484,1.266,3.922l-8.563,49.938c-0.281,1.672,0.406,3.344,1.766,4.344
c1.359,0.984,3.156,1.109,4.656,0.328l44.859-23.578c1.281-0.688,2.813-0.688,4.109,0l44.859,23.578
c1.484,0.781,3.297,0.656,4.656-0.328c1.359-1,2.031-2.672,1.75-4.344l-8.563-49.938c-0.25-1.438,0.219-2.906,1.266-3.922
L478,143.969c1.203-1.172,1.641-2.938,1.125-4.531c-0.531-1.594-1.906-2.781-3.578-3.016l-50.141-7.297
c-1.438-0.203-2.688-1.109-3.344-2.406l-22.422-45.453c-0.734-1.516-2.281-2.453-3.969-2.453c-1.672,0-3.219,0.938-3.953,2.453
l-22.438,45.453c-0.641,1.297-1.891,2.203-3.328,2.406l-50.141,7.297c-1.672,0.234-3.063,1.422-3.578,3.016
s-0.078,3.359,1.125,4.531L349.641,179.328z" style="fill: rgb(51, 65, 85);"></path>
</g>
</svg>
</span>
<span class="hidden dark:inline-block">
<svg version="1.1" id="_x32_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-90 -90 700 700" style="width: 32px; height: 32px; opacity: 1; background-color: #334155; border-radius: 100%;" xml:space="preserve">
<style type="text/css">
.st0{fill:#4B4B4B;}
</style>
<g>
<ellipse class="st0" cx="256" cy="256" rx="137.275" ry="137.28" style="fill: rgb(249, 115, 22);"></ellipse>
<rect x="241.16" class="st0" width="29.68" height="81.62" style="fill: rgb(249, 115, 22);"></rect>
<rect x="241.16" y="430.38" class="st0" width="29.68" height="81.62" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="181.665,97.56 140.855,26.88 115.15,41.72 155.96,112.41 " style="fill: rgb(249, 115, 22);"></polygon>

<rect x="322.784" y="427.522" transform="matrix(-0.5001 -0.866 0.866 -0.5001 162.3364 978.4368)" class="st0" width="81.618" height="29.677" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="26.88,140.85 97.565,181.66 112.41,155.96 41.72,115.15 " style="fill: rgb(249, 115, 22);"></polygon>
<polygon class="st0" points="399.594,356.04 470.285,396.85 485.125,371.15 414.435,330.34 " style="fill: rgb(249, 115, 22);"></polygon>
<rect y="241.16" class="st0" width="81.625" height="29.68" style="fill: rgb(249, 115, 22);"></rect>
<rect x="430.375" y="241.16" class="st0" width="81.625" height="29.68" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="26.88,371.14 41.72,396.85 112.406,356.04 97.565,330.33 " style="fill: rgb(249, 115, 22);"></polygon>
<polygon class="st0" points="485.125,140.85 470.285,115.15 399.594,155.96 414.435,181.66 " style="fill: rgb(249, 115, 22);"></polygon>

<rect x="133.566" y="401.543" transform="matrix(-0.866 -0.5 0.5 -0.866 55.7691 899.6527)" class="st0" width="29.682" height="81.624" style="fill: rgb(249, 115, 22);"></rect>
<polygon class="st0" points="330.335,97.56 356.04,112.41 396.85,41.72 371.15,26.88 " style="fill: rgb(249, 115, 22);"></polygon>
</g>
</svg>
</span>
</div>
</button>
</span>

0 comments on commit f7d34bb

Please sign in to comment.