diff --git a/public/color-schemes/default.json b/public/color-schemes/default.json
index 297068cde5..7d9c5b294f 100644
--- a/public/color-schemes/default.json
+++ b/public/color-schemes/default.json
@@ -1,9 +1,13 @@
 {
-  "name": "Default",
-  "displayName": "デフォルト",
+  "name": "DefaultFix",
+  "displayName": "VOICEVOXデフォルト",
   "roleColors": {
-    "primary": "#a5d4ad",
-    "error": "#d04756"
+    "primary": "oklch(80% 0.1 150)",
+    "secondary": "oklch(80% 0.035 150)",
+    "tertiary": "oklch(80% 0.1 90)",
+    "neutral": "oklch(60% 0.00 240)",
+    "neutralVariant": "oklch(80% 0.005 150)",
+    "error": "oklch(60% 0.18 20)"
   },
   "aliasColors": [
     {
@@ -17,77 +21,84 @@
       "name": "singPlaybackButtonContainer",
       "displayName": "ツールバー再生ボタン",
       "role": "primary",
-      "lightShade": 0.82,
-      "darkShade": 0.6
+      "lightShade": 0.8,
+      "darkShade": 0.7
     },
     {
       "name": "singOnPlaybackButtonContainer",
       "displayName": "ツールバー再生ボタンアイコン",
       "role": "neutral",
-      "lightShade": 0.35,
-      "darkShade": 0.2
+      "lightShade": 0.1,
+      "darkShade": 0.1
     },
     {
       "name": "singGridCellWhite",
       "displayName": "シーケンサグリッド(白鍵)",
       "role": "neutral",
-      "lightShade": 1.0,
-      "darkShade": 0.17
+      "lightShade": 1,
+      "darkShade": 0.2
     },
     {
       "name": "singGridCellBlack",
       "displayName": "シーケンサグリッド(黒鍵)",
       "role": "neutral",
       "lightShade": 0.96,
-      "darkShade": 0.04
+      "darkShade": 0.15
     },
     {
       "name": "singGridVerticalLine",
       "displayName": "シーケンサグリッド(縦線)",
       "role": "neutral",
-      "lightShade": 0.95,
-      "darkShade": 0.04
+      "lightShade": 0.96,
+      "darkShade": 0.15
     },
     {
       "name": "singGridHorizontalLine",
       "displayName": "シーケンサグリッド(横線)",
       "role": "neutral",
-      "lightShade": 0.95,
-      "darkShade": 0.04
+      "lightShade": 0.96,
+      "darkShade": 0.15
     },
     {
       "name": "singGridMeasureLine",
       "displayName": "シーケンサグリッド(小節線)",
       "role": "neutral",
-      "lightShade": 0.8,
+      "lightShade": 0.75,
       "darkShade": 0.4
     },
     {
       "name": "singGridBeatLine",
       "displayName": "シーケンサグリッド(拍線)",
       "role": "neutral",
-      "lightShade": 0.85,
-      "darkShade": 0.24
+      "lightShade": 0.9,
+      "darkShade": 0.04
     },
     {
       "name": "singGridOctaveLine",
       "displayName": "シーケンサグリッド(オクターブ線)",
       "role": "neutral",
-      "lightShade": 0.85,
+      "lightShade": 0.88,
+      "darkShade": 0.3
+    },
+    {
+      "name": "singRulerSurface",
+      "displayName": "ルーラー表面",
+      "role": "neutral",
+      "lightShade": 0.9,
       "darkShade": 0.3
     },
     {
       "name": "singRulerMeasureLine",
       "displayName": "ルーラー(小節線)",
-      "role": "neutralVariant",
+      "role": "neutral",
       "lightShade": 0.65,
-      "darkShade": 0.55
+      "darkShade": 0.6
     },
     {
       "name": "singRulerBeatLine",
       "displayName": "ルーラー(拍線)",
-      "role": "neutralVariant",
-      "lightShade": 0.7,
+      "role": "neutral",
+      "lightShade": 0.75,
       "darkShade": 0.45
     },
     {
@@ -95,14 +106,14 @@
       "displayName": "ピアノキー(白鍵)",
       "role": "neutral",
       "lightShade": 0.99,
-      "darkShade": 0.6
+      "darkShade": 0.7
     },
     {
       "name": "singPianoKeyBlack",
       "displayName": "ピアノキー(黒鍵)",
       "role": "neutral",
-      "lightShade": 0.5,
-      "darkShade": 0.24
+      "lightShade": 0.45,
+      "darkShade": 0.2
     },
     {
       "name": "singNoteBarContainer",
@@ -110,95 +121,346 @@
       "role": "secondary",
       "lightShade": 0.88,
       "darkShade": 0.7
-    }
-  ],
-  "customColors": [
+    },
     {
-      "name": "link",
-      "displayName": "リンク",
-      "sourceColor": "#0969da"
+      "name": "singOnNoteBarContainer",
+      "displayName": "ノートコンテナ上",
+      "role": "secondary",
+      "lightShade": 0.1,
+      "darkShade": 0.1
     },
     {
-      "name": "pink",
-      "displayName": "ピンク",
-      "sourceColor": "oklch(70% 0.14 0)"
+      "name": "singNoteBarOutline",
+      "displayName": "ノートコンテナ外枠",
+      "role": "secondary",
+      "lightShade": 0.6,
+      "darkShade": 0.85
     },
     {
-      "name": "orange",
-      "displayName": "オレンジ",
-      "sourceColor": "oklch(70% 0.13 45)"
+      "name": "singNoteBarSelectedContainer",
+      "displayName": "ノートコンテナ(選択)",
+      "role": "primary",
+      "lightShade": 0.96,
+      "darkShade": 0.8
     },
     {
-      "name": "yellow",
-      "displayName": "イエロー",
-      "sourceColor": "oklch(70% 0.13 90)"
+      "name": "singOnNoteBarSelectedContainer",
+      "displayName": "ノートコンテナ(選択上)",
+      "role": "primary",
+      "lightShade": 0.1,
+      "darkShade": 0.1
+    },
+    {
+      "name": "singNoteBarSelectedOutline",
+      "displayName": "ノートコンテナ(選択外枠)",
+      "role": "primary",
+      "lightShade": 0.6,
+      "darkShade": 0.95
     },
     {
-      "name": "green",
-      "displayName": "グリーン",
-      "sourceColor": "oklch(70% 0.13 135)"
+      "name": "singNoteBarSelectedOutlineOuter",
+      "displayName": "ノートコンテナ(選択外枠外)",
+      "role": "primary",
+      "lightShade": 0.8,
+      "darkShade": 0.6
     },
     {
-      "name": "teal",
-      "displayName": "ティール",
-      "sourceColor": "oklch(70% 0.13 180)"
+      "name": "singNoteBarPreviewContainer",
+      "displayName": "ノートコンテナ(プレビュー)",
+      "role": "tertiary",
+      "lightShade": 0.88,
+      "darkShade": 0.7
     },
     {
-      "name": "skyblue",
-      "displayName": "スカイブルー",
-      "sourceColor": "oklch(70% 0.13 225)"
+      "name": "singOnNoteBarPreviewContainer",
+      "displayName": "ノートコンテナ(プレビュー上)",
+      "role": "tertiary",
+      "lightShade": 0.1,
+      "darkShade": 0.1
     },
     {
-      "name": "indigo",
-      "displayName": "インディゴ",
-      "sourceColor": "oklch(70% 0.13 270)"
+      "name": "singNoteBarPreviewOutline",
+      "displayName": "ノートコンテナ(プレビュー外枠)",
+      "role": "tertiary",
+      "lightShade": 0.6,
+      "darkShade": 0.85
+    },
+    {
+      "name": "singNoteBarPreviewOutlineOuter",
+      "displayName": "ノートコンテナ(プレビュー外枠)",
+      "role": "tertiary",
+      "lightShade": 0.8,
+      "darkShade": 0.6
+    },
+    {
+      "name": "singShadowNote",
+      "displayName": "ノートコンテナ(別トラック)",
+      "role": "neutralVariant",
+      "lightShade": 0.88,
+      "darkShade": 0.7
+    }
+  ],
+  "customColors": [
+    {
+      "name": "link",
+      "displayName": "リンクブルー",
+      "sourceColor": "oklch(54% 0.19 256)"
+    },
+    {
+      "name": "orange",
+      "displayName": "マンゴーオレンジ",
+      "sourceColor": "oklch(80% 0.098 45)"
     },
     {
       "name": "purple",
-      "displayName": "パープル",
-      "sourceColor": "oklch(70% 0.13 315)"
+      "displayName": "ラベンダーパープル",
+      "sourceColor": "oklch(80% 0.115 296)"
+    },
+    {
+      "name": "a",
+      "displayName": "a",
+      "sourceColor": "#FCBB7E"
+    },
+    {
+      "name": "b",
+      "displayName": "b",
+      "sourceColor": "#BBADFF"
+    },
+    {
+      "name": "c",
+      "displayName": "c",
+      "sourceColor": "#B9DD83"
+    },
+    {
+      "name": "d",
+      "displayName": "d",
+      "sourceColor": "#E594Df"
     }
   ],
   "contrastPairs": [
     {
-      "colors": ["singGridCellBlack", "singGridCellWhite"],
+      "colors": [
+        "singToolbarContainer",
+        "singPlaybackButtonContainer"
+      ],
+      "requiredContrast": 45,
+      "description": "ツールバー - 再生ボタン"
+    },
+    {
+      "colors": [
+        "singPlaybackButtonContainer",
+        "singOnPlaybackButtonContainer"
+      ],
+      "requiredContrast": 45,
+      "description": "再生ボタン - ツールバー再生ボタンアイコン"
+    },
+    {
+      "colors": [
+        "singToolbarContainer",
+        "surfaceContainerLowest"
+      ],
       "requiredContrast": 15,
-      "description": "シーケンサグリッド(黒鍵) - シーケンサグリッド(白鍵)"
+      "description": "ツールバーコンテナ - 最低コンテナ表面"
+    },
+    {
+      "colors": [
+        "singToolbarContainer",
+        "surfaceContainerHighest"
+      ],
+      "requiredContrast": 0,
+      "description": "ツールバーコンテナ - 最高コンテナ表面"
     },
     {
-      "colors": ["singGridVerticalLine", "singGridCellBlack"],
+      "colors": [
+        "singToolbarContainer",
+        "secondaryContainer"
+      ],
       "requiredContrast": 0,
-      "description": "シーケンサグリッド(縦線) - シーケンサグリッド(黒鍵)"
+      "description": "ツールバーコンテナ - セカンダリコンテナ"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singGridCellBlack"
+      ],
+      "requiredContrast": 0,
+      "description": "グリッド白鍵 - グリッド黒鍵"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singGridVerticalLine"
+      ],
+      "requiredContrast": 0,
+      "description": "グリッド白鍵 - 縦線"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singGridHorizontalLine"
+      ],
+      "requiredContrast": 0,
+      "description": "グリッド白鍵 - 横線"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singGridMeasureLine"
+      ],
+      "requiredContrast": 15,
+      "description": "グリッド白鍵 - 小節線"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singGridBeatLine"
+      ],
+      "requiredContrast": 15,
+      "description": "グリッド白鍵 - 拍線"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singGridOctaveLine"
+      ],
+      "requiredContrast": 15,
+      "description": "グリッド白鍵 - オクターブ線"
+    },
+    {
+      "colors": [
+        "singGridCellBlack",
+        "singRulerSurface"
+      ],
+      "requiredContrast": 15,
+      "description": "グリッド黒鍵 - ルーラー表面"
+    },
+    {
+      "colors": [
+        "singRulerSurface",
+        "singRulerMeasureLine"
+      ],
+      "requiredContrast": 15,
+      "description": "ルーラー表面 - ルーラー(小節線)"
+    },
+    {
+      "colors": [
+        "singRulerSurface",
+        "singRulerBeatLine"
+      ],
+      "requiredContrast": 15,
+      "description": "ルーラー表面 - ルーラー(拍線)"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singNoteBarContainer"
+      ],
+      "requiredContrast": 15,
+      "description": "グリッド白鍵 - ノート"
+    },
+    {
+      "colors": [
+        "singNoteBarContainer",
+        "singOnNoteBarContainer"
+      ],
+      "requiredContrast": 15,
+      "description": "ノートコンテナ - ノートコンテナ(選択上)"
     },
     {
-      "colors": ["singGridHorizontalLine", "singGridCellBlack"],
+      "colors": [
+        "singNoteBarContainer",
+        "singNoteBarSelectedContainer"
+      ],
       "requiredContrast": 0,
-      "description": "シーケンサグリッド(横線) - シーケンサグリッド(黒鍵)"
+      "description": "ノートコンテナ - ノートコンテナ(選択)"
     },
     {
-      "colors": ["singGridMeasureLine", "singGridCellBlack"],
+      "colors": [
+        "singNoteBarOutline",
+        "singGridCellBlack"
+      ],
+      "requiredContrast": 60,
+      "description": "ノートコンテナ外枠 - グリッド黒鍵"
+    },
+    {
+      "colors": [
+        "singGridCellWhite",
+        "singNoteBarContainer"
+      ],
       "requiredContrast": 15,
-      "description": "シーケンサグリッド(小節線) - シーケンサグリッド(黒鍵)"
+      "description": "グリッド白鍵 - ノート"
     },
     {
-      "colors": ["singGridBeatLine", "singGridCellBlack"],
+      "colors": [
+        "singNoteBarContainer",
+        "singOnNoteBarContainer"
+      ],
       "requiredContrast": 15,
-      "description": "シーケンサグリッド(拍線) - シーケンサグリッド(黒鍵)"
+      "description": "ノートコンテナ - ノートコンテナ(選択上)"
+    },
+    {
+      "colors": [
+        "singNoteBarContainer",
+        "singNoteBarSelectedContainer"
+      ],
+      "requiredContrast": 0,
+      "description": "ノートコンテナ - ノートコンテナ(選択)"
+    },
+    {
+      "colors": [
+        "singNoteBarOutline",
+        "singGridCellBlack"
+      ],
+      "requiredContrast": 60,
+      "description": "ノートコンテナ外枠 - グリッド黒鍵"
     },
     {
-      "colors": ["singGridOctaveLine", "singGridCellBlack"],
+      "colors": [
+        "singGridCellWhite",
+        "singNoteBarSelectedContainer"
+      ],
       "requiredContrast": 15,
-      "description": "シーケンサグリッド(オクターブ線) - シーケンサグリッド(黒鍵)"
+      "description": "グリッド白鍵 - ノートコンテナ(選択)"
+    },
+    {
+      "colors": [
+        "singNoteBarSelectedContainer",
+        "singOnNoteBarSelectedContainer"
+      ],
+      "requiredContrast": 15,
+      "description": "ノートコンテナ(選択) - ノートコンテナ(選択上)"
+    },
+    {
+      "colors": [
+        "singNoteBarSelectedContainer",
+        "singNoteBarSelectedOutline"
+      ],
+      "requiredContrast": 0,
+      "description": "ノートコンテナ(選択) - ノートコンテナ(選択外枠)"
+    },
+    {
+      "colors": [
+        "singNoteBarSelectedOutline",
+        "singGridCellBlack"
+      ],
+      "requiredContrast": 60,
+      "description": "ノートコンテナ(選択外枠) - グリッド黒鍵"
     },
     {
-      "colors": ["singRulerMeasureLine", "surfaceContainerHighest"],
+      "colors": [
+        "singPianoKeyWhite",
+        "singPianoKeyBlack"
+      ],
       "requiredContrast": 15,
-      "description": "ルーラー(小節線) - 最高コンテナ表面"
+      "description": "ピアノキー白鍵 - ピアノキー黒鍵"
     },
     {
-      "colors": ["singRulerBeatLine", "surfaceContainerHighest"],
+      "colors": [
+        "singGridCellWhite",
+        "inversePrimary"
+      ],
       "requiredContrast": 15,
-      "description": "ルーラー(拍線) - 最高コンテナ表面"
+      "description": "グリッド白鍵 - インバースプライマリ"
     }
   ]
 }
