Dark Background Color of the Conversion Window in PC

[sk-akiyama]

Please implement the option to enable dark mode for the background color of conversion window in pc.
Many people are using dark mode on their systems lately, and I think it would be much easier on the eyes.

[yukawa]

We've been long aware of this feature request, but there remain several other super high priority projects that we want to focus our resources on first (e.g. build system migration from deprecated GYP to Bazel) because otherwise it would become much more difficult for us to keep maintaining this project. So, yes, we will be working on this feature in the future, but not now. See also #796 (comment) and #864 (comment).

In the meantime, if you want to modify the color scheme and build your own customized version of Mozc, you can start from looking into the following code locations.

mozc/src/renderer/renderer_style_handler.cc

Lines 77 to 189 in 4587e50

	void RendererStyleHandlerImpl::GetDefaultRendererStyle(RendererStyle *style) {
	double scale_factor_x = 1.0;
	double scale_factor_y = 1.0;
	RendererStyleHandler::GetDPIScalingFactor(&scale_factor_x, &scale_factor_y);
	// TODO(horo): Change to read from human-readable ASCII format protobuf.
	style->Clear();
	style->set_window_border(1); // non-scalable
	style->set_scrollbar_width(4 * scale_factor_x);
	style->set_row_rect_padding(0 * scale_factor_x);
	style->mutable_border_color()->set_r(0x96);
	style->mutable_border_color()->set_g(0x96);
	style->mutable_border_color()->set_b(0x96);
	RendererStyle::TextStyle *shortcutStyle = style->add_text_styles();
	shortcutStyle->set_font_size(14 * scale_factor_y);
	shortcutStyle->mutable_foreground_color()->set_r(0x77);
	shortcutStyle->mutable_foreground_color()->set_g(0x77);
	shortcutStyle->mutable_foreground_color()->set_b(0x77);
	shortcutStyle->mutable_background_color()->set_r(0xf3);
	shortcutStyle->mutable_background_color()->set_g(0xf4);
	shortcutStyle->mutable_background_color()->set_b(0xff);
	shortcutStyle->set_left_padding(8 * scale_factor_x);
	shortcutStyle->set_right_padding(8 * scale_factor_x);
	RendererStyle::TextStyle *gap1Style = style->add_text_styles();
	gap1Style->set_font_size(14 * scale_factor_y);
	RendererStyle::TextStyle *candidateStyle = style->add_text_styles();
	candidateStyle->set_font_size(14 * scale_factor_y);
	RendererStyle::TextStyle *descriptionStyle = style->add_text_styles();
	descriptionStyle->set_font_size(12 * scale_factor_y);
	descriptionStyle->mutable_foreground_color()->set_r(0x88);
	descriptionStyle->mutable_foreground_color()->set_g(0x88);
	descriptionStyle->mutable_foreground_color()->set_b(0x88);
	descriptionStyle->set_right_padding(8 * scale_factor_x);
	// We want to ensure that the candidate window is at least wide
	// enough to render "そのほかの文字種 " as a candidate.
	style->set_column_minimum_width_string("そのほかの文字種 ");
	style->mutable_footer_style()->set_font_size(14 * scale_factor_y);
	style->mutable_footer_style()->set_left_padding(4 * scale_factor_x);
	style->mutable_footer_style()->set_right_padding(4 * scale_factor_x);
	RendererStyle::TextStyle *footer_sub_label_style =
	style->mutable_footer_sub_label_style();
	footer_sub_label_style->set_font_size(10 * scale_factor_y);
	footer_sub_label_style->mutable_foreground_color()->set_r(167);
	footer_sub_label_style->mutable_foreground_color()->set_g(167);
	footer_sub_label_style->mutable_foreground_color()->set_b(167);
	footer_sub_label_style->set_left_padding(4 * scale_factor_x);
	footer_sub_label_style->set_right_padding(4 * scale_factor_x);
	RendererStyle::RGBAColor *color = style->add_footer_border_colors();
	color->set_r(96);
	color->set_r(96);
	color->set_r(96);
	style->mutable_footer_top_color()->set_r(0xff);
	style->mutable_footer_top_color()->set_g(0xff);
	style->mutable_footer_top_color()->set_b(0xff);
	style->mutable_footer_bottom_color()->set_r(0xee);
	style->mutable_footer_bottom_color()->set_g(0xee);
	style->mutable_footer_bottom_color()->set_b(0xee);
	style->set_logo_file_name("candidate_window_logo.tiff");
	style->mutable_focused_background_color()->set_r(0xd1);
	style->mutable_focused_background_color()->set_g(0xea);
	style->mutable_focused_background_color()->set_b(0xff);
	style->mutable_focused_border_color()->set_r(0x7f);
	style->mutable_focused_border_color()->set_g(0xac);
	style->mutable_focused_border_color()->set_b(0xdd);
	style->mutable_scrollbar_background_color()->set_r(0xe0);
	style->mutable_scrollbar_background_color()->set_g(0xe0);
	style->mutable_scrollbar_background_color()->set_b(0xe0);
	style->mutable_scrollbar_indicator_color()->set_r(0x75);
	style->mutable_scrollbar_indicator_color()->set_g(0x90);
	style->mutable_scrollbar_indicator_color()->set_b(0xb8);
	RendererStyle::InfolistStyle *infostyle = style->mutable_infolist_style();
	infostyle->set_caption_string("用例");
	infostyle->set_caption_height(20 * scale_factor_y);
	infostyle->set_caption_padding(1);
	infostyle->mutable_caption_style()->set_font_size(12 * scale_factor_y);
	infostyle->mutable_caption_style()->set_left_padding(2 * scale_factor_x);
	infostyle->mutable_caption_background_color()->set_r(0xec);
	infostyle->mutable_caption_background_color()->set_g(0xf0);
	infostyle->mutable_caption_background_color()->set_b(0xfa);
	infostyle->set_window_border(1); // non-scalable
	infostyle->set_row_rect_padding(2 * scale_factor_x);
	infostyle->set_window_width(300 * scale_factor_x);
	infostyle->mutable_title_style()->set_font_size(15 * scale_factor_y);
	infostyle->mutable_title_style()->set_left_padding(5 * scale_factor_x);
	infostyle->mutable_description_style()->set_font_size(12 * scale_factor_y);
	infostyle->mutable_description_style()->set_left_padding(15 * scale_factor_x);
	infostyle->mutable_border_color()->set_r(0x96);
	infostyle->mutable_border_color()->set_g(0x96);
	infostyle->mutable_border_color()->set_b(0x96);
	infostyle->mutable_focused_background_color()->set_r(0xd1);
	infostyle->mutable_focused_background_color()->set_g(0xea);
	infostyle->mutable_focused_background_color()->set_b(0xff);
	infostyle->mutable_focused_border_color()->set_r(0x7f);
	infostyle->mutable_focused_border_color()->set_g(0xac);
	infostyle->mutable_focused_border_color()->set_b(0xdd);
	}

mozc/src/renderer/win32/text_renderer.cc

Lines 70 to 112 in 4587e50

	COLORREF GetTextColor(TextRenderer::FONT_TYPE type) {
	switch (type) {
	case TextRenderer::FONTSET_SHORTCUT:
	return RGB(0x61, 0x61, 0x61);
	case TextRenderer::FONTSET_CANDIDATE:
	return RGB(0x00, 0x00, 0x00);
	case TextRenderer::FONTSET_DESCRIPTION:
	return RGB(0x88, 0x88, 0x88);
	case TextRenderer::FONTSET_FOOTER_INDEX:
	return RGB(0x4c, 0x4c, 0x4c);
	case TextRenderer::FONTSET_FOOTER_LABEL:
	return RGB(0x4c, 0x4c, 0x4c);
	case TextRenderer::FONTSET_FOOTER_SUBLABEL:
	return RGB(0xA7, 0xA7, 0xA7);
	default:
	break;
	}
	// TODO(horo): Not only infolist fonts but also candidate fonts
	// should be created from RendererStyle
	RendererStyle style;
	RendererStyleHandler::GetRendererStyle(&style);
	const auto &infostyle = style.infolist_style();
	switch (type) {
	case TextRenderer::FONTSET_INFOLIST_CAPTION:
	return RGB(infostyle.caption_style().foreground_color().r(),
	infostyle.caption_style().foreground_color().g(),
	infostyle.caption_style().foreground_color().b());
	case TextRenderer::FONTSET_INFOLIST_TITLE:
	return RGB(infostyle.title_style().foreground_color().r(),
	infostyle.title_style().foreground_color().g(),
	infostyle.title_style().foreground_color().b());
	case TextRenderer::FONTSET_INFOLIST_DESCRIPTION:
	return RGB(infostyle.description_style().foreground_color().r(),
	infostyle.description_style().foreground_color().g(),
	infostyle.description_style().foreground_color().b());
	default:
	break;
	}
	LOG(DFATAL) << "Unknown type: " << type;
	return RGB(0, 0, 0);
	}

[yukawa]

I tried the following build command based on this page, but encountered an error. Could you please provide assistance on how to resolve it?

Sorry, I have no idea too. In the meantime, I'd suggest using GitHub Actions to build Mozc as explained below.
https://github.com/google/mozc/blob/master/docs/build_mozc_in_windows.md#build-with-github-actions

[sk-akiyama]

OK! Thanks!!

[sk-akiyama]

@yukawa

Hi!
I was able to create an .msi file and install it since then!
And I was also able to change the color of the text. (I've set it to gray in the image.)
However, I still can't seem to change the background color...

Here's the forked repository:
https://github.com/sk-akiyama/mozc/commits/master/

Thank you for your help in finding a solution.

[yukawa]

However, I still can't seem to change the background color...

Perhaps you may need to edit the following lines to change the background color of the candidate window.

mozc/src/renderer/win32/candidate_window.cc

Lines 82 to 91 in 864c543

	// Color scheme
	const COLORREF kFrameColor = RGB(0x96, 0x96, 0x96);
	const COLORREF kShortcutBackgroundColor = RGB(0xf3, 0xf4, 0xff);
	const COLORREF kSelectedRowBackgroundColor = RGB(0xd1, 0xea, 0xff);
	const COLORREF kDefaultBackgroundColor = RGB(0xff, 0xff, 0xff);
	const COLORREF kSelectedRowFrameColor = RGB(0x7f, 0xac, 0xdd);
	const COLORREF kIndicatorBackgroundColor = RGB(0xe0, 0xe0, 0xe0);
	const COLORREF kIndicatorColor = RGB(0x75, 0x90, 0xb8);
	const COLORREF kFooterTopColor = RGB(0xff, 0xff, 0xff);
	const COLORREF kFooterBottomColor = RGB(0xee, 0xee, 0xee);

Also for indicator_window.

mozc/src/renderer/win32/indicator_window.cc

Lines 252 to 304 in 864c543

	void LoadSprite(int mode) {
	BalloonImage::BalloonImageInfo info;
	LOGFONT logfont = GetMessageBoxLogFont();
	info.label_font = mozc::win32::WideToUtf8(logfont.lfFaceName);
	info.frame_color = RGBColor(1, 122, 204);
	info.blur_color = RGBColor(1, 122, 204);
	info.rect_width = ceil(dpi_scaling_ * 45.0); // snap to pixel alignment
	info.rect_height = ceil(dpi_scaling_ * 45.0); // snap to pixel alignment
	info.corner_radius = dpi_scaling_ * 0.0;
	info.tail_height = dpi_scaling_ * 5.0;
	info.tail_width = dpi_scaling_ * 10.0;
	info.blur_sigma = dpi_scaling_ * 3.0;
	info.blur_alpha = 0.5;
	info.frame_thickness = dpi_scaling_ * 1.0;
	info.label_size = 13.0; // no need to be scaled.
	info.label_color = RGBColor(0, 0, 0);
	info.blur_offset_x = 0;
	info.blur_offset_y = 0;
	switch (mode) {
	case commands::DIRECT:
	info.blur_sigma = dpi_scaling_ * 0.0;
	info.frame_color = RGBColor(186, 186, 186);
	info.label_color = RGBColor(0, 0, 0);
	info.blur_sigma = dpi_scaling_ * 0.0;
	info.frame_thickness = dpi_scaling_ * 1.0;
	info.corner_radius = dpi_scaling_ * 0.0;
	info.blur_offset_x = 0;
	info.blur_offset_y = 0;
	info.label = "A";
	break;
	case commands::HIRAGANA:
	info.label = "あ";
	break;
	case commands::FULL_KATAKANA:
	info.label = "ア";
	break;
	case commands::HALF_ASCII:
	info.label = "_A";
	break;
	case commands::FULL_ASCII:
	info.label = "Ａ";
	break;
	case commands::HALF_KATAKANA:
	info.label = "_ｱ";
	break;
	}
	if (!info.label.empty()) {
	sprites_[mode].bitmap.reset(
	BalloonImage::Create(info, &sprites_[mode].offset));
	}
	}

[sk-akiyama]

@yukawa
Thank you!
I really appreciate it!!