diff --git a/src/keyboard/style.scss b/src/keyboard/style.scss
index fe87e00..80e1704 100644
--- a/src/keyboard/style.scss
+++ b/src/keyboard/style.scss
@@ -1,14 +1,17 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-keyboard {
-  @include mixin.component();
-  border: 1px solid $color-border;
-  background: #f2f2f2;
+  border: 1px solid theme.$color-border;
   position: relative;
   width: 100%;
   max-width: 1000px;
   margin: 0 auto;
   padding: 3px;
+  @include mixin.component();
+  & {
+    background: #f2f2f2;
+  }
 }
 
 .row {
@@ -34,7 +37,7 @@
     &:active,
     &.pressed {
       color: #fff;
-      background-color: $color-primary;
+      background-color: theme.$color-primary;
     }
   }
   li {
@@ -145,5 +148,5 @@
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
 }
diff --git a/src/markdown-editor/style.scss b/src/markdown-editor/style.scss
index c2ca7e0..f80dbf6 100644
--- a/src/markdown-editor/style.scss
+++ b/src/markdown-editor/style.scss
@@ -1,10 +1,11 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-markdown-editor {
-  @include mixin.component();
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   display: flex;
   flex-direction: column;
+  @include mixin.component();
   &.fullscreen {
     position: fixed;
     width: 100% !important;
@@ -20,7 +21,7 @@
 }
 
 .toolbar {
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
   font-size: 0;
 }
 
@@ -29,15 +30,15 @@
   width: 30px;
   height: 30px;
   text-align: center;
-  color: $color-text;
+  color: theme.$color-text;
   border: none;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   cursor: pointer;
   &:hover {
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
   }
   &.active {
-    color: $color-primary;
+    color: theme.$color-primary;
   }
 }
 
@@ -57,7 +58,7 @@
   min-height: 100px;
   height: 300px;
   font-family: inherit;