\ No newline at end of file
diff --git a/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue b/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue
index f324ef6514..1150527d28 100644
--- a/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue
+++ b/src/components/Sing/CharacterMenuButton/SelectedCharacter.vue
@@ -1,6 +1,6 @@
 <template>
   <div v-if="props.showSkeleton" class="selected-character">
-    <QSkeleton class="character-avatar" type="QAvatar" size="52px" />
+    <QSkeleton class="character-avatar" type="QAvatar" size="40px" />
     <div class="character-info">
       <QSkeleton
         class="character-name skeleton"
@@ -12,12 +12,12 @@
         class="character-style"
         type="rect"
         width="110px"
-        height="12px"
+        height="8px"
       />
     </div>
   </div>
   <div v-else class="selected-character">
-    <QAvatar v-if="selectedStyleIconPath" class="character-avatar" size="3rem">
+    <QAvatar v-if="selectedStyleIconPath" class="character-avatar">
       <img :src="selectedStyleIconPath" class="character-avatar-icon" />
     </QAvatar>
     <div class="character-info">
@@ -83,9 +83,10 @@ const selectedStyleIconPath = computed(() => {
   border-radius: 4px 0 0 4px;
   align-items: center;
   display: flex;
-  padding: 4px;
+  padding: 0 8px 0 4px;
   position: relative;
-  height: 56px;
+  height: 40px;
+  font-smooth: antialiased;
 
   &:hover {
     border-color: var(--scheme-color-outline);
@@ -96,7 +97,14 @@ const selectedStyleIconPath = computed(() => {
     border-color: var(--scheme-color-primary);
   }
 
+  .character-avatar {
+    background: var(--scheme-color-background);
+    width: 36px;
+    height: 36px;
+  }
+
   .character-avatar-icon {
+    border: 1px solid var(--scheme-color-outline-variant);
     display: block;
     height: 100%;
     object-fit: cover;
@@ -111,31 +119,35 @@ const selectedStyleIconPath = computed(() => {
     text-align: left;
     justify-content: center;
     white-space: nowrap;
+    font-optical-sizing: auto;
   }
 
   .character-name {
     color: var(--scheme-color-on-surface);
-    font-size: 15px;
+    font-size: 14px;
     font-weight: 500;
     line-height: 24px;
-    padding-top: 8px;
+    padding-top: 12px;
     margin-bottom: 0;
+    font-optical-sizing: auto;
 
     &.skeleton {
       margin-top: 0;
-      margin-bottom: 8px;
+      margin-bottom: 0;
     }
   }
 
   .character-style {
     color: var(--scheme-color-on-surface-variant);
-    font-size: 10px;
-    font-weight: 500;
+    font-size: 9px;
+    transform: translateY(-5px);
+    font-weight: 400;
     line-height: 16px;
     margin-bottom: 8px;
   }
 
   .character-menu-dropdown-icon {
+    display: none;
     color: var(--scheme-color-on-surface-variant);
     margin-left: 4px;
   }
diff --git a/src/components/Sing/ColorSchemeEditor.vue b/src/components/Sing/ColorSchemeEditor.vue
index 35b7cf391f..b0d5f02172 100644
--- a/src/components/Sing/ColorSchemeEditor.vue
+++ b/src/components/Sing/ColorSchemeEditor.vue
@@ -33,15 +33,23 @@
           </SelectContent>
         </SelectPortal>
       </SelectRoot>
-      <div class="switch-root" style="display: none">
-        <label class="switch-label" for="dark-mode">ダークモード</label>
-        <SwitchRoot
+      <div class="checkbox-wrapper">
+        <input
+          id="passthrough"
+          v-model="isPassthroughEnabled"
+          type="checkbox"
+          @change="togglePassthrough"
+        />
+        <label for="passthrough">パススルー</label>
+      </div>
+      <div class="checkbox-wrapper">
+        <input
           id="dark-mode"
-          v-model:checked="isDarkMode"
-          class="switch-root"
-        >
-          <SwitchThumb class="switch-thumb" />
-        </SwitchRoot>
+          v-model="isDarkMode"
+          type="checkbox"
+          @change="toggleDarkMode"
+        />
+        <label for="dark-mode">ダークモード</label>
       </div>
       <button @click="resetCurrentScheme">リセット</button>
       <button
@@ -154,30 +162,21 @@
               </SelectContent>
             </SelectPortal>
           </SelectRoot>
-          <span class="alias-color-value">
-            {{ isDarkMode ? aliasColor.darkShade : aliasColor.lightShade }}
-          </span>
-        </div>
-        <SliderRoot
-          :modelValue="[
-            isDarkMode ? aliasColor.darkShade : aliasColor.lightShade,
-          ]"
-          class="slider-root"
-          :max="1"
-          :step="0.01"
-          @update:modelValue="
-            (value) =>
-              updateAliasColorShade(aliasColor.name, value ? value[0] : 0)
-          "
-        >
-          <SliderTrack class="slider-track">
-            <SliderRange class="slider-range" />
-          </SliderTrack>
-          <SliderThumb
-            :aria-label="aliasColor.displayName"
-            class="slider-thumb"
+          <input
+            type="number"
+            :value="isDarkMode ? aliasColor.darkShade : aliasColor.lightShade"
+            min="0"
+            max="1"
+            step="0.01"
+            @input="
+              (e) =>
+                updateAliasColorShade(
+                  aliasColor.name,
+                  parseFloat((e.target as HTMLInputElement).value),
+                )
+            "
           />
-        </SliderRoot>
+        </div>
         <div
           v-if="aliasColorContrastIssues[aliasColor.name]"
           class="contrast-issues"
@@ -300,12 +299,6 @@ import {
   SelectTrigger,
   SelectValue,
   SelectViewport,
-  SliderRoot,
-  SliderTrack,
-  SliderRange,
-  SliderThumb,
-  SwitchRoot,
-  SwitchThumb,
 } from "radix-vue";
 import { useColorScheme } from "@/composables/useColorScheme";
 import {
@@ -316,11 +309,11 @@ import {
   ColorShades,
 } from "@/sing/colorScheme/types";
 import {
-  cssStringToOklch,
   hexToCssString,
   cssStringToHex,
   oklchToCssString,
 } from "@/sing/colorScheme/util";
+import { LtoLr } from "@/sing/colorScheme/algorithm";
 import {
   DEFINED_ROLES,
   DEFINED_CONTRAST_PAIR,
@@ -338,6 +331,7 @@ const {
   updateColorScheme,
   selectColorScheme,
   setColorSchemeFromConfig,
+  setDarkMode,
 } = useColorScheme();
 
 // state
@@ -347,6 +341,17 @@ const selectedScheme = ref(currentColorScheme.value.name);
 const initialSchemeConfig = ref<ColorSchemeConfig | null>(null);
 // 開閉状態
 const isColorSchemeEditorOpen = ref(true);
+const isPassthroughEnabled = ref(false);
+
+// toggleDarkMode メソッドを追加
+const toggleDarkMode = () => {
+  setDarkMode(isDarkMode.value);
+};
+
+// 新しいメソッドを追加
+const togglePassthrough = () => {
+  updateColorScheme({ passthrough: isPassthroughEnabled.value });
+};
 
 // computed
 // カラースキーム一覧
@@ -366,9 +371,6 @@ const allRoles = computed<string[]>(() => [
   ...(currentColorScheme.value.config.customColors?.map((cc) => cc.name) || []),
 ]);
 
-const customColors = computed(
-  () => currentColorScheme.value.config.customColors || [],
-);
 // const aliasColors = computed(() => currentColorScheme.value.config.aliasColors || []);
 
 // パレットのシェードを明度順にソートしたもの
@@ -383,18 +385,7 @@ const sortedPaletteShades = computed(() => {
 });
 
 // すべてのパレット: デフォルトのパレット + カスタムカラーのパレット
-const allPalettes = computed(() => {
-  const basePalettes = currentColorScheme.value.palettes;
-  const customPalettes = customColors.value.reduce(
-    (acc, customColor) => {
-      acc[customColor.name] = generateCustomPalette(customColor);
-      return acc;
-    },
-    {} as Record<string, { name: string; shades: Record<number, OklchColor> }>,
-  );
-
-  return { ...basePalettes, ...customPalettes };
-});
+const allPalettes = computed(() => currentColorScheme.value.palettes);
 
 // コントラストチェック結果
 const contrastResults = computed(() => {
@@ -670,9 +661,17 @@ const downloadCSSVariables = (options: {
       .join("\n")}\n}`;
   };
 
+  const generateLut = () => {
+    const lrs = [...Array(100).keys()].map((l) => {
+      return LtoLr(l / 100).toFixed(3);
+    });
+    return `:root {\n${lrs.map((lr: string, index: number) => `  --lr-${index}: ${lr};`).join("\n")}\n}`;
+  };
+
   const cssContent = [
     generateThemeBlock("light"),
     generateThemeBlock("dark"),
+    generateLut(),
   ].join("\n\n");
 
   downloadFile(
@@ -712,38 +711,6 @@ const handleDownloadCSSVariables = () => {
   });
 };
 
-/**
- * カスタムカラーのパレットを生成する
- * @param customColor : CustomColorConfig - カスタムカラー
- * @returns { name: string, shades: Record<number, OklchColor> } - カスタムカラーのパレット
- */
-const generateCustomPalette = (customColor: CustomColorConfig) => {
-  const baseColor = cssStringToOklch(customColor.sourceColor);
-  const shades = sortedPaletteShades.value.reduce(
-    (acc, shade) => {
-      acc[shade] = adjustShade(baseColor, shade);
-      return acc;
-    },
-    {} as Record<number, OklchColor>,
-  );
-
-  return { name: customColor.name, shades };
-};
-
-/**
- * シェードを調整する
- * @param sourceColor : OklchColor - ソースカラー
- * @param shade : number - 0-1
- * @returns OklchColor - 調整されたシェード
- */
-const adjustShade = (sourceColor: OklchColor, shade: number): OklchColor => {
-  const [, c, h] = sourceColor;
-  const newL = shade;
-  const newC = Number(c);
-  const newH = Number(h);
-  return [newL, newC, newH];
-};
-
 // エディタを開く
 const openColorSchemeEditor = () => {
   if (isColorSchemeEditorOpen.value === true) {
@@ -791,7 +758,7 @@ onMounted(() => {
 }
 
 .color-scheme-editor.is-closed {
-  transform: translate3d(calc(100% - 48px), 0, 0);
+  transform: translate3d(calc(100% - 24px), 0, 0);
   opacity: 0.8;
   cursor: pointer;
 }
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
index b5fced3731..e5d77a1e37 100644
--- a/src/components/Sing/ScoreSequencer.vue
+++ b/src/components/Sing/ScoreSequencer.vue
@@ -28,8 +28,6 @@
       @scroll="onScroll"
       @contextmenu.prevent
     >
-      <!-- キャラクター全身 -->
-      <CharacterPortrait />
       <!-- グリッド -->
       <SequencerGrid />
       <div
@@ -40,7 +38,7 @@
           transform: `translateX(${guideLineX}px)`,
         }"
       ></div>
-
+      <CharacterPortrait />
       <!-- undefinedだと警告が出るのでnullを渡す -->
       <!-- TODO: ちゃんとしたトラックIDを渡す -->
       <SequencerShadowNote
@@ -137,6 +135,7 @@
       :max="ZOOM_X_MAX"
       :step="ZOOM_X_STEP"
       class="zoom-x-slider"
+      trackSize="3px"
       @update:modelValue="setZoomX"
     />
     <QSlider
@@ -147,6 +146,7 @@
       vertical
       reverse
       class="zoom-y-slider"
+      trackSize="3px"
       @update:modelValue="setZoomY"
     />
     <ContextMenu
@@ -154,6 +154,7 @@
       ref="contextMenu"
       :menudata="contextMenuData"
     />
+    <div class="character-selecter"></div>
   </div>
 </template>
 
@@ -1530,7 +1531,8 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
 .sequencer-corner {
   grid-row: 1;
   grid-column: 1;
-  background: var(--scheme-color-surface-container-highest);
+  background: var(--scheme-color-sing-ruler-surface);
+  border-radius: 4px 0 0 0;
 }
 
 .sequencer-ruler {
@@ -1597,7 +1599,7 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
 .sequencer-guideline {
   position: absolute;
   top: 0;
-  left: 0;
+  left: -0.5px;
   width: 1px;
   background: var(--scheme-color-secondary-container);
   pointer-events: none;
@@ -1650,50 +1652,61 @@ const contextMenuData = computed<ContextMenuItemData[]>(() => {
 .zoom-x-slider {
   position: fixed;
   bottom: 16px;
-  right: 32px;
+  right: 64px;
   width: 80px;
 
   :deep(.q-slider__track) {
-    background: var(--scheme-color-surface-container);
-    color: var(--scheme-color-secondary-fixed);
+    background: var(--scheme-color-outline-variant);
+    color: var(--scheme-color-secondary);
   }
 
   :deep(.q-slider__thumb) {
-    color: var(--scheme-color-secondary-fixed);
+    color: var(--scheme-color-secondary);
   }
 
   &:hover {
     :deep(.q-slider__track) {
-      color: var(--scheme-color-primary-fixed-dim);
+      color: var(--scheme-color-primary);
     }
     :deep(.q-slider__thumb) {
-      color: var(--scheme-color-primary-fixed-dim);
+      color: var(--scheme-color-primary);
     }
   }
 }
 
 .zoom-y-slider {
   position: fixed;
-  bottom: 40px;
+  bottom: 64px;
   right: 16px;
   height: 80px;
 
   :deep(.q-slider__track) {
-    background: var(--scheme-color-surface-container);
-    color: var(--scheme-color-secondary-fixed);
+    background: var(--scheme-color-outline-variant);
+    color: var(--scheme-color-secondary);
   }
 
   :deep(.q-slider__thumb) {
-    color: var(--scheme-color-secondary-fixed);
+    color: var(--scheme-color-secondary);
   }
 
   &:hover {
     :deep(.q-slider__track) {
-      color: var(--scheme-color-primary-fixed-dim);
+      color: var(--scheme-color-primary);
     }
     :deep(.q-slider__thumb) {
-      color: var(--scheme-color-primary-fixed-dim);
+      color: var(--scheme-color-primary);
     }
   }
 }
+
+.character-selecter {
+  background: var(--scheme-color-pink-container);
+  border: 1px solid var(--scheme-color-pink);
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+}
 </style>
diff --git a/src/components/Sing/SequencerKeys.vue b/src/components/Sing/SequencerKeys.vue
index a827ab0746..7784d74d45 100644
--- a/src/components/Sing/SequencerKeys.vue
+++ b/src/components/Sing/SequencerKeys.vue
@@ -220,6 +220,7 @@ onUnmounted(() => {
 }
 
 .pitchname {
+  font-weight: 500;
   fill: var(--scheme-color-sing-piano-key-black);
 }
 </style>
diff --git a/src/components/Sing/SequencerLyricInput.vue b/src/components/Sing/SequencerLyricInput.vue
index 200d0ca78e..e9b39bd62a 100644
--- a/src/components/Sing/SequencerLyricInput.vue
+++ b/src/components/Sing/SequencerLyricInput.vue
@@ -111,25 +111,26 @@ watch(
 
 .lyric-input-container {
   position: absolute;
-  top: 0;
-  width: auto;
+  top: -2px;
+  left: -2px;
 }
 
 .lyric-input {
+  display: inline-block;
   font-weight: 500;
   font-size: 16px;
-  background-color: oklch(from var(--scheme-color-background) l c h / 0.92);
-  backdrop-filter: blur(2px);
+  box-sizing: border-box;
+  background-color: oklch(from var(--scheme-color-background) l c h / 0.88);
+  backdrop-filter: blur(1px);
   color: var(--scheme-color-on-surface);
-  border: 1px solid var(--scheme-color-primary);
-  outline: 2px solid oklch(from var(--scheme-color-primary) l c h / 0.92);
-  border-radius: 4px;
-  border: 0;
+  outline-offset: 1px;
+  border: 1px solid var(--scheme-color-inverse-surface);
   box-shadow:
-    0 4px 6px oklch(from var(--scheme-color-scrim) l c h / 0.1),
-    0 1px 3px oklch(from var(--scheme-color-scrim) l c h / 0.8);
+    oklch(from var(--scheme-color-scrim) l c h / 0.19) 0px 8px 20px,
+    oklch(from var(--scheme-color-scrim) l c h / 0.23) 0px 6px 6px;
+  outline: 0;
+  border-radius: 4px;
   padding: 0 4px;
-  width: 7ch;
-  box-sizing: border-box;
+  width: 10ch;
 }
 </style>
diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
index bb24d35068..dd668fd99b 100644
--- a/src/components/Sing/SequencerNote.vue
+++ b/src/components/Sing/SequencerNote.vue
@@ -235,14 +235,24 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     position: fixed;
     left: 2px;
     bottom: 0;
-    color: var(--scheme-color-on-secondary-fixed);
+    color: var(--scheme-color-sing-on-note-bar-container);
     font-size: 1rem;
     font-weight: 400;
     letter-spacing: -0.1em;
     white-space: nowrap;
     pointer-events: none;
     background: transparent;
-    transition: font-size 0.2s ease;
+    text-shadow:
+      -1px -1px 0 var(--scheme-color-sing-note-bar-container),
+      1px -1px 0 var(--scheme-color-sing-note-bar-container),
+      -1px 1px 0 var(--scheme-color-sing-note-bar-container),
+      1px 1px 0 var(--scheme-color-sing-note-bar-container),
+      0 -1px 0 var(--scheme-color-sing-note-bar-container),
+      0 1px 0 var(--scheme-color-sing-note-bar-container),
+      -1px 0 0 var(--scheme-color-sing-note-bar-container),
+      1px 0 0 var(--scheme-color-sing-note-bar-container);
+    // アンチエイリアス
+    -webkit-font-smoothing: subpixel-antialiased;
   }
 
   .note-bar {
@@ -251,7 +261,7 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     width: calc(100% + 1px);
     height: 100%;
     background-color: var(--scheme-color-sing-note-bar-container);
-    border: 1px solid var(--scheme-color-secondary-fixed-dim);
+    border: 1px solid var(--scheme-color-sing-note-bar-outline);
     border-radius: 4px;
   }
 
@@ -264,11 +274,6 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     min-width: 4px;
     max-width: 8px;
     height: 100%;
-
-    &:hover {
-      // FIXME: hoverだとカーソル位置によって適用されないので、プレビュー中に明示的にクラス指定する
-      background-color: var(--scheme-color-secondary-fixed-dim);
-    }
   }
 
   .note-right-edge {
@@ -282,39 +287,58 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     height: 100%;
 
     &:hover {
-      // FIXME: hoverだとカーソル位置によって適用されないので、プレビュー中に明示的にクラス指定する
-      background-color: var(--scheme-color-secondary-fixed-dim);
+      background-color: var(--scheme-color-sing-note-bar-outline);
     }
   }
 
   &.selected-or-preview {
     .note-bar {
-      background-color: var(--scheme-color-primary-fixed);
-      border-color: var(--scheme-color-primary-fixed-dim);
+      background-color: var(--scheme-color-sing-note-bar-selected-container);
+      border-color: var(--scheme-color-sing-note-bar-selected-outline);
+      border-width: 1px;
+      outline: 1px solid
+        var(--scheme-color-sing-note-bar-selected-outline-outer);
+      outline-offset: 1px;
     }
 
     .note-lyric {
-      color: var(--scheme-color-on-primary-fixed);
+      color: var(--scheme-color-sing-on-note-bar-selected-container);
+      text-shadow:
+        -1px -1px 0 var(--scheme-color-sing-note-bar-selected-container),
+        1px -1px 0 var(--scheme-color-sing-note-bar-selected-container),
+        -1px 1px 0 var(--scheme-color-sing-note-bar-selected-container),
+        1px 1px 0 var(--scheme-color-sing-note-bar-selected-container),
+        0 -1px 0 var(--scheme-color-sing-note-bar-selected-container),
+        0 1px 0 var(--scheme-color-sing-note-bar-selected-container),
+        -1px 0 0 var(--scheme-color-sing-note-bar-selected-container),
+        1px 0 0 var(--scheme-color-sing-note-bar-selected-container);
     }
 
     .note-right-edge:hover,
     .note-left-edge:hover {
-      background-color: var(--scheme-color-primary-fixed-dim);
+      background-color: var(--scheme-color-sing-note-bar-selected-outline);
     }
   }
 
   &.preview-lyric {
     .note-bar {
-      background-color: oklch(
-        from var(--scheme-color-primary-fixed) l c h / 0.8
-      );
-      outline: 1px solid
-        oklch(from var(--scheme-color-primary-fixed-dim) l c h / 0.56);
+      background-color: var(--scheme-color-sing-note-bar-preview-container);
+      border-color: var(--scheme-color-sing-note-bar-preview-outline);
+      outline: 1px solid var(--scheme-color-sing-note-bar-preview-outline-outer);
       outline-offset: 1px;
     }
 
     .note-lyric {
       opacity: 0.38;
+      text-shadow:
+        -1px -1px 0 var(--scheme-color-sing-note-bar-preview-container),
+        1px -1px 0 var(--scheme-color-sing-note-bar-preview-container),
+        -1px 1px 0 var(--scheme-color-sing-note-bar-preview-container),
+        1px 1px 0 var(--scheme-color-sing-note-bar-preview-container),
+        0 -1px 0 var(--scheme-color-sing-note-bar-preview-container),
+        0 1px 0 var(--scheme-color-sing-note-bar-preview-container),
+        -1px 0 0 var(--scheme-color-sing-note-bar-preview-container),
+        1px 0 0 var(--scheme-color-sing-note-bar-preview-container);
     }
   }
 
@@ -323,6 +347,7 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     .note-bar {
       background-color: var(--scheme-color-surface-variant);
       border-color: var(--scheme-color-error);
+      outline-color: var(--scheme-color-error-container);
     }
 
     .note-right-edge:hover,
@@ -331,15 +356,22 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     }
 
     .note-lyric {
-      color: var(--scheme-color-on-surface-variant);
+      color: var(--scheme-color-on-error-container);
       opacity: 0.38;
       text-shadow: none;
     }
 
-    &.selected-or-preview {
+    &.selected-or-preview,
+    &:active {
       .note-bar {
         background-color: var(--scheme-color-error-container);
         border-color: var(--scheme-color-error);
+        outline-color: var(--scheme-color-error);
+      }
+
+      .note-lyric {
+        color: var(--scheme-color-on-error-container);
+        text-shadow: none;
       }
     }
   }
@@ -348,12 +380,14 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     .note-bar {
       background-color: var(--scheme-color-surface-variant);
       border-color: var(--scheme-color-outline-variant);
-      opacity: 0.38;
+      outline: none;
+      opacity: 0.8;
     }
 
     .note-lyric {
       color: var(--scheme-color-on-surface);
-      opacity: 0.72;
+      opacity: 0.8;
+      text-shadow: none;
     }
 
     .note-right-edge:hover,
@@ -364,8 +398,14 @@ const onLeftEdgeMouseDown = (event: MouseEvent) => {
     &.overlapping,
     &.invalid-phrase {
       .note-bar {
-        background-color: var(--scheme-color-error-container);
+        background: var(--scheme-color-surface-variant);
         border-color: var(--scheme-color-error);
+        outline: none;
+      }
+
+      .note-lyric {
+        color: var(--scheme-color-error);
+        text-shadow: none;
       }
     }
   }
diff --git a/src/components/Sing/SequencerPhraseIndicator.vue b/src/components/Sing/SequencerPhraseIndicator.vue
index 44727e7630..e84bdc8db3 100644
--- a/src/components/Sing/SequencerPhraseIndicator.vue
+++ b/src/components/Sing/SequencerPhraseIndicator.vue
@@ -44,16 +44,16 @@ const className = computed(() => {
 }
 
 .waiting-to-be-rendered {
-  background-color: var(--scheme-color-background);
-  background-image: linear-gradient(
-    to right,
-    --scheme-color-primary-fixed-dim,
-    --scheme-color-primary-fixed-dim
+  background-color: color-mix(
+    in oklch,
+    var(--scheme-color-secondary-fixed-dim) 70%,
+    var(--scheme-color-background)
   );
+  /*
   @include tint-if-in-other-track(
     "background-color",
     color-mix(in srgb, colors.$primary 80%, colors.$background)
-  );
+  ); */
 }
 
 .now-rendering {
diff --git a/src/components/Sing/SequencerRuler.vue b/src/components/Sing/SequencerRuler.vue
index fb4243d578..bbeedf19bd 100644
--- a/src/components/Sing/SequencerRuler.vue
+++ b/src/components/Sing/SequencerRuler.vue
@@ -198,7 +198,7 @@ onUnmounted(() => {
 @use "@/styles/colors" as colors;
 
 .sequencer-ruler {
-  background: var(--scheme-color-surface-container-highest);
+  background: var(--scheme-color-sing-ruler-surface);
   height: 40px;
   position: relative;
   overflow: hidden;
@@ -216,6 +216,7 @@ onUnmounted(() => {
 }
 
 .sequencer-ruler-measure-number {
+  font-weight: 500;
   fill: var(--scheme-color-on-surface-variant);
 }
 
diff --git a/src/components/Sing/SequencerShadowNote.vue b/src/components/Sing/SequencerShadowNote.vue
index 77314cde5e..891dae3eda 100644
--- a/src/components/Sing/SequencerShadowNote.vue
+++ b/src/components/Sing/SequencerShadowNote.vue
@@ -57,16 +57,23 @@ const width = computed(() => {
   position: absolute;
   top: 0;
   left: 0;
-  pointer-events: none;
+  //pointer-events: none;
+
+  &:hover {
+    .shadow-line {
+      opacity: 0.5;
+    }
+  }
 
   .shadow-line {
+    border-radius: 1px;
     position: absolute;
     top: 50%;
     left: 0;
     width: 100%;
     height: 2px;
     transform: translateY(-50%);
-    background-color: var(--scheme-color-sing-grid-octave-line);
+    background-color: var(--scheme-color-sing-shadow-note);
   }
 }
 </style>
diff --git a/src/components/Sing/ToolBar/EditTargetSwicher.vue b/src/components/Sing/ToolBar/EditTargetSwicher.vue
index c15bc539c0..7acd50861f 100644
--- a/src/components/Sing/ToolBar/EditTargetSwicher.vue
+++ b/src/components/Sing/ToolBar/EditTargetSwicher.vue
@@ -58,19 +58,20 @@ const handleKeyDown = (event: KeyboardEvent) => {
 
 <style scoped lang="scss">
 .edit-target-switcher {
-  background: var(--scheme-color-surface-container-highest);
-  border-radius: 28px;
-  padding: 4px;
+  height: 40px;
+  background: var(--scheme-color-surface-container-lowest);
+  border-radius: 20px;
+  padding: 2px;
 }
 
 .segment-switch {
   color: var(--scheme-color-on-surface-variant);
-  height: 40px;
-  min-width: 40px;
-  border-radius: 20px !important;
+  height: 36px;
+  min-width: 36px;
+  border-radius: 18px !important;
 
   &.active {
-    background: var(--scheme-color-secondary-container);
+    background: var(--scheme-color-surface-container-highest);
     color: var(--scheme-color-primary);
   }
 }
diff --git a/src/components/Sing/ToolBar/ToolBar.vue b/src/components/Sing/ToolBar/ToolBar.vue
index 828d129b04..3665062c21 100644
--- a/src/components/Sing/ToolBar/ToolBar.vue
+++ b/src/components/Sing/ToolBar/ToolBar.vue
@@ -14,6 +14,7 @@
       <div class="sing-adjustment">
         <QInput
           type="number"
+          dense
           :modelValue="keyRangeAdjustmentInputBuffer"
           label="音域"
           hideBottomSpace
@@ -24,6 +25,7 @@
         />
         <QInput
           type="number"
+          dense
           :modelValue="volumeRangeAdjustmentInputBuffer"
           label="声量"
           hideBottomSpace
@@ -36,6 +38,7 @@
       <QInput
         type="number"
         :modelValue="bpmInputBuffer"
+        dense
         hideBottomSpace
         outlined
         unelevated
@@ -47,6 +50,7 @@
       />
       <QField
         hideBottomSpace
+        dense
         class="sing-time-signature-field"
         label="拍子"
         stackLabel
@@ -59,6 +63,7 @@
               :options="beatsOptions"
               hideBottomSpace
               hideDropdownIcon
+              dense
               userInputs
               unelevated
               optionsDense
@@ -73,6 +78,7 @@
               :options="beatTypeOptions"
               hideBottomSpace
               hideDropdownIcon
+              dense
               userInputs
               unelevated
               optionsDense
@@ -139,10 +145,11 @@
         <QIcon name="redo" size="24px" />
       </QBtn>
       <QIcon name="volume_up" size="xs" class="sing-volume-icon" />
-      <QSlider v-model.number="volume" class="sing-volume" />
+      <QSlider v-model.number="volume" trackSize="2px" class="sing-volume" />
       <QSelect
         v-model="snapTypeSelectModel"
         :options="snapTypeSelectOptions"
+        dense
         outlined
         hideBottomSpace
         optionsDense
@@ -487,7 +494,7 @@ onUnmounted(() => {
 :deep(.q-field__native) {
   color: var(--scheme-color-on-surface);
   text-align: center;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 500;
 }
 
@@ -496,9 +503,14 @@ onUnmounted(() => {
   border: 1px solid var(--scheme-color-outline-variant);
 }
 
+:deep(.q-field--outlined .q-field__control) {
+  padding-right: 8px;
+  padding-left: 8px;
+}
+
 // ラベルのフォントサイズを小さくする()
 :deep(.q-input .q-field__label, .q-select .q-field__label) {
-  font-size: 14px;
+  font-size: 12px;
   color: var(--scheme-color-on-surface-variant);
 }
 
@@ -546,8 +558,9 @@ onUnmounted(() => {
   display: flex;
   justify-content: space-between;
   min-height: 64px;
-  padding: 0 4px 0 4px;
+  padding: 8px 8px 8px 0;
   width: 100%;
+  letter-spacing: 0.01em;
 }
 
 .sing-configs {
@@ -564,7 +577,7 @@ onUnmounted(() => {
 }
 
 .sing-adjustment {
-  height: 56px;
+  height: 40px;
   border: 1px solid var(--scheme-color-outline-variant);
   border-left: 0;
   border-radius: 0 4px 4px 0;
@@ -578,8 +591,7 @@ onUnmounted(() => {
   width: 40px;
 
   :deep(.q-field__control) {
-    padding: 0 2px;
-    height: 56px;
+    height: 40px;
 
     &:before {
       border: 1px solid transparent;
@@ -597,7 +609,7 @@ onUnmounted(() => {
 
   :deep(.q-field__control) {
     padding: 0 2px;
-    height: 56px;
+    height: 40px;
 
     &:before {
       border: 1px solid transparent;
@@ -613,28 +625,21 @@ onUnmounted(() => {
 .sing-tempo {
   margin-left: 16px;
   margin-right: 4px;
-  width: 72px;
-}
-
-.sing-tempo-icon {
-  padding-right: 0px;
-  position: relative;
-  top: 4px;
-  left: 0;
+  width: 60px;
 }
 
 .sing-time-signature-field {
-  height: 56px;
+  height: 40px;
 
   :deep(.q-field__control) {
-    height: 56px;
-    padding: 0 4px;
+    height: 40px;
+    padding: 0 2px;
   }
 
   :deep(.q-field__label) {
-    font-size: 10px;
-    top: 7px;
-    margin-left: 8px;
+    font-size: 9px;
+    top: 2px;
+    margin-left: 6px;
     transform: translateY(0) !important;
     color: var(--scheme-color-on-surface-variant);
     opacity: 0.9;
@@ -655,21 +660,21 @@ onUnmounted(() => {
 
 .sing-time-signature.beats {
   :deep(.q-field__control) {
-    padding: 0 4px 0 12px;
+    padding: 0 4px 0 8px;
   }
 }
 
 .sing-time-signature.beat-type {
   :deep(.q-field__control) {
-    padding: 0 12px 0 4px;
+    padding: 0 8px 0 4px;
   }
 }
 
 .sing-beats {
   display: flex;
   align-items: center;
-  height: 56px;
-  margin-top: -24px;
+  height: 40px;
+  margin-top: -14px;
 
   &:deep(.q-field__control:before) {
     border: 1px solid transparent;
@@ -689,7 +694,7 @@ onUnmounted(() => {
   font-weight: 500;
   color: var(--scheme-color-on-surface-variant);
   pointer-events: none;
-  transform: translateY(8px);
+  transform: translateY(6px);
   opacity: 0.56;
 }
 
@@ -767,28 +772,30 @@ onUnmounted(() => {
   width: 72px;
 
   :deep(.q-slider__track) {
-    background: var(--scheme-color-surface-container);
-    color: var(--scheme-color-secondary-fixed);
+    background: var(--scheme-color-outline-variant);
+    color: var(--scheme-color-secondary);
   }
 
   :deep(.q-slider__thumb) {
-    color: var(--scheme-color-secondary-fixed);
+    color: var(--scheme-color-secondary);
   }
 
   &:hover {
     :deep(.q-slider__track) {
-      color: var(--scheme-color-primary-fixed-dim);
+      color: var(--scheme-color-primary);
     }
     :deep(.q-slider__thumb) {
-      color: var(--scheme-color-primary-fixed-dim);
+      color: var(--scheme-color-primary);
     }
   }
 }
 
 .sing-snap {
-  min-width: 80px;
+  min-width: 72px;
+  height: 40px;
 
   &:deep(.q-field__control:before) {
+    height: 40px;
     border: 1px solid var(--scheme-color-outline-variant);
   }
 
@@ -797,7 +804,7 @@ onUnmounted(() => {
   }
 
   :deep(.q-field__label) {
-    font-size: 14px;
+    font-size: 12px;
     color: var(--scheme-color-on-surface-variant);
   }
 }
diff --git a/src/composables/useColorScheme.ts b/src/composables/useColorScheme.ts
index 789a0f6edb..fba26f69fc 100644
--- a/src/composables/useColorScheme.ts
+++ b/src/composables/useColorScheme.ts
@@ -26,6 +26,13 @@ export function useColorScheme() {
     return store.state.colorSchemeSetting.isDarkMode || false;
   });
 
+  const setDarkMode = (mode: boolean = false): void => {
+    store.dispatch("SET_THEME_SETTING", {
+      currentTheme: mode ? "Default" : "Dark",
+    });
+    store.dispatch("INITIALIZE_COLOR_SCHEME");
+  };
+
   const setColorScheme = async (colorScheme: ColorScheme): Promise<void> => {
     await store.dispatch("SET_COLOR_SCHEME", {
       colorScheme,
@@ -145,5 +152,6 @@ export function useColorScheme() {
     removeCustomColor,
     getColorFromRole,
     initializeColorScheme,
+    setDarkMode,
   };
 }
diff --git a/src/sing/colorScheme/algorithm.ts b/src/sing/colorScheme/algorithm.ts
index 4966d2b90f..989013a406 100644
--- a/src/sing/colorScheme/algorithm.ts
+++ b/src/sing/colorScheme/algorithm.ts
@@ -26,6 +26,7 @@ export const LtoLr = (L: number): number => {
  * @param sourceColor : OklchColor - 基準となるOKLCHカラー
  * @param targetRole : ColorRole | string - ターゲットのロール
  * @param shade : number - 明度レベル
+ * @param passthrough : boolean - 適用の可否
  * @returns OklchColor - 生成されたOKLCHカラー
  */
 export const defaultAlgorithm: ColorAlgorithm = (
@@ -33,6 +34,7 @@ export const defaultAlgorithm: ColorAlgorithm = (
   sourceColor: OklchColor,
   targetRole: ColorRole | string,
   shade: number,
+  passthrough: boolean = false,
 ): OklchColor => {
   // 入力値の検証
   if (shade < 0 || shade > 1) {
@@ -45,16 +47,21 @@ export const defaultAlgorithm: ColorAlgorithm = (
   // OKLCHのL値を相対明度Lr値に変換
   const targetL = LtoLr(shade);
 
+  // パススルー
+  if (passthrough) {
+    return [targetL, sourceColor[1], sourceColor[2]];
+  }
+
   // 初期設定
   const [, c, h] = sourceColor;
   let targetC: number;
   let targetH: number;
-  const maxC = 0.3; // 最大chroma
-  const minPrimaryC = 0.11; // 最小プライマリchroma
+  const maxC = 0.2; // 最大chroma
+  const minPrimaryC = 0.085; // 最小プライマリchroma
 
   // プライマリもしくはプライマリ互換カラー
   if (targetRole === "primary") {
-    targetC = Math.min(minPrimaryC, c);
+    targetC = Math.max(c, minPrimaryC);
     targetH = h;
     return [targetL, targetC, targetH];
   }
@@ -77,23 +84,23 @@ export const defaultAlgorithm: ColorAlgorithm = (
   const defaultC = Math.max(c, minPrimaryC);
   switch (targetRole) {
     case "secondary":
-      targetC = defaultC / 3;
+      targetC = Math.max(defaultC / 2, 0.01);
       targetH = h;
       break;
     case "tertiary":
       targetC = defaultC;
-      targetH = (h - 30 + 360) % 360;
+      targetH = (h - 60 + 360) % 360;
       break;
     case "neutral":
       targetC = 0.0;
-      targetH = h;
+      targetH = (h - 90 + 360) % 360;
       break;
     case "neutralVariant":
       targetC = 0.01;
       targetH = h;
       break;
     case "error":
-      targetC = Math.min(defaultC * 1.2, maxC);
+      targetC = Math.min(defaultC, maxC);
       targetH = 30;
       break;
     default:
@@ -110,10 +117,11 @@ export const customAlgorithm: ColorAlgorithm = (
   sourceColor: OklchColor,
   targetRole: ColorRole | string,
   shade: number,
+  passthrough: boolean = false,
 ): OklchColor => {
   // この例では単純化のためdefaultAlgorithmと同じ実装を使用
   // eg: Monochrome / Vibrant...
-  return defaultAlgorithm(config, sourceColor, targetRole, shade);
+  return defaultAlgorithm(config, sourceColor, targetRole, shade, passthrough);
 };
 
 export const algorithms: Record<string, ColorAlgorithm> = {
diff --git a/src/sing/colorScheme/constants.ts b/src/sing/colorScheme/constants.ts
index 9fd64df77b..8ab21c0673 100644
--- a/src/sing/colorScheme/constants.ts
+++ b/src/sing/colorScheme/constants.ts
@@ -278,31 +278,31 @@ export const DEFINED_REF_COLOR_ROLES: {
   {
     name: "surfaceContainerLowest",
     role: "neutral",
-    lightShade: 1.0,
+    lightShade: 0.88,
     darkShade: 0.04,
   },
   {
     name: "surfaceContainerLow",
     role: "neutral",
-    lightShade: 0.96,
+    lightShade: 0.9,
     darkShade: 0.1,
   },
   {
     name: "surfaceContainer",
     role: "neutral",
-    lightShade: 0.94,
+    lightShade: 0.95,
     darkShade: 0.12,
   },
   {
     name: "surfaceContainerHigh",
     role: "neutral",
-    lightShade: 0.92,
+    lightShade: 0.97,
     darkShade: 0.17,
   },
   {
     name: "surfaceContainerHighest",
     role: "neutral",
-    lightShade: 0.9,
+    lightShade: 1,
     darkShade: 0.22,
   },
 ];
diff --git a/src/sing/colorScheme/core.ts b/src/sing/colorScheme/core.ts
index be5c05bd98..9d1dcada9d 100644
--- a/src/sing/colorScheme/core.ts
+++ b/src/sing/colorScheme/core.ts
@@ -33,8 +33,20 @@ export const generateColorSchemeFromConfig = (
   DEFINED_REF_COLOR_ROLES.forEach(({ name, role, lightShade, darkShade }) => {
     const sourceColor = getColorForRole(config, role);
     roles[name] = {
-      lightShade: algorithm(config, sourceColor, role, lightShade),
-      darkShade: algorithm(config, sourceColor, role, darkShade),
+      lightShade: algorithm(
+        config,
+        sourceColor,
+        role,
+        lightShade,
+        config.passthrough,
+      ),
+      darkShade: algorithm(
+        config,
+        sourceColor,
+        role,
+        darkShade,
+        config.passthrough,
+      ),
     };
     if (!palettes[role]) {
       palettes[role] = generatePalette(sourceColor, role, algorithm, config);
@@ -52,8 +64,20 @@ export const generateColorSchemeFromConfig = (
             customColor.name.slice(1);
         const roleName = name.replace(/\${customColorName}/g, roleStr);
         roles[roleName] = {
-          lightShade: algorithm(config, sourceColor, role, lightShade),
-          darkShade: algorithm(config, sourceColor, role, darkShade),
+          lightShade: algorithm(
+            config,
+            sourceColor,
+            role,
+            lightShade,
+            config.passthrough,
+          ),
+          darkShade: algorithm(
+            config,
+            sourceColor,
+            role,
+            darkShade,
+            config.passthrough,
+          ),
         };
       });
       palettes[customColor.name] = generatePalette(
@@ -74,12 +98,14 @@ export const generateColorSchemeFromConfig = (
         sourceColor,
         aliasColor.role,
         aliasColor.lightShade,
+        config.passthrough,
       ),
       darkShade: algorithm(
         config,
         sourceColor,
         aliasColor.role,
         aliasColor.darkShade,
+        config.passthrough,
       ),
     };
   });
diff --git a/src/sing/colorScheme/css.ts b/src/sing/colorScheme/css.ts
index 6796b1dee1..a1298616e0 100644
--- a/src/sing/colorScheme/css.ts
+++ b/src/sing/colorScheme/css.ts
@@ -1,4 +1,4 @@
-import { ColorScheme } from "@/sing/colorScheme/types";
+import { ColorScheme, OklchColor } from "@/sing/colorScheme/types";
 import { oklchToCssString } from "@/sing/colorScheme/util";
 
 /**
@@ -10,10 +10,10 @@ import { oklchToCssString } from "@/sing/colorScheme/util";
 export const cssVariablesFromColorScheme = (
   colorScheme: ColorScheme,
   options: {
-    withRoles?: boolean;
-    withPalette?: boolean;
-    format?: "oklch" | "hex";
-    prefix?: string;
+    withRoles?: boolean; // ロールカラーをCSS変数に含めるか
+    withPalette?: boolean; // パレットをCSS変数に含めるか
+    withFallback?: boolean; // フォールバック値を含めるか
+    prefix?: string; // CSS変数プレフィックス
   } = {},
 ): {
   light: Record<string, string>;
@@ -23,12 +23,20 @@ export const cssVariablesFromColorScheme = (
   const {
     withRoles = true,
     withPalette = false,
-    format = "oklch",
+    withFallback = false,
     prefix = "--scheme-color-",
   } = options;
 
-  const toKebabCase = (str: string) =>
-    str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  const formatColorVariable = (
+    keyName: string,
+    color: OklchColor,
+  ): [string, string] => {
+    const key = `${prefix}${keyName.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase()}`;
+    const oklchValue = oklchToCssString(color, "oklch");
+    const fallbackValue = oklchToCssString(color, "hex");
+    const value = withFallback ? `${oklchValue}, ${fallbackValue}` : oklchValue;
+    return [key, value];
+  };
 
   const light: Record<string, string> = {};
   const dark: Record<string, string> = {};
@@ -37,15 +45,16 @@ export const cssVariablesFromColorScheme = (
   // ロールカラー
   if (withRoles) {
     Object.entries(colorScheme.roles).forEach(([roleName, value]) => {
-      const kebabRoleName = toKebabCase(roleName);
-      light[`${prefix}${kebabRoleName}`] = oklchToCssString(
+      const [lightKey, lightValue] = formatColorVariable(
+        roleName,
         value.lightShade,
-        format,
       );
-      dark[`${prefix}${kebabRoleName}`] = oklchToCssString(
+      const [darkKey, darkValue] = formatColorVariable(
+        roleName,
         value.darkShade,
-        format,
       );
+      light[lightKey] = lightValue;
+      dark[darkKey] = darkValue;
     });
   }
 
@@ -55,8 +64,11 @@ export const cssVariablesFromColorScheme = (
       ([paletteName, paletteValue]) => {
         Object.entries(paletteValue.shades).forEach(([shade, color]) => {
           const shadeName = Math.round(Number(shade) * 100);
-          const key = `${prefix}${toKebabCase(paletteName)}-palette-${shadeName}`;
-          palette[key] = oklchToCssString(color, format);
+          const [key, value] = formatColorVariable(
+            `${paletteName}-palette-${shadeName}`,
+            color,
+          );
+          palette[key] = value;
         });
       },
     );
diff --git a/src/sing/colorScheme/types.ts b/src/sing/colorScheme/types.ts
index 39440c37ed..320b7f3a08 100644
--- a/src/sing/colorScheme/types.ts
+++ b/src/sing/colorScheme/types.ts
@@ -53,6 +53,7 @@ export interface ColorSchemeConfig {
   aliasColors?: AliasColorConfig[];
   algorithmName?: string;
   contrastPairs?: ColorContrastPair[];
+  passthrough?: boolean;
 }
 
 // カラースキーム
@@ -70,6 +71,7 @@ export type ColorAlgorithm = (
   sourceColor: OklchColor,
   targetRole: ColorRole | string,
   shade: number,
+  passthrough?: boolean,
 ) => OklchColor;
 
 // コントラストチェック用ペア
diff --git a/src/store/setting.ts b/src/store/setting.ts
index 1deb89fb92..dbcb668854 100644
--- a/src/store/setting.ts
+++ b/src/store/setting.ts
@@ -258,6 +258,8 @@ export const settingStore = createPartialStore<SettingStoreTypes>({
         return value.name == currentTheme;
       });
 
+      console.log(theme);
+
       if (theme == undefined) {
         throw Error("Theme not found");
       }