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

VOICEVOX · Jan 30, 2024 · a8a62af · a8a62af
1 parent 23fe259
commit a8a62af
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 27 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-white-cell": "#393939",
+    "sequencer-black-cell": "#2D2D2D",
+    "sequencer-main-divider": "#121212",
+    "sequencer-sub-divider": "#333333",
+    "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-white-cell": "#F5F7F5",
+    "sequencer-black-cell": "#EAECEA",
+    "sequencer-main-divider": "#CCCCCC",
+    "sequencer-sub-divider": "#DDDDDD",
+    "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}`"
             />
+            <!-- オクターブのライン / オクターブのみに引きたい -->
+            <line
+              v-for="(keyInfo, index) in keyInfos"
+              :key="index"
+              x1="0"
+              :x2="gridCellWidth"
+              :y1="gridCellHeight * index"
+              :y2="gridCellHeight * index"
+              stroke-width="1"
+              :class="`sequencer-grid-p-line-${keyInfo.pitch.toLowerCase()}`"
+            />
           </pattern>
           <pattern
             id="sequencer-grid-measure"
@@ -1037,9 +1048,7 @@ onDeactivated(() => {
 .sequencer-corner {
   grid-row: 1;
   grid-column: 1;
-  background: #fff;
-  border-bottom: 1px solid #ccc;
-  border-right: 1px solid #ccc;
+  background: colors.$background;
 }
 
 .sequencer-ruler {
@@ -1067,26 +1076,35 @@ onDeactivated(() => {
 
 .sequencer-grid-cell {
   display: block;
-  stroke: #e8e8e8;
+  stroke: colors.$sequencer-sub-divider;
   stroke-width: 1;
 }
 
+.sequencer-grid-octave-cell {
+  stroke: colors.$sequencer-main-divider;
+}
+
 .sequencer-grid-cell-white {
-  fill: #fff;
+  fill: colors.$sequencer-white-cell;
 }
 
 .sequencer-grid-cell-black {
-  fill: #f2f2f2;
+  fill: colors.$sequencer-black-cell;
+}
+
+.sequencer-grid-pitch-line-c {
+  backface-visibility: hidden;
+  stroke: colors.$sequencer-main-divider;
 }
 
 .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
@@ -210,7 +210,7 @@ const onLyricInputBlur = () => {
   min-width: 20px;
   padding: 0 1px 2px;
   background: white;
-  color: colors.$display;
+  color: #000;
   border: 1px solid hsl(130, 0%, 91%);
   border-radius: 3px;
   font-size: 12px;

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,7 +30,7 @@
           <text
             v-for="measureInfo in measureInfos"
             :key="measureInfo.number"
-            font-size="14"
+            font-size="12"
             :x="measureInfo.x + 6"
             y="18"
             class="sequencer-ruler-measure-number"
@@ -204,7 +204,8 @@ onUnmounted(() => {
   top: 0;
   width: 100%;
   height: 100%;
-  border-bottom: 1px solid #ccc;
+  border-top: 1px solid colors.$surface;
+  border-bottom: 1px solid colors.$surface;
 }
 
 .sequencer-ruler-playhead {
@@ -220,11 +221,11 @@ onUnmounted(() => {
 }
 
 .sequencer-ruler-measure-number {
-  fill: #555;
+  fill: rgba(colors.$display-rgb, 0.6);
 }
 
 .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,19 +347,18 @@ 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;

diff --git a/src/styles/colors.scss b/src/styles/colors.scss
@@ -28,10 +28,18 @@ $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-white-cell: var(--color-sequencer-white-cell);
+$sequencer-black-cell: var(--color-sequencer-black-cell);
+$sequencer-main-divider: var(--color-sequencer-main-divider);
+$sequencer-sub-divider: var(--color-sequencer-sub-divider);
+$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 +62,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 +85,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);