-  color: $color-text;
+  color: theme.$color-text;
 }
 
 .preview-container {
@@ -68,26 +69,26 @@
   height: 100%;
   overflow-y: auto;
   padding: 8px;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .toolbar {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   .toolbar,
   .button {
-    background: $color-bg-container-dark;
+    background: theme.$color-bg-container-dark;
   }
   .button {
-    color: $color-text-dark;
+    color: theme.$color-text-dark;
   }
   .textarea {
-    color: $color-text-dark;
+    color: theme.$color-text-dark;
   }
   .textarea,
   .preview-container {
-    background: $color-bg-container-dark;
+    background: theme.$color-bg-container-dark;
   }
 }
diff --git a/src/markdown-viewer/style.scss b/src/markdown-viewer/style.scss
index e1cc450..5540d37 100644
--- a/src/markdown-viewer/style.scss
+++ b/src/markdown-viewer/style.scss
@@ -2,11 +2,6 @@
 
 // https://github.com/sindresorhus/github-markdown-css
 .luna-markdown-viewer {
-  @include mixin.component();
-  background: transparent;
-  &.theme-dark {
-    background: transparent;
-  }
   -ms-text-size-adjust: 100%;
   -webkit-text-size-adjust: 100%;
   margin: 0;
@@ -17,6 +12,13 @@
   line-height: 1.5;
   word-wrap: break-word;
   overflow-y: auto;
+  @include mixin.component();
+  & {
+    background: transparent;
+  }
+  &.theme-dark {
+    background: transparent;
+  }
   details,
   figcaption,
   figure {
diff --git a/src/menu-bar/style.scss b/src/menu-bar/style.scss
index d968809..52d1cc1 100644
--- a/src/menu-bar/style.scss
+++ b/src/menu-bar/style.scss
@@ -1,28 +1,29 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-menu-bar {
+  border-bottom: 1px solid theme.$color-border;
   @include mixin.component();
-  border-bottom: 1px solid $color-border;
 }
 
 .menu-list {
   font-size: 0;
-  @include clear-float();
+  @include mixin.clear-float();
 }
 
 .menu-item {
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   padding: 2px 6px;
   cursor: default;
   display: block;
   float: left;
   user-select: none;
   &:hover {
-    color: $color-text;
-    background: $color-fill-secondary;
+    color: theme.$color-text;
+    background: theme.$color-fill-secondary;
   }
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
 }
diff --git a/src/menu/style.scss b/src/menu/style.scss
index c95518a..cf4d3e1 100644
--- a/src/menu/style.scss
+++ b/src/menu/style.scss
@@ -1,14 +1,15 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-menu {
-  @include mixin.component();
   position: absolute;
   padding: 4px 0;
-  box-shadow: $box-shadow;
-  border: 1px solid $color-border;
+  box-shadow: theme.$box-shadow;
+  border: 1px solid theme.$color-border;
   padding: 4px 0;
   z-index: 4000;
   overflow-y: auto;
+  @include mixin.component();
 }
 
 .glass-pane {
@@ -29,8 +30,8 @@
   width: 100%;
   font-size: 12px;
   &.active {
-    color: $color-white;
-    background: $color-primary;
+    color: theme.$color-white;
+    background: theme.$color-primary;
   }
   .icon-arrow-right {
     margin-left: auto;
@@ -43,13 +44,13 @@
 
 .separator {
   height: 1px;
-  background-color: $color-border;
+  background-color: theme.$color-border;
   margin: 5px 1px;
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .separator {
-    background-color: $color-border-dark;
+    background-color: theme.$color-border-dark;
   }
 }
diff --git a/src/modal/style.scss b/src/modal/style.scss
index 716fe1a..b9a8346 100644
--- a/src/modal/style.scss
+++ b/src/modal/style.scss
@@ -1,16 +1,19 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-modal {
-  @include mixin.component();
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;
   align-items: center;
+  @include mixin.component();
+  & {
+    background: rgba(0, 0, 0, 0.5);
+  }
 }
 
 .icon-close {
@@ -23,7 +26,7 @@
 
 .body {
   position: relative;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   max-height: 100%;
   display: flex;
   flex-direction: column;
@@ -83,14 +86,14 @@
   position: relative;
   user-select: none;
   margin: 0 4px;
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   border-radius: 4px;
   overflow: hidden;
   height: 28px;
   line-height: 28px;
   &:active {
     &::before {
-      background: $color-primary;
+      background: theme.$color-primary;
       content: '';
       opacity: 0.4;
       position: absolute;
@@ -102,13 +105,13 @@
     }
   }
   &.secondary {
-    color: $color-primary;
-    border: 1px solid $color-border;
+    color: theme.$color-primary;
+    border: 1px solid theme.$color-border;
     background: #fff;
   }
   &.primary {
     color: #fff;
-    background: $color-primary;
+    background: theme.$color-primary;
   }
 }
 
@@ -118,14 +121,14 @@
   width: 100%;
   font-size: 16px;
   padding: 6px 12px;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   -webkit-appearance: none;
   -moz-appearance: none;
 }
 
 .theme-dark {
   .body {
-    background: $color-bg-container-dark;
-    border: 1px solid $color-border-dark;
+    background: theme.$color-bg-container-dark;
+    border: 1px solid theme.$color-border-dark;
   }
 }
diff --git a/src/music-player/style.scss b/src/music-player/style.scss
index 8297321..d2ad468 100644
--- a/src/music-player/style.scss
+++ b/src/music-player/style.scss
@@ -1,15 +1,18 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-music-player {
-  @include mixin.component();
   min-width: 375px;
-  border: 1px solid $color-border;
-  font-size: 14px;
+  border: 1px solid theme.$color-border;
   cursor: default;
+  @include mixin.component();
+  & {
+    font-size: 14px;
+  }
 }
 
 .body-left {
-  background: $color-primary;
+  background: theme.$color-primary;
   width: 90px;
   height: 90px;
   float: left;
@@ -25,7 +28,7 @@
   position: absolute;
   width: 30px;
   height: 30px;
-  border: 2px solid $color-white;
+  border: 2px solid theme.$color-white;
   border-radius: 50%;
   bottom: 50%;
   right: 50%;
@@ -35,7 +38,7 @@
   .icon {
     cursor: pointer;
     position: absolute;
-    color: $color-white;
+    color: theme.$color-white;
     top: 5px;
   }
   .icon-play {
@@ -50,13 +53,13 @@
   margin-left: 90px;
   height: 90px;
   padding: 10px 7px 0;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
 }
 
 .info {
   height: 22px;
   margin: 0 0 35px 5px;
-  color: $color-text;
+  color: theme.$color-text;
 }
 
 .controller {
@@ -111,7 +114,7 @@
   width: 8px;
   height: 8px;
   display: inline-block;
-  background: $color-primary;
+  background: theme.$color-primary;
   border-radius: 50%;
 }
 
@@ -130,7 +133,7 @@
 }
 
 .bar-played {
-  background: $color-primary;
+  background: theme.$color-primary;
 }
 
 .volume {
@@ -170,7 +173,7 @@
 }
 
 .volume-bar-fill {
-  background: $color-primary;
+  background: theme.$color-primary;
   position: absolute;
   bottom: 0;
   left: 0;
@@ -178,7 +181,7 @@
 }
 
 .list {
-  @include overflow-auto(y);
+  @include mixin.overflow-auto(y);
   max-height: 150px;
 }
 
@@ -188,19 +191,19 @@
   line-height: 32px;
   padding: 0 15px;
   font-size: 12px;
-  border-top: 1px solid $color-border;
+  border-top: 1px solid theme.$color-border;
   margin: 0;
   transition: background-color 0.3s;
-  color: $color-text;
+  color: theme.$color-text;
   &:first-child {
     border-top: none;
   }
   &.active,
   &:hover {
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
   }
   &.active {
-    color: $color-primary;
+    color: theme.$color-primary;
   }
 }
 
@@ -213,22 +216,22 @@
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .body-right {
-    border-bottom-color: $color-border-dark;
+    border-bottom-color: theme.$color-border-dark;
   }
   .info {
-    color: $color-text-dark;
+    color: theme.$color-text-dark;
   }
   .list-item {
-    border-top-color: $color-border-dark;
-    color: $color-text-dark;
+    border-top-color: theme.$color-border-dark;
+    color: theme.$color-text-dark;
     &.active,
     &:hover {
-      background: $color-fill-secondary-dark;
+      background: theme.$color-fill-secondary-dark;
     }
     &.active {
-      color: $color-primary;
+      color: theme.$color-primary;
     }
   }
 }
diff --git a/src/music-visualizer/style.scss b/src/music-visualizer/style.scss
index 9e875fb..a883783 100644
--- a/src/music-visualizer/style.scss
+++ b/src/music-visualizer/style.scss
@@ -7,7 +7,7 @@
   min-height: 150px;
 }
 
-@include controller('music-visualizer');
+@include mixin.controller('music-visualizer');
 
 .canvas {
   width: 100%;
diff --git a/src/notification/style.scss b/src/notification/style.scss
index 2f6bdb0..6c2bdf5 100644
--- a/src/notification/style.scss
+++ b/src/notification/style.scss
@@ -1,15 +1,17 @@
 @use '../share/mixin' as mixin;
-@import '../share/theme';
+@use '../share/theme' as theme;
 
 .luna-notification {
-  @include mixin.component();
   position: relative;
   padding: 20px;
   pointer-events: none;
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: transparent;
+  @include mixin.component();
+  & {
+    background: transparent;
+  }
   &.full {
     position: fixed;
     top: 0;
@@ -21,11 +23,11 @@
 
 .item {
   display: flex;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   padding: 10px 16px;
-  color: $color-text;
+  color: theme.$color-text;
   align-items: center;
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
 }
 
 .lower {
@@ -45,7 +47,7 @@
   text-align: center;
   line-height: 16px;
   &.info {
-    background: $color-info;
+    background: theme.$color-info;
     .icon {
       position: relative;
       top: -2px;
@@ -53,7 +55,7 @@
     }
   }
   &.success {
-    background: $color-success;
+    background: theme.$color-success;
     .icon {
       position: relative;
       top: -1px;
@@ -63,7 +65,7 @@
   &.warning {
     position: relative;
     top: -2px;
-    color: $color-warning;
+    color: theme.$color-warning;
     .icon {
       font-size: 14px;
     }
@@ -71,7 +73,7 @@
   &.error {
     position: relative;
     top: -1px;
-    color: $color-error;
+    color: theme.$color-error;
     .icon {
       font-size: 14px;
     }
@@ -80,23 +82,23 @@
 
 .theme-dark {
   .item {
-    border-color: $color-border-dark;
-    box-shadow: $box-shadow-dark;
-    color: $color-text-dark;
-    background: $color-bg-container-dark;
+    border-color: theme.$color-border-dark;
+    box-shadow: theme.$box-shadow-dark;
+    color: theme.$color-text-dark;
+    background: theme.$color-bg-container-dark;
   }
   .icon-container {
     &.info {
-      background: $color-info-dark;
+      background: theme.$color-info-dark;
     }
     &.success {
-      background: $color-success-dark;
+      background: theme.$color-success-dark;
     }
     &.warning {
-      color: $color-warning-dark;
+      color: theme.$color-warning-dark;
     }
     &.error {
-      color: $color-error-dark;
+      color: theme.$color-error-dark;
     }
   }
 }
diff --git a/src/object-viewer/style.scss b/src/object-viewer/style.scss
index 946f062..3520093 100644
--- a/src/object-viewer/style.scss
+++ b/src/object-viewer/style.scss
@@ -1,11 +1,12 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-object-viewer {
-  @include overflow-auto(x);
+  @include mixin.overflow-auto(x);
   overflow-y: hidden;
   cursor: default;
-  font-family: $font-family-code;
-  font-size: #{$font-size-s-m}px;
+  font-family: theme.$font-family-code;
+  font-size: #{theme.$font-size-s-m}px;
   line-height: 1.2;
   min-height: 100%;
   color: #333;
diff --git a/src/painter/style.scss b/src/painter/style.scss
index fd9d2ec..d3e581b 100644
--- a/src/painter/style.scss
+++ b/src/painter/style.scss
@@ -1,14 +1,15 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-painter {
-  @include mixin.component();
   position: relative;
   padding-left: 40px;
   padding-top: 30px;
   width: 100%;
   height: 600px;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   outline: none;
+  @include mixin.component();
 }
 
 .toolbar {
@@ -17,7 +18,7 @@
   top: 0;
   width: 100%;
   height: 30px;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
   overflow: hidden;
   .luna-toolbar {
     border-bottom: none;
@@ -30,7 +31,7 @@
   top: 30px;
   width: 40px;
   height: calc(100% - 30px);
-  border-right: 1px solid $color-border;
+  border-right: 1px solid theme.$color-border;
 }
 
 .tool {
@@ -41,12 +42,12 @@
   border: 1px solid transparent;
   padding: 2px 0;
   &:hover {
-    background: $color-fill-tertiary;
-    border-color: $color-border;
+    background: theme.$color-fill-tertiary;
+    border-color: theme.$color-border;
   }
   &.selected {
-    background: $color-fill-secondary;
-    border-color: $color-border;
+    background: theme.$color-fill-secondary;
+    border-color: theme.$color-border;
   }
   .icon {
     position: relative;
@@ -84,7 +85,7 @@
     width: 100%;
     height: 100%;
     padding: 0;
-    border: 1px solid $color-white;
+    border: 1px solid theme.$color-white;
     &::-webkit-color-swatch-wrapper {
       width: 100%;
       height: 100%;
@@ -140,8 +141,8 @@
   transform: translate(-50%, -50%);
   .icon {
     color: #000;
-    text-shadow: -1px -1px 0 $color-white, 1px -1px 0 $color-white,
-      -1px 1px 0 $color-white, 1px 1px 0 $color-white;
+    text-shadow: -1px -1px 0 theme.$color-white, 1px -1px 0 theme.$color-white,
+      -1px 1px 0 theme.$color-white, 1px 1px 0 theme.$color-white;
   }
 }
 
@@ -153,7 +154,7 @@
 
 .canvas-wrapper {
   margin: auto;
-  box-shadow: $box-shadow;
+  box-shadow: theme.$box-shadow;
 }
 
 .canvas-container {
@@ -167,19 +168,19 @@
 
 .theme-dark {
   color-scheme: dark;
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .toolbar,
   .tool-box {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   .tool {
     &:hover {
-      background: $color-fill-tertiary-dark;
-      border-color: $color-border-dark;
+      background: theme.$color-fill-tertiary-dark;
+      border-color: theme.$color-border-dark;
     }
     &.selected {
-      background: $color-fill-secondary-dark;
-      border-color: $color-border-dark;
+      background: theme.$color-fill-secondary-dark;
+      border-color: theme.$color-border-dark;
     }
   }
 }
diff --git a/src/performance-monitor/style.scss b/src/performance-monitor/style.scss
index 7df4eb6..af8512e 100644
--- a/src/performance-monitor/style.scss
+++ b/src/performance-monitor/style.scss
@@ -1,16 +1,17 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-performance-monitor {
-  @include mixin.component();
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   width: 100%;
   padding: 5px;
+  @include mixin.component();
 }
 
 .title {
-  font-size: #{$font-size}px;
+  font-size: #{theme.$font-size}px;
   margin-bottom: 5px;
-  color: $color-text;
+  color: theme.$color-text;
 }
 
 .value {
@@ -19,17 +20,17 @@
 
 .chart {
   box-sizing: border-box;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   width: 100%;
   height: 100px;
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .title {
-    color: $color-text-dark;
+    color: theme.$color-text-dark;
   }
   .chart {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
 }
diff --git a/src/qrcode-generator/style.scss b/src/qrcode-generator/style.scss
index 0397089..26f9ee5 100644
--- a/src/qrcode-generator/style.scss
+++ b/src/qrcode-generator/style.scss
@@ -1,10 +1,11 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-qrcode-generator {
-  @include mixin.component();
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   display: flex;
   height: 250px;
+  @include mixin.component();
 }
 
 .controller {
@@ -35,5 +36,5 @@
 }
 
 .theme-dark {
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
 }
diff --git a/src/retro-emulator/style.scss b/src/retro-emulator/style.scss
index 48a6235..26240fa 100644
--- a/src/retro-emulator/style.scss
+++ b/src/retro-emulator/style.scss
@@ -1,17 +1,19 @@
 @use '../share/mixin' as mixin;
 
 .luna-retro-emulator {
-  @include mixin.component();
-  background: #000;
   width: 100%;
   height: 100%;
   user-select: none;
   position: relative;
   min-height: 150px;
   min-width: 300px;
+  @include mixin.component();
+  & {
+    background: #000;
+  }
 }
 
-@include controller('retro-emulator');
+@include mixin.controller('retro-emulator');
 
 .reset,
 .play,
diff --git a/src/retro-handheld/style.scss b/src/retro-handheld/style.scss
index 069d823..ecb2688 100644
--- a/src/retro-handheld/style.scss
+++ b/src/retro-handheld/style.scss
@@ -2,15 +2,17 @@
 
 // https://codepen.io/manz/pen/XQYoKd
 .luna-retro-handheld {
-  @include mixin.component();
   min-width: 380px;
-  background: #d3ccd3 linear-gradient(#d3ccd3 95%, #999 98%, #777 99%);
   overflow: hidden;
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
+  @include mixin.component();
+  & {
+    background: #d3ccd3 linear-gradient(#d3ccd3 95%, #999 98%, #777 99%);
+  }
 }
 
 .luna-retro-handheld > .top {
diff --git a/src/scrollbar/style.scss b/src/scrollbar/style.scss
index 096c736..69d928c 100644
--- a/src/scrollbar/style.scss
+++ b/src/scrollbar/style.scss
@@ -1,9 +1,8 @@
 @use '../share/mixin' as mixin;
 
 .luna-scrollbar {
-  @include mixin.component();
   position: relative;
-  box-sizing: border-box;
+  @include mixin.component();
   &:hover {
     .track {
       opacity: 1;
diff --git a/src/setting/style.scss b/src/setting/style.scss
index df2ddd0..0c8a009 100644
--- a/src/setting/style.scss
+++ b/src/setting/style.scss
@@ -1,17 +1,18 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-setting {
-  @include mixin.component();
   min-width: 320px;
+  @include mixin.component();
 }
 
 .item {
   &:hover,
   &.selected {
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
   }
   &.selected:focus {
-    outline: 1px solid $color-primary;
+    outline: 1px solid theme.$color-primary;
   }
   .title {
     line-height: 1.4em;
@@ -34,7 +35,7 @@
   }
   .description,
   .control {
-    font-size: #{$font-size-s-m}px;
+    font-size: #{theme.$font-size-s-m}px;
   }
   .description {
     margin-bottom: 8px;
@@ -75,7 +76,7 @@
     }
   }
   input {
-    @include input();
+    @include mixin.input();
     width: 100%;
   }
 }
@@ -91,7 +92,7 @@
     }
   }
   input[type='number'] {
-    @include input();
+    @include mixin.input();
     width: 200px;
     padding: 2px;
   }
@@ -107,14 +108,14 @@
       left: 0;
       top: 4px;
       .range-track-bar {
-        background: $color-border;
+        background: theme.$color-border;
         border-radius: 2px;
         overflow: hidden;
         width: 100%;
         height: 4px;
         .range-track-progress {
           height: 100%;
-          background: $color-primary;
+          background: theme.$color-primary;
           width: 50%;
         }
       }
@@ -139,7 +140,7 @@
       border: none;
       height: 16px;
       border-radius: 10px;
-      border: 1px solid $color-border;
+      border: 1px solid theme.$color-border;
       background: radial-gradient(
         circle at center,
         #eee 0,
@@ -158,15 +159,15 @@
     }
   }
   input {
-    @include checkbox();
+    @include mixin.checkbox();
     align-self: flex-start;
     flex-shrink: 0;
   }
   label {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     * {
       margin: 0;
     }
-    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
   }
 }
 
@@ -177,7 +178,7 @@
     }
   }
   .select {
-    @include select();
+    @include mixin.select();
     select {
       width: 300px;
     }
@@ -186,19 +187,19 @@
 
 .item-button {
   button {
-    @include button();
+    @include mixin.button();
   }
 }
 
 .item-separator {
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
 }
 
 .theme-dark {
   .item {
     &:hover,
     &.selected {
-      background: $color-fill-secondary-dark;
+      background: theme.$color-fill-secondary-dark;
     }
     .description {
       a {
@@ -208,40 +209,40 @@
     }
   }
   .item-separator {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   .item-input {
     input {
-      @include input(true);
+      @include mixin.input(true);
     }
   }
   .item-checkbox {
     input {
-      @include checkbox(true);
+      @include mixin.checkbox(true);
     }
   }
   .item-select {
     .select {
-      @include select(true);
+      @include mixin.select(true);
     }
   }
   .item-button {
     button {
-      @include button(true);
+      @include mixin.button(true);
     }
   }
   .item-number {
     input[type='number'] {
-      @include input(true);
+      @include mixin.input(true);
     }
     .range-container {
       .range-track {
         .range-track-bar {
-          background: $color-border-dark;
+          background: theme.$color-border-dark;
         }
       }
       input::-webkit-slider-thumb {
-        border-color: $color-border-dark;
+        border-color: theme.$color-border-dark;
         background: radial-gradient(
           circle at center,
           #aaa 0,
diff --git a/src/shader-toy-player/style.scss b/src/shader-toy-player/style.scss
index 1cc29d4..3359b0d 100644
--- a/src/shader-toy-player/style.scss
+++ b/src/shader-toy-player/style.scss
@@ -1,15 +1,18 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-shader-toy-player {
-  @include mixin.component();
-  background: #000;
   width: 100%;
   height: 100%;
   touch-action: none;
   position: relative;
+  @include mixin.component();
+  & {
+    background: #000;
+  }
 }
 
-@include controller('shader-toy-player');
+@include mixin.controller('shader-toy-player');
 
 .canvas {
   width: 100%;
@@ -33,7 +36,7 @@
 .fps-button,
 .resolution {
   color: #eee;
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   line-height: 38px;
 }
 
@@ -44,12 +47,12 @@
 .fps {
   opacity: 0;
   position: absolute;
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   top: 0;
   right: 0;
   padding: 4px 8px;
   background: rgba(0, 0, 0, 0.5);
-  color: $color-white;
+  color: theme.$color-white;
   transition: opacity 0.3s;
   &.active {
     opacity: 1;
diff --git a/src/share/mixin.scss b/src/share/mixin.scss
index 862c711..cbeb85e 100644
--- a/src/share/mixin.scss
+++ b/src/share/mixin.scss
@@ -148,30 +148,30 @@
 
 @mixin input($dark: false) {
   @if $dark {
-    background: $color-border-dark;
-    border-color: $color-border-dark;
-    color: $color-text-dark;
+    background: theme.$color-border-dark;
+    border-color: theme.$color-border-dark;
+    color: theme.$color-text-dark;
   } @else {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    color: $color-text;
+    color: theme.$color-text;
     appearance: none;
-    border: 1px solid $color-border;
+    border: 1px solid theme.$color-border;
     outline: none;
     padding: 2px 8px;
-    border-radius: #{$border-radius-x-s}px;
-    font-size: #{$font-size}px;
-    background: $color-bg-container;
+    border-radius: #{theme.$border-radius-x-s}px;
+    font-size: #{theme.$font-size}px;
+    background: theme.$color-bg-container;
   }
 }
 
 @mixin checkbox($dark: false) {
   @if $dark {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   } @else {
     appearance: none;
     width: 14px;
     height: 14px;
-    border: 1px solid $color-border;
+    border: 1px solid theme.$color-border;
     border-radius: 0;
     position: relative;
     outline: none;
@@ -179,8 +179,8 @@
     margin-right: 8px;
     transition: background-color 0.1s;
     &:checked {
-      background-color: $color-primary;
-      border-color: $color-primary;
+      background-color: theme.$color-primary;
+      border-color: theme.$color-primary;
       &:after {
         content: '';
         width: 100%;
@@ -200,26 +200,26 @@
 @mixin select($dark: false) {
   @if $dark {
     select {
-      color: $color-text-dark;
-      border-color: $color-border-dark;
-      background: $color-border-dark;
+      color: theme.$color-text-dark;
+      border-color: theme.$color-border-dark;
+      background: theme.$color-border-dark;
     }
     &:after {
-      border-top-color: $color-text-dark;
+      border-top-color: theme.$color-text-dark;
     }
   } @else {
     position: relative;
     select {
       margin: 0;
-      font-size: #{$font-size}px;
-      background: $color-bg-container;
+      font-size: #{theme.$font-size}px;
+      background: theme.$color-bg-container;
       appearance: none;
-      border: 1px solid $color-border;
+      border: 1px solid theme.$color-border;
       padding: 2px 8px;
       padding-right: 18px;
       outline: none;
-      color: $color-text;
-      border-radius: #{$border-radius-x-s}px;
+      color: theme.$color-text;
+      border-radius: #{theme.$border-radius-x-s}px;
       -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     }
     &:after {
@@ -228,7 +228,7 @@
       height: 0;
       border-left: 5px solid transparent;
       border-right: 5px solid transparent;
-      border-top: 5px solid $color-text;
+      border-top: 5px solid theme.$color-text;
       position: absolute;
       top: 0;
       bottom: 0;
@@ -241,29 +241,29 @@
 
 @mixin button($dark: false) {
   @if $dark {
-    background: $color-bg-container-dark;
-    border-color: $color-border-dark;
+    background: theme.$color-bg-container-dark;
+    border-color: theme.$color-border-dark;
     &:hover,
     &:active {
-      background: $color-fill-secondary-dark;
+      background: theme.$color-fill-secondary-dark;
     }
     &:active {
-      border: 1px solid $color-primary;
+      border: 1px solid theme.$color-primary;
     }
   } @else {
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    background: $color-bg-container;
-    border: 1px solid $color-border;
+    background: theme.$color-bg-container;
+    border: 1px solid theme.$color-border;
     padding: 2px 8px;
-    color: $color-primary;
-    font-size: #{$font-size}px;
-    border-radius: #{$border-radius-x-s}px;
+    color: theme.$color-primary;
+    font-size: #{theme.$font-size}px;
+    border-radius: #{theme.$border-radius-x-s}px;
     &:hover,
     &:active {
-      background: $color-fill-secondary;
+      background: theme.$color-fill-secondary;
     }
     &:active {
-      border: 1px solid $color-primary;
+      border: 1px solid theme.$color-primary;
     }
   }
 }
diff --git a/src/syntax-highlighter/style.scss b/src/syntax-highlighter/style.scss
index 895113a..34c4c3c 100644
--- a/src/syntax-highlighter/style.scss
+++ b/src/syntax-highlighter/style.scss
@@ -1,9 +1,9 @@
-@import '../share/theme';
+@use '../share/theme' as theme;
 
 .luna-syntax-highlighter {
   &.theme-vs-dark {
     background: #1e1e1e;
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
     color: #dcdcdc;
   }
   .string {
@@ -50,13 +50,13 @@
   color-scheme: dark;
   .luna-text-viewer-copy,
   .luna-text-viewer-line-number {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   .luna-text-viewer-copy .luna-text-viewr-icon-check {
-    color: $color-success-dark;
+    color: theme.$color-success-dark;
   }
   .luna-text-viewer-copy {
-    background-color: $color-bg-container-dark;
+    background-color: theme.$color-bg-container-dark;
   }
 }
 
diff --git a/src/tab/style.scss b/src/tab/style.scss
index b2f9e53..2e5a872 100644
--- a/src/tab/style.scss
+++ b/src/tab/style.scss
@@ -1,18 +1,19 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-tab {
-  @include mixin.component();
   position: relative;
   overflow: hidden;
   width: 100%;
+  @include mixin.component();
 }
 
 .tabs-container {
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
 }
 
 .tabs {
-  @include overflow-auto(x);
+  @include mixin.overflow-auto(x);
   overflow-y: hidden;
   width: 100%;
   height: 100%;
@@ -29,11 +30,11 @@
   cursor: pointer;
   display: inline-block;
   padding: 0 10px;
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   text-align: center;
   text-transform: capitalize;
   &:hover {
-    background: $color-fill-secondary;
+    background: theme.$color-fill-secondary;
   }
 }
 
@@ -48,11 +49,11 @@
 
 .theme-dark {
   .tabs-container {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   .item {
     &:hover {
-      background: $color-fill-secondary-dark;
+      background: theme.$color-fill-secondary-dark;
     }
   }
 }
diff --git a/src/text-viewer/style.scss b/src/text-viewer/style.scss
index 6cf3e9e..8e6fa0b 100644
--- a/src/text-viewer/style.scss
+++ b/src/text-viewer/style.scss
@@ -1,12 +1,13 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-text-viewer {
-  @include mixin.component();
   padding: 0;
   unicode-bidi: embed;
   position: relative;
   overflow: auto;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
+  @include mixin.component();
   &:hover {
     .copy {
       opacity: 1;
@@ -32,7 +33,7 @@
   text-align: right;
   vertical-align: top;
   user-select: none;
-  border-right: 1px solid $color-border;
+  border-right: 1px solid theme.$color-border;
 }
 
 .line-text {
@@ -42,12 +43,12 @@
 }
 
 .copy {
-  background: $color-bg-container;
+  background: theme.$color-bg-container;
   opacity: 0;
   position: absolute;
   right: 5px;
   top: 5px;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   border-radius: 4px;
   width: 25px;
   height: 25px;
@@ -56,7 +57,7 @@
   cursor: pointer;
   transition: opacity 0.3s, top 0.3s;
   .icon-check {
-    color: $color-success-text;
+    color: theme.$color-success-text;
   }
 }
 
@@ -72,8 +73,8 @@
       word-break: break-all;
     }
   }
-  font-size: #{$font-size-s-m}px;
-  font-family: $font-family-code;
+  font-size: #{theme.$font-size-s-m}px;
+  font-family: theme.$font-family-code;
   box-sizing: border-box;
   white-space: pre;
   display: block;
@@ -81,15 +82,15 @@
 
 .theme-dark {
   color: #d9d9d9;
-  border-color: $color-border-dark;
+  border-color: theme.$color-border-dark;
   .copy,
   .line-number {
-    border-color: $color-border-dark;
+    border-color: theme.$color-border-dark;
   }
   .copy .icon-check {
-    color: $color-success-text-dark;
+    color: theme.$color-success-text-dark;
   }
   .copy {
-    background-color: $color-bg-container-dark;
+    background-color: theme.$color-bg-container-dark;
   }
 }
diff --git a/src/toolbar/style.scss b/src/toolbar/style.scss
index ce27224..4c50b4b 100644
--- a/src/toolbar/style.scss
+++ b/src/toolbar/style.scss
@@ -1,33 +1,36 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-toolbar {
-  @include mixin.component();
   height: 31px;
   display: flex;
   white-space: nowrap;
   overflow-x: hidden;
-  font-size: #{$font-size-s-m}px;
-  border-bottom: 1px solid $color-border;
+  border-bottom: 1px solid theme.$color-border;
+  @include mixin.component();
+  & {
+    font-size: #{theme.$font-size-s-m}px;
+  }
 }
 
 .item {
   display: flex;
-  margin: 0 #{$margin-x-x-s}px;
+  margin: 0 #{theme.$margin-x-x-s}px;
 }
 
 .item-separator {
-  background: $color-border;
+  background: theme.$color-border;
   width: 1px;
   height: 22px;
   margin-top: 4px;
 }
 
 .item-select {
-  @include select();
+  @include mixin.select();
   margin-top: 4px;
   margin-bottom: 4px;
   select {
-    font-size: #{$font-size-s-m}px;
+    font-size: #{theme.$font-size-s-m}px;
     max-width: 200px;
   }
 }
@@ -38,7 +41,7 @@
 
 .item-input {
   input {
-    @include input();
+    @include mixin.input();
     height: 22px;
     margin-top: 4px;
     margin-bottom: 4px;
@@ -48,7 +51,7 @@
 
 .item-number {
   input[type='number'] {
-    @include input();
+    @include mixin.input();
     width: 60px;
     padding: 2px;
     height: 22px;
@@ -61,25 +64,25 @@
   button {
     display: flex;
     align-items: center;
-    font-size: #{$font-size-s-m}px;
+    font-size: #{theme.$font-size-s-m}px;
     padding: 0 2px;
-    color: $color-text;
+    color: theme.$color-text;
     height: 22px;
     margin-top: 4px;
     margin-bottom: 4px;
     border: none;
     background: transparent;
     border: 1px solid transparent;
-    border-radius: #{$border-radius-x-s}px;
+    border-radius: #{theme.$border-radius-x-s}px;
     &:hover,
     &.hover {
-      background: $color-fill-tertiary;
-      border-color: $color-border;
+      background: theme.$color-fill-tertiary;
+      border-color: theme.$color-border;
     }
     &:active,
     &.active {
-      border-color: $color-border;
-      background: $color-fill-secondary;
+      border-color: theme.$color-border;
+      background: theme.$color-fill-secondary;
     }
   }
 }
@@ -94,36 +97,36 @@
 }
 
 .theme-dark {
-  border-bottom-color: $color-border-dark;
+  border-bottom-color: theme.$color-border-dark;
   .item-separator {
-    background: $color-border-dark;
+    background: theme.$color-border-dark;
   }
   .item-button {
     button {
-      color: $color-text-dark;
+      color: theme.$color-text-dark;
       &:hover,
       &.hover {
-        background: $color-fill-secondary-dark;
-        border-color: $color-border-dark;
+        background: theme.$color-fill-secondary-dark;
+        border-color: theme.$color-border-dark;
       }
       &:active,
       &.active {
-        border-color: $color-border-dark;
-        background: $color-fill-tertiary-dark;
+        border-color: theme.$color-border-dark;
+        background: theme.$color-fill-tertiary-dark;
       }
     }
   }
   .item-select {
-    @include select(true);
+    @include mixin.select(true);
   }
   .item-input {
     input {
-      @include input(true);
+      @include mixin.input(true);
     }
   }
   .item-number {
     input[type='number'] {
-      @include input(true);
+      @include mixin.input(true);
     }
   }
 }
diff --git a/src/video-player/style.scss b/src/video-player/style.scss
index 02ceae1..0bd1da3 100644
--- a/src/video-player/style.scss
+++ b/src/video-player/style.scss
@@ -1,15 +1,18 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-video-player {
-  @include mixin.component();
-  background: #000;
   min-height: 150px;
   position: relative;
-  font-size: 14px;
   outline: none;
+  @include mixin.component();
+  & {
+    background: #000;
+    font-size: 14px;
+  }
 }
 
-@include controller('video-player');
+@include mixin.controller('video-player');
 
 .video {
   display: flex;
@@ -45,7 +48,7 @@
   width: 8px;
   height: 8px;
   display: inline-block;
-  background: $color-primary;
+  background: theme.$color-primary;
   border-radius: 50%;
 }
 
@@ -71,7 +74,7 @@
 }
 
 .bar-played {
-  background: $color-primary;
+  background: theme.$color-primary;
 }
 
 .play,
@@ -115,7 +118,7 @@
 }
 
 .volume-bar-fill {
-  background: $color-primary;
+  background: theme.$color-primary;
   position: absolute;
   top: 0;
   left: 0;
@@ -124,6 +127,6 @@
 
 .time {
   color: #eee;
-  font-size: #{$font-size-s-m}px;
+  font-size: #{theme.$font-size-s-m}px;
   line-height: 38px;
 }
diff --git a/src/window/style.scss b/src/window/style.scss
index a1ebdff..c2fe0ed 100644
--- a/src/window/style.scss
+++ b/src/window/style.scss
@@ -1,17 +1,18 @@
 @use '../share/mixin' as mixin;
+@use '../share/theme' as theme;
 
 .luna-window {
-  @include mixin.component();
   position: absolute;
   pointer-events: all;
   display: flex;
   flex-flow: column;
-  border: 1px solid $color-border;
+  border: 1px solid theme.$color-border;
   overflow: hidden;
-  box-shadow: $box-shadow;
+  box-shadow: theme.$box-shadow;
+  @include mixin.component();
   &.active {
     .title-bar {
-      background: $color-fill-secondary;
+      background: theme.$color-fill-secondary;
     }
     .resizer {
       position: static;
@@ -64,7 +65,7 @@
   background: rgb(250, 250, 250);
   display: flex;
   flex-flow: row;
-  font-family: $font-family;
+  font-family: theme.$font-family;
 }
 
 .title-bar-left {
@@ -229,6 +230,6 @@
   pointer-events: all;
   &:hover,
   &.active {
-    background: $color-primary;
+    background: theme.$color-primary;
   }
 }