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!!

[sk-akiyama]

@yukawa
Hi, Long time no see!
Thanks to your previous guidance, I was able to enable dark mode support on Windows. However, I can’t seem to achieve the same on macOS.

Could you please let me know where I can modify the background color to support dark mode on macOS?

Thank you for your time and support!

[yukawa]

Hmm, I'm not familiar with mozc_renderer for macOS.

What I can easily point out is that renderer_style.proto doesn't look to define a background color for the window. So you probably need to directly set the background color in macOS-specific window management code somewhere in src/renderer/mac/. Note that src/renderer/win32/ is for Windows-specific code. Changing files there should not have any effect for macOS build.

[sk-akiyama]

@yukawa
Oh… I see…
I looked through the mac/ folder, but I still can’t figure out how to set the background color… (crying)
Do you have any tips or suggestions for solving this? I feel pretty lost here…

[yukawa]

I looked through the mac/ folder, but I still can’t figure out how to set the background color… (crying)
Do you have any tips or suggestions for solving this? I feel pretty lost here…

I haven't confirmed it, but maybe this is the place where the window background color is specified.

mozc/src/renderer/mac/RendererBaseWindow.mm

Line 65 in bc546b2

[window_ setBackgroundColor:NSColor.whiteColor];

[sk-akiyama]

@yukawa
Thank you for the advice!

I tried it, but it didn’t seem to change anything…
Is it difficult to pinpoint the exact location?😢

[yukawa]

Sorry, I'm currently traveling and don't have access to any macOS environment until Jan 7, 2025.

[sk-akiyama]

Thanks! Have a good travel!