[project-s] 鍵盤・シーケンサーのテーマ・ダークモード対応

[y-chan]

内容

題の通りです。現状は色の値が直に書き込まれているなど、様々な原因でダークモード時の表示がおかしくなります。
間に合いそうならプロトタイプリリースに間に合わせられると良さそうです。

現状は以下のような感じになっています。

鍵盤・シーケンサーについては、他ソフト(Synthesizer V Studio)だとこんな感じなので、参考にできるとよさそう。

鍵盤は明度を下げる感じ、シーケンサーは明度の差があるグレーを使えばある程度良いんじゃないかなと。
$backgroundをうまく使ってあげると良いかもしれないです。

とりあえず現状のコードを調べてみた感じ、以下の色がありそうでした(見落としあるかもです)

• 鍵盤

  • voicevox/src/components/Sing/SequencerKeys.vue

    Lines 200 to 203 in cd41c30

    	.white-key {
    	fill: #fff;
    	stroke: #ccc;
    	}

  • voicevox/src/components/Sing/SequencerKeys.vue

    Lines 210 to 212 in cd41c30

    	.black-key {
    	fill: #5a5a5a;
    	}

• 鍵盤上の文字

  • voicevox/src/components/Sing/SequencerKeys.vue

    Lines 218 to 220 in cd41c30

    	.pitchname {
    	fill: #555;
    	}

  • 
• レンダー失敗時の、シーケンスルーラー直下のバーの色
  • 警告色$warningに統一しても良いかも。

  • voicevox/src/components/Sing/SequencerPhraseIndicator.vue

    Lines 78 to 80 in cd41c30

    	.could-not-render {
    	background-color: #ff6a64;
    	}

  • 
• シーケンスルーラー(上の小節番号が振られているところ)
  • 文字色

  • voicevox/src/components/Sing/SequencerRuler.vue

    Lines 231 to 233 in cd41c30

    	.sequencer-ruler-measure-number {
    	fill: #555;
    	}

  • 
  • シーケンスルーラーの左端の隣の空間の枠線・背景色(背景色は$backgroundで良さそう)
    

    voicevox/src/components/Sing/ScoreSequencer.vue

    Lines 1083 to 1089 in cd41c30

    	.sequencer-corner {
    	grid-row: 1;
    	grid-column: 1;
    	background: #fff;
    	border-bottom: 1px solid #ccc;
    	border-right: 1px solid #ccc;
    	}

  • 
  • シーケンサーとの境界色

  • voicevox/src/components/Sing/SequencerRuler.vue

    Line 216 in cd41c30

    border-bottom: 1px solid #ccc;

  • 各セルの枠色

  • voicevox/src/components/Sing/ScoreSequencer.vue

    Line 1116 in cd41c30

    stroke: #e8e8e8;

  • 1ビート(1小節はデフォルトで4ビート)の表示線

  • voicevox/src/components/Sing/ScoreSequencer.vue

    Lines 1133 to 1136 in cd41c30

    	.sequencer-grid-beat-line {
    	backface-visibility: hidden;
    	stroke: #d0d0d0;
    	}

  • 1小節の表示線

  • voicevox/src/components/Sing/ScoreSequencer.vue

    Lines 1128 to 1131 in cd41c30

    	.sequencer-grid-measure-line {
    	backface-visibility: hidden;
    	stroke: #b0b0b0;
    	}

  • 各、空のセルの色(白と灰色)

  • voicevox/src/components/Sing/ScoreSequencer.vue

    Lines 1120 to 1122 in cd41c30

    	.sequencer-grid-cell-white {
    	fill: #fff;
    	}

  • voicevox/src/components/Sing/ScoreSequencer.vue

    Lines 1124 to 1126 in cd41c30

    	.sequencer-grid-cell-black {
    	fill: #f2f2f2;
    	}

  • 現在のマウスの位置に合わせて変化する表示線(ガイドライン)

  • voicevox/src/components/Sing/ScoreSequencer.vue

    Line 1143 in cd41c30

    background: hsl(130, 35%, 82%);

  • 
• ノート
  • 各ノートの枠線(ノート自体は$primaryになっている)

  • voicevox/src/components/Sing/SequencerNote.vue

    Line 245 in cd41c30

    border: 1px solid hsl(130, 35%, 86%);

  • ノートの選択時の色

  • voicevox/src/components/Sing/SequencerNote.vue

    Lines 205 to 207 in cd41c30

    	.note-bar {
    	background-color: hsl(33, 100%, 50%);
    	border-color: hsl(33, 100%, 78%);

  • ノートの選択時の歌詞表示部分の枠線の色

  • voicevox/src/components/Sing/SequencerNote.vue

    Lines 210 to 212 in cd41c30

    	.note-lyric {
    	border-color: hsl(33, 0%, 90%);
    	}

  • 同じ時間でノートが複数配置された場合の色(無効であることを示す色)

  • voicevox/src/components/Sing/SequencerNote.vue

    Lines 215 to 220 in cd41c30

    	&.overlapping {
    	.note-bar {
    	background-color: hsl(130, 35%, 85%);
    	border-color: hsl(130, 35%, 90%);
    	}
    	}

  • 
  • 歌詞表示部分の枠線と文字色・背景色

  • voicevox/src/components/Sing/SequencerNote.vue

    Lines 229 to 231 in cd41c30

    	background: white;
    	color: colors.$display;
    	border: 1px solid hsl(130, 0%, 91%);

  • ノートの歌詞入力時の枠線

  • voicevox/src/components/Sing/SequencerNote.vue

    Line 272 in cd41c30

    border: 1px solid hsl(33, 100%, 73%);

Pros 良くなる点

表示が良くなる

Cons 悪くなる点

特になし

実現方法

テーマの色を増やして、反映する

[romot-co]

以下に対応させるとよさそうでしょうか…？
#1756

(色定義でシーケンサ特有の部分について追加いたします)

新規定義が必要そうな部分

• ピアノ鍵盤部分のカラー: 白鍵 / 黒鍵
• ピアノ鍵盤部分 / シーケンサグリッド: ボーダー1(罫線の濃い方...小節およびオクターブ)
• ピアノ鍵盤部分 / シーケンサグリッド: ボーダー2(罫線の薄い方)
• シーケンサグリッド: 黒鍵にあたるエリアのカラー
• シーケンサグリッド: 白鍵にあたるエリアのカラー(いらないかも)
• ノート: ボーダー
• ノート: 選択中
• ノート: 無効(重なったノート)
• ノート: 入力時テキスト入力エリア

必要でなさそうなもの

• テキストカラー: 標準
• 警告: 標準

確認中

• テキストカラー: Medium-emphasis
• テキストカラー: Disabled

[y-chan]

新デザインについては、後で適用していくことになると思うので、一旦気にしないで良いと思います...!

現在CSS上で直に設定している値はデフォルトテーマにそのまま使っていいと思うので、ひとまず新規定義が必要そうな部分で挙げられている色をこちらに追加してもらうことになりそうです。

https://github.com/VOICEVOX/voicevox/blob/main/public/themes/default.json

その後、ダークテーマの色をいい感じに決めて以下に追加してもらえれば...!

https://github.com/VOICEVOX/voicevox/blob/main/public/themes/dark.json

以下の部分がいい感じに可変色を反映してくれているので

voicevox/src/store/setting.ts

Lines 246 to 304 in 2b2013b

	SET_THEME_SETTING: {
	mutation(
	state,
	{ currentTheme, themes }: { currentTheme: string; themes?: ThemeConf[] }
	) {
	if (themes) {
	state.themeSetting.availableThemes = themes;
	}
	state.themeSetting.currentTheme = currentTheme;
	},
	action({ state, commit }, { currentTheme }: { currentTheme: string }) {
	window.electron.theme(currentTheme);
	const theme = state.themeSetting.availableThemes.find((value) => {
	return value.name == currentTheme;
	});
	if (theme == undefined) {
	throw Error("Theme not found");
	}
	for (const key in theme.colors) {
	const color = theme.colors[key as ThemeColorType];
	const { r, g, b } = colors.hexToRgb(color);
	document.documentElement.style.setProperty(`--color-${key}`, color);
	document.documentElement.style.setProperty(
	`--color-${key}-rgb`,
	`${r}, ${g}, ${b}`
	);
	}
	const mixColors: ThemeColorType[][] = [
	["primary", "background"],
	["warning", "background"],
	];
	for (const [color1, color2] of mixColors) {
	const color1Rgb = colors.hexToRgb(theme.colors[color1]);
	const color2Rgb = colors.hexToRgb(theme.colors[color2]);
	const r = Math.trunc((color1Rgb.r + color2Rgb.r) / 2);
	const g = Math.trunc((color1Rgb.g + color2Rgb.g) / 2);
	const b = Math.trunc((color1Rgb.b + color2Rgb.b) / 2);
	const propertyName = `--color-mix-${color1}-${color2}-rgb`;
	const cssColor = `${r}, ${g}, ${b}`;
	document.documentElement.style.setProperty(propertyName, cssColor);
	}
	Dark.set(theme.isDark);
	setCssVar("primary", theme.colors["primary"]);
	setCssVar("warning", theme.colors["warning"]);
	document.documentElement.setAttribute(
	"is-dark-theme",
	theme.isDark ? "true" : "false"
	);
	window.electron.setNativeTheme(theme.isDark ? "dark" : "light");
	commit("SET_THEME_SETTING", {
	currentTheme: currentTheme,
	});
	},
	},

それを元に更にSCSSに書き込んで、使ってあげればとりあえずこのIssueは完了になるのかなと...!

https://github.com/VOICEVOX/voicevox/blob/main/src/styles/colors.scss

[romot-co]

@y-chan
ありがとうございます！こちら調整・修正いたします！