diff --git a/src/constants/code/Animations/cubesCode.ts b/src/constants/code/Animations/cubesCode.ts
index a210173..a2af26f 100644
--- a/src/constants/code/Animations/cubesCode.ts
+++ b/src/constants/code/Animations/cubesCode.ts
@@ -16,7 +16,7 @@ export const cubes: CodeObject = {
     easing="power3.out"
     :duration="{ enter: 0.3, leave: 0.6 }"
     border-style="1px solid #fff"
-    face-color="#060010"
+    face-color="#0b0b0b"
     :shadow="false"
     :auto-animate="true"
     :ripple-on-click="true"
diff --git a/src/constants/code/Animations/glareHoverCode.ts b/src/constants/code/Animations/glareHoverCode.ts
index f13d79d..2671024 100644
--- a/src/constants/code/Animations/glareHoverCode.ts
+++ b/src/constants/code/Animations/glareHoverCode.ts
@@ -7,8 +7,8 @@ export const glareHover: CodeObject = {
   <GlareHover
     width="400px"
     height="300px"
-    background="#060010"
-    border-color="#271E37"
+    background="#0b0b0b"
+    border-color="#222222"
     border-radius="20px"
     glare-color="#ffffff"
     :glare-opacity="0.3"
diff --git a/src/constants/code/Animations/magnetCode.ts b/src/constants/code/Animations/magnetCode.ts
index 6c94358..b47ad0e 100644
--- a/src/constants/code/Animations/magnetCode.ts
+++ b/src/constants/code/Animations/magnetCode.ts
@@ -27,7 +27,7 @@ import Magnet from '@/content/Animations/Magnet/Magnet.vue'
 <style scoped>
 .magnet-element {
   padding: 2rem;
-  background: #060010;
+  background: #0b0b0b;
   border: 1px solid #333;
   border-radius: 12px;
   color: white;
diff --git a/src/content/Components/Carousel/Carousel.vue b/src/content/Components/Carousel/Carousel.vue
index 21d5072..0f15131 100644
--- a/src/content/Components/Carousel/Carousel.vue
+++ b/src/content/Components/Carousel/Carousel.vue
@@ -46,7 +46,7 @@
         :transition="effectiveTransition"
       >
         <div :class="round ? 'p-0 m-0' : 'mb-4 p-5'">
-          <span class="flex h-[28px] w-[28px] items-center justify-center rounded-full bg-[#060010]">
+          <span class="flex h-[28px] w-[28px] items-center justify-center rounded-full bg-[#0b0b0b]">
             <i :class="item.icon" class="text-white text-base"></i>
           </span>
         </div>
diff --git a/src/content/Components/FlowingMenu/FlowingMenu.vue b/src/content/Components/FlowingMenu/FlowingMenu.vue
index 53c3be4..05df948 100644
--- a/src/content/Components/FlowingMenu/FlowingMenu.vue
+++ b/src/content/Components/FlowingMenu/FlowingMenu.vue
@@ -8,7 +8,7 @@
         :ref="el => setItemRef(el as HTMLDivElement, idx)"
       >
         <a
-          class="flex items-center justify-center h-full relative cursor-pointer uppercase no-underline font-semibold text-white text-[4vh] hover:text-[#060010] focus:text-white focus-visible:text-[#060010]"
+          class="flex items-center justify-center h-full relative cursor-pointer uppercase no-underline font-semibold text-white text-[4vh] hover:text-[#0b0b0b] focus:text-white focus-visible:text-[#0b0b0b]"
           :href="item.link"
           @mouseenter="ev => handleMouseEnter(ev, idx)"
           @mouseleave="ev => handleMouseLeave(ev, idx)"
@@ -23,7 +23,7 @@
           <div class="h-full w-[200%] flex" :ref="el => (marqueeInnerRefs[idx] = el as HTMLDivElement)">
             <div class="flex items-center relative h-full w-[200%] will-change-transform animate-marquee">
               <template v-for="i in 4" :key="`${idx}-${i}`">
-                <span class="text-[#060010] uppercase font-normal text-[4vh] leading-[1.2] p-[1vh_1vw_0]">
+                <span class="text-[#0b0b0b] uppercase font-normal text-[4vh] leading-[1.2] p-[1vh_1vw_0]">
                   {{ item.text }}
                 </span>
 
diff --git a/src/content/Components/InfiniteScroll/InfiniteScroll.vue b/src/content/Components/InfiniteScroll/InfiniteScroll.vue
index 25993ef..811ce33 100644
--- a/src/content/Components/InfiniteScroll/InfiniteScroll.vue
+++ b/src/content/Components/InfiniteScroll/InfiniteScroll.vue
@@ -241,7 +241,7 @@ watch(
 .infinite-scroll-wrapper::after {
   content: '';
   position: absolute;
-  background: linear-gradient(var(--dir, to bottom), #060010, transparent);
+  background: linear-gradient(var(--dir, to bottom), #0b0b0b, transparent);
   height: 25%;
   width: 100%;
   z-index: 1;
diff --git a/src/content/TextAnimations/GlitchText/GlitchText.vue b/src/content/TextAnimations/GlitchText/GlitchText.vue
index c2f1bca..d4c89fd 100644
--- a/src/content/TextAnimations/GlitchText/GlitchText.vue
+++ b/src/content/TextAnimations/GlitchText/GlitchText.vue
@@ -53,7 +53,7 @@ const baseClasses = [
   'before:absolute',
   'before:top-0',
   'before:text-white',
-  'before:bg-[#060010]',
+  'before:bg-[#0b0b0b]',
   'before:overflow-hidden',
   'before:[clip-path:inset(0_0_0_0)]',
 
@@ -61,7 +61,7 @@ const baseClasses = [
   'after:absolute',
   'after:top-0',
   'after:text-white',
-  'after:bg-[#060010]',
+  'after:bg-[#0b0b0b]',
   'after:overflow-hidden',
   'after:[clip-path:inset(0_0_0_0)]'
 ];
diff --git a/src/demo/Animations/CubesDemo.vue b/src/demo/Animations/CubesDemo.vue
index 5072814..df0fcfe 100644
--- a/src/demo/Animations/CubesDemo.vue
+++ b/src/demo/Animations/CubesDemo.vue
@@ -121,7 +121,7 @@ const propData = [
   {
     name: 'faceColor',
     type: 'string',
-    default: "'#060010'",
+    default: "'#0b0b0b'",
     description: 'Background color for cube faces'
   },
   {
diff --git a/src/demo/Backgrounds/BallpitDemo.vue b/src/demo/Backgrounds/BallpitDemo.vue
index bf93e23..1b6228b 100644
--- a/src/demo/Backgrounds/BallpitDemo.vue
+++ b/src/demo/Backgrounds/BallpitDemo.vue
@@ -3,7 +3,7 @@
     <template #preview>
       <div class="relative p-0 h-[500px] overflow-hidden demo-container">
         <RefreshButton @click="forceRerender" />
-        <p class="z-0 absolute font-black text-[#271e37] text-[200px]">Balls.</p>
+        <p class="z-0 absolute font-black text-[#222] text-[140px]">Balls.</p>
         <Ballpit
           className="relative"
           :key="key"
diff --git a/src/demo/TextAnimations/GradientTextDemo.vue b/src/demo/TextAnimations/GradientTextDemo.vue
index d5a710f..8b38be9 100644
--- a/src/demo/TextAnimations/GradientTextDemo.vue
+++ b/src/demo/TextAnimations/GradientTextDemo.vue
@@ -46,7 +46,7 @@
             </div>
 
             <div
-              class="w-[300px] h-3 rounded-md border border-[#271E37]"
+              class="w-[300px] h-3 rounded-md border border-[#333333]"
               :style="{
                 background: `linear-gradient(to right, ${gradientPreview.join(', ')})`
               }"
diff --git a/src/demo/TextAnimations/TextTrailDemo.vue b/src/demo/TextAnimations/TextTrailDemo.vue
index 74b0f0a..53e2278 100644
--- a/src/demo/TextAnimations/TextTrailDemo.vue
+++ b/src/demo/TextAnimations/TextTrailDemo.vue
@@ -126,7 +126,7 @@ const propData = [
   {
     name: 'backgroundColor',
     type: 'number | string',
-    default: '0x271e37',
+    default: '0x151515',
     description: 'Background color (hex number or string)'
   },
   {