JEditorPaneのStyleSheetをLight・Darkテーマに合わせて切り替える

Total: 186, Today: 4, Yesterday: 2
Posted by at
Last-modified:

Summary

JEditorPaneのStyleSheetを起動時のシステムテーマがLightかDarkかなどに応じて切り替えるよう設定します。

Screenshot

screenshot

Download

Source Code Examples

public static void updateTheme(JEditorPane editor) {
  updateTheme(editor, isDarkMode());
}

public static void updateTheme(JEditorPane editor, boolean isDark) {
  EditorKit kit = editor.getEditorKit();
  HTMLEditorKit htmlEditorKit;
  if (kit instanceof HTMLEditorKit) {
    htmlEditorKit = (HTMLEditorKit) kit;
  } else {
    htmlEditorKit = new HTMLEditorKit();
  }
  if (isDark) {
    htmlEditorKit.setStyleSheet(makeDarkStyleSheet());
    editor.setBackground(new Color(0x1E_1F_22));
  } else {
    htmlEditorKit.setStyleSheet(makeLightStyleSheet());
    editor.setBackground(new Color(0xEE_EE_EE));
  }
  editor.setEditorKit(htmlEditorKit);
}

public static boolean isDarkMode() {
  boolean isDark;
  String os = System.getProperty("os.name").toLowerCase(Locale.ENGLISH);
  if (os.contains("windows")) {
    isDark = isWindowsDarkMode();
  } else if (os.contains("linux")) {
    isDark = isLinuxDarkMode();
  } else if (os.contains("mac")) {
    isDark = isMackDarkMode();
  } else {
    isDark = false;
  }
  return isDark;
}

public static String getProcessOutput(String... cmd)
      throws IOException, InterruptedException {
  ProcessBuilder builder = new ProcessBuilder(cmd);
  builder.redirectErrorStream(true);
  Process p = builder.start();
  String str;
  try (BufferedReader pr = new BufferedReader(
            new InputStreamReader(p.getInputStream()))) {
    str = pr.lines().collect(Collectors.joining(System.lineSeparator()));
  }
  return str;
}

public static boolean isWindowsDarkMode() {
  String[] cmd = {
      "powershell.exe",
      "Get-ItemPropertyValue",
      "-Path",
      "HKCU:\\SOFTWARE\\Microsoft\\Windows\\CurrentVersion\\Themes\\Personalize",
      "-Name",
      "AppsUseLightTheme;"
  };
  boolean isDarkMode;
  try {
    String str = getProcessOutput(cmd).trim();
    isDarkMode = Objects.equals("0", str);
  } catch (IOException | InterruptedException ex) {
    Logger.getGlobal().severe(ex::getMessage);
    isDarkMode = false;
  }
  return isDarkMode;
}

public static boolean isLinuxDarkMode() {
  Toolkit tk = Toolkit.getDefaultToolkit();
  Object theme = tk.getDesktopProperty("gnome.Net/ThemeName");
  return Objects.toString(theme).contains("dark");
}

public static boolean isMackDarkMode() {
  return false;
}

// https://raw.githack.com/google/code-prettify/master/styles/index.html
// Prettify Themes Gallery
public static StyleSheet makeLightStyleSheet() {
  StyleSheet styleSheet = new StyleSheet();
  styleSheet.addRule("pre{background:#eeeeee}");
  styleSheet.addRule(".str{color:#008800}");
  styleSheet.addRule(".kwd{color:#000088}");
  styleSheet.addRule(".com{color:#880000}");
  styleSheet.addRule(".typ{color:#660066}");
  styleSheet.addRule(".lit{color:#006666}");
  styleSheet.addRule(".pun{color:#666600}");
  styleSheet.addRule(".pln{color:#000000}");
  styleSheet.addRule(".tag{color:#000088}");
  styleSheet.addRule(".atn{color:#660066}");
  styleSheet.addRule(".atv{color:#008800}");
  styleSheet.addRule(".dec{color:#660066}");
  return styleSheet;
}

public static StyleSheet makeDarkStyleSheet() {
  StyleSheet styleSheet = new StyleSheet();
  styleSheet.addRule("pre{background:#1e1f22}");
  styleSheet.addRule(".str{color:#ffa0a0}");
  styleSheet.addRule(".kwd{color:#f0e68c;font-weight:bold}");
  styleSheet.addRule(".com{color:#87ceeb}");
  styleSheet.addRule(".typ{color:#98fb98}");
  styleSheet.addRule(".lit{color:#cd5c5c}");
  styleSheet.addRule(".pun{color:#ffffff}");
  styleSheet.addRule(".pln{color:#ffffff}");
  styleSheet.addRule(".tag{color:#f0e68c;font-weight:bold}");
  styleSheet.addRule(".atn{color:#bdb76b;font-weight:bold}");
  styleSheet.addRule(".atv{color:#ffa0a0}");
  styleSheet.addRule(".dec{color:#98fb98}");
  return styleSheet;
}
View in GitHub: Java, Kotlin

Explanation

  • OSがLinux(Ubuntu+gnome)の場合、設定の外観、スタイルをデフォルト(ライト)、ダークで切り替えると、Swingアプリ側でもそのイベントを取得可能
    • GTKLookAndFeelはデフォルトでスタイル切り替えが発生するとSynthThemeを切り替えて各コンポーネントの配色を変更している
    • 以下のように、Toolkitにデスクトッププロパティをgnome.Net/ThemeNameとしてPropertyChangeListenerを追加すればスタイル切り替えイベントを取得可能なので、テーマ名にdarkが含まれる場合はDarkテーマと判断し、StyleSheetの切り替えを実行 
      String key = "gnome.Net/ThemeName";
Toolkit.getDefaultToolkit().addPropertyChangeListener(key, e -> {
  if (sys.isSelected()) {
    boolean dark = Objects.toString(e.getNewValue()).contains("dark");
    ThemeUtils.updateTheme(editor, dark);
    loadHtml(editor);
  }
});

Reference

Comment