Skillsをダークテーマ対応させる

piny940 · Jul 1, 2023 · 7d48588 · 7d48588
1 parent c001939
commit 7d48588
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/src/components/Common/PieItem.tsx b/src/components/Common/PieItem.tsx
@@ -37,20 +37,22 @@ export type PieItemProps = {
   percent: number
   children: ReactNode
   className?: string
+  innerClassName?: string
 }
 
 export const PieItem: React.FC<PieItemProps> = ({
   percent,
   children,
   className,
+  innerClassName,
 }) => {
   const start = [0, 85, 255]
   const end = [0, 255, 238]
   const color = end.map((v, i) => start[i] + ((v - start[i]) * percent) / 100)
 
   return (
     <PieDiv start={start} end={color} percent={percent} className={className}>
-      <CircleDiv>{children}</CircleDiv>
+      <CircleDiv className={innerClassName}>{children}</CircleDiv>
     </PieDiv>
   )
 }
diff --git a/src/components/Portfolio/SkillItem.tsx b/src/components/Portfolio/SkillItem.tsx
@@ -10,7 +10,11 @@ export type SkillItemProps = {
 export const SkillItem: React.FC<SkillItemProps> = ({ skill, className }) => {
   return (
     <div className={className}>
-      <PieItem className="mx-auto" percent={skill.percent}>
+      <PieItem
+        innerClassName="bg-body"
+        className="mx-auto"
+        percent={skill.percent}
+      >
         <div className="d-flex flex-column mb-2">
           {skill.logoSrc && (
             <div className="icon text-center">

diff --git a/src/data/skills.ts b/src/data/skills.ts
@@ -28,7 +28,7 @@ export const skillsData: SkillType[] = [
   },
   {
     name: 'django',
-    percent: 30,
+    percent: 10,
     logoSrc: '/images/skills/django.svg',
   },
 ]