VOICEVOX#1755 ダークモード対応(初期調整) (VOICEVOX#1796)

* VOICEVOX#1755 ダークモード対応(初期調整) * VOICEVOX#1755 表示調整 * VOICEVOX#1755 オクターブ表示の変更 * VOICEVOX#1755 スナップと拍で色を変える --------- Co-authored-by: Romot <[email protected]>
sigprogramming · Jan 31, 2024 · e4a9623 · e4a9623
1 parent 123e555
commit e4a9623
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 39 deletions.
diff --git a/public/themes/dark.json b/public/themes/dark.json
@@ -13,6 +13,12 @@
     "warning": "#F27483",
     "text-splitter-hover": "#394152",
     "active-point-focus": "#292F38",
-    "active-point-hover": "#272A2F"
+    "active-point-hover": "#272A2F",
+    "sequencer-whitekey-cell": "#393939",
+    "sequencer-blackkey-cell": "#2D2D2D",
+    "sequencer-main-divider": "#121212",
+    "sequencer-sub-divider": "#2C2C2C",
+    "sequencer-white-key": "#EEEEEE",
+    "sequencer-black-key": "#555555"
   }
 }
diff --git a/public/themes/default.json b/public/themes/default.json
@@ -13,6 +13,12 @@
     "warning": "#C10015",
     "text-splitter-hover": "#CCDDFF",
     "active-point-focus": "#E0EAFF",
-    "active-point-hover": "#EEF3FF"
+    "active-point-hover": "#EEF3FF",
+    "sequencer-whitekey-cell": "#F5F7F5",
+    "sequencer-blackkey-cell": "#EAECEA",
+    "sequencer-main-divider": "#B0B0B0",
+    "sequencer-sub-divider": "#CECECE",
+    "sequencer-white-key": "#FFFFFF",
+    "sequencer-black-key": "#333333"
   }
 }
diff --git a/src/components/Sing/ScoreSequencer.vue b/src/components/Sing/ScoreSequencer.vue
@@ -53,6 +53,17 @@
               :height="gridCellHeight"
               :class="`sequencer-grid-cell sequencer-grid-cell-${keyInfo.color}`"
             />
+            <template v-for="(keyInfo, index) in keyInfos" :key="index">
+              <line
+                v-if="keyInfo.pitch === 'C'"
+                x1="0"
+                :x2="gridCellWidth"
+                :y1="gridCellHeight * (index + 1)"
+                :y2="gridCellHeight * (index + 1)"
+                stroke-width="1"
+                class="sequencer-grid-octave-line"
+              />
+            </template>
           </pattern>
           <pattern
             id="sequencer-grid-measure"
@@ -70,14 +81,6 @@
               stroke-width="1"
               :class="`sequencer-grid-${n === 1 ? 'measure' : 'beat'}-line`"
             />
-            <line
-              :x1="beatWidth * beatsPerMeasure"
-              :x2="beatWidth * beatsPerMeasure"
-              y1="0"
-              y2="100%"
-              stroke-width="1"
-              class="sequencer-grid-measure-line"
-            />
           </pattern>
         </defs>
         <rect
@@ -1037,9 +1040,9 @@ onDeactivated(() => {
 .sequencer-corner {
   grid-row: 1;
   grid-column: 1;
-  background: #fff;
-  border-bottom: 1px solid #ccc;
-  border-right: 1px solid #ccc;
+  background: colors.$background;
+  border-top: 1px solid colors.$sequencer-sub-divider;
+  border-bottom: 1px solid colors.$sequencer-sub-divider;
 }
 
 .sequencer-ruler {
@@ -1067,26 +1070,35 @@ onDeactivated(() => {
 
 .sequencer-grid-cell {
   display: block;
-  stroke: #e8e8e8;
+  stroke: rgba(colors.$sequencer-sub-divider-rgb, 0.3);
   stroke-width: 1;
 }
 
+.sequencer-grid-octave-cell {
+  stroke: colors.$sequencer-main-divider;
+}
+
+.sequencer-grid-octave-line {
+  backface-visibility: hidden;
+  stroke: colors.$sequencer-main-divider;
+}
+
 .sequencer-grid-cell-white {
-  fill: #fff;
+  fill: colors.$sequencer-whitekey-cell;
 }
 
 .sequencer-grid-cell-black {
-  fill: #f2f2f2;
+  fill: colors.$sequencer-blackkey-cell;
 }
 
 .sequencer-grid-measure-line {
   backface-visibility: hidden;
-  stroke: #b0b0b0;
+  stroke: colors.$sequencer-main-divider;
 }
 
 .sequencer-grid-beat-line {
   backface-visibility: hidden;
-  stroke: #d0d0d0;
+  stroke: colors.$sequencer-sub-divider;
 }
 
 .sequencer-guideline {

diff --git a/src/components/Sing/SequencerKeys.vue b/src/components/Sing/SequencerKeys.vue
@@ -176,13 +176,12 @@ onUnmounted(() => {
 .sequencer-keys {
   backface-visibility: hidden;
   background: colors.$background;
-  border-right: 1px solid #ccc;
   overflow: hidden;
 }
 
 .white-key {
-  fill: #fff;
-  stroke: #ccc;
+  fill: colors.$sequencer-white-key;
+  stroke: colors.$sequencer-main-divider;
 }
 
 .white-key-being-pressed {
@@ -191,14 +190,14 @@ onUnmounted(() => {
 }
 
 .black-key {
-  fill: #5a5a5a;
+  fill: colors.$sequencer-black-key;
 }
 
 .black-key-being-pressed {
   fill: colors.$primary;
 }
 
 .pitchname {
-  fill: #555;
+  fill: colors.$sequencer-black-key;
 }
 </style>
diff --git a/src/components/Sing/SequencerNote.vue b/src/components/Sing/SequencerNote.vue
@@ -217,11 +217,11 @@ const onLyricInputBlur = () => {
   min-width: 2rem;
   padding: 0;
   background: transparent;
-  color: colors.$display-on-primary;
+  color: #121212;
   font-size: 1rem;
   font-weight: 700;
-  text-shadow: -1px -1px 0 #{colors.$surface}, 1px -1px 0 #{colors.$surface},
-    -1px 1px 0 #{colors.$surface}, 1px 1px 0 #{colors.$surface};
+  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff,
+    1px 1px 0 #fff;
   white-space: nowrap;
   pointer-events: none;
 }

diff --git a/src/components/Sing/SequencerPhraseIndicator.vue b/src/components/Sing/SequencerPhraseIndicator.vue
@@ -69,7 +69,7 @@ const className = computed(() => {
 }
 
 .could-not-render {
-  background-color: #ff6a64;
+  background-color: colors.$warning;
 }
 
 .playable {

diff --git a/src/components/Sing/SequencerRuler.vue b/src/components/Sing/SequencerRuler.vue
@@ -12,15 +12,15 @@
           <line
             x1="0"
             x2="0"
-            y1="0"
+            y1="20"
             :y2="height"
             stroke-width="1"
             class="sequencer-ruler-measure-line"
           />
           <line
             :x1="measureWidth"
             :x2="measureWidth"
-            y1="0"
+            y1="20"
             :y2="height"
             stroke-width="1"
             class="sequencer-ruler-measure-line"
@@ -30,9 +30,9 @@
           <text
             v-for="measureInfo in measureInfos"
             :key="measureInfo.number"
-            font-size="14"
-            :x="measureInfo.x + 6"
-            y="18"
+            font-size="12"
+            :x="measureInfo.x + 4"
+            y="20"
             class="sequencer-ruler-measure-number"
           >
             {{ measureInfo.number }}
@@ -204,7 +204,8 @@ onUnmounted(() => {
   top: 0;
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid #ccc;
+  border-top: 1px solid colors.$sequencer-sub-divider;
+  border-bottom: 1px solid colors.$sequencer-sub-divider;
 }
 
 .sequencer-ruler-playhead {
@@ -220,11 +221,11 @@ onUnmounted(() => {
 }
 
 .sequencer-ruler-measure-number {
-  fill: #555;
+  fill: colors.$display;
 }
 
 .sequencer-ruler-measure-line {
   backface-visibility: hidden;
-  stroke: #b0b0b0;
+  stroke: rgba(colors.$display-rgb, 0.3);
 }
 </style>
diff --git a/src/components/Sing/ToolBar.vue b/src/components/Sing/ToolBar.vue
@@ -347,22 +347,22 @@ onUnmounted(() => {
 }
 
 .character-style {
-  color: #999;
+  color: rgba(colors.$display-rgb, 0.6);
   font-size: 0.75rem;
   font-weight: bold;
   line-height: 1rem;
 }
 
 .character-menu-dropdown-icon {
-  color: rgba(0, 0, 0, 0.54);
+  color: rgba(colors.$display-rgb, 0.8);
   margin-left: 0.25rem;
 }
 .sing-toolbar {
-  border-top: 1px solid #ccc;
-  border-bottom: 1px solid #ccc;
+  background: colors.$sing-toolbar;
   align-items: center;
   display: flex;
   justify-content: space-between;
+  min-height: 56px;
   padding: 0 16px 0 0;
   width: 100%;
 }

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
@@ -28,10 +28,20 @@ $active-point-focus-rgb: var(--color-active-point-focus-rgb);
 $active-point-hover: var(--color-active-point-hover);
 $active-point-hover-rgb: var(--color-active-point-hover-rgb);
 
+$sequencer-whitekey-cell: var(--color-sequencer-whitekey-cell);
+$sequencer-blackkey-cell: var(--color-sequencer-blackkey-cell);
+$sequencer-main-divider: var(--color-sequencer-main-divider);
+$sequencer-main-divider-rgb: var(--color-sequencer-main-divider-rgb);
+$sequencer-sub-divider: var(--color-sequencer-sub-divider);
+$sequencer-sub-divider-rgb: var(--color-sequencer-sub-divider-rgb);
+$sequencer-white-key: var(--color-sequencer-white-key);
+$sequencer-black-key: var(--color-sequencer-black-key);
+
 // ダークテーマと通常テーマで変わる色
 :root {
   --color-toolbar: var(--color-primary);
   --color-toolbar-rgb: var(--color-primary-rgb);
+  --color-sing-toolbar: var(--color-background);
 
   --color-toolbar-button: var(--color-background);
   --color-toolbar-button-rgb: var(--color-background-rgb);
@@ -54,6 +64,7 @@ $active-point-hover-rgb: var(--color-active-point-hover-rgb);
 :root[is-dark-theme="true"] {
   --color-toolbar: var(--color-surface);
   --color-toolbar-rgb: var(--color-surface-rgb);
+  --color-sing-toolbar: var(--color-surface);
 
   --color-toolbar-button: var(--color-primary);
   --color-toolbar-button-rgb: var(--color-primary-rgb);
@@ -76,6 +87,8 @@ $active-point-hover-rgb: var(--color-active-point-hover-rgb);
 $toolbar: var(--color-toolbar);
 $toolbar-rgb: var(--color-toolbar-rgb);
 
+$sing-toolbar: var(--color-sing-toolbar);
+
 $toolbar-button: var(--color-toolbar-button);
 $toolbar-button-rgb: var(--color-toolbar-button-rgb);