Appearance UI

Appearance UI

KOKOTO WebChat 5.0.0 · Minecraft 1.18–26.2 · Java 17 baseline

7. Web UI Basics

Main interface areas include:

• Public message list
• Message composer
• Login and logout controls
• DM and group-chat menus
• Search
• Pinned messages
• Emoji picker
• File upload
• Notification settings
• Moderation and administration panels

Since 5.0.0, signed-in users can store multiple visual profiles with their KWC account, so Windows/mobile/etc. can use separate theme/font/size/color/opacity/shadow/language presets. The current browser remembers only the selected profile. Window position/size, minimized state and Web Push registration remain device-local. Signed-in keyword/notification choices are account-level; guests continue to use browser-local preferences. A browser-local notification inbox keeps recent notification-worthy events.

Default UI settings:

ui:
  language: "en-US"
  language-fallback: "en-US"
  time-zone: "local"
  theme: "system"
  opacity: 0.92
  resizable: true
  remember-window-size: true

Supported languages:

• en-US
• ko-KR
• ja-JP
• zh-CN

Supported themes:

• system
• dark
• light
• high-contrast

24. PWA and Picture-in-Picture

Standalone app naming:

frontend:
  standalone:
    app-name: "Web Chat"
    app-short-name: "Web Chat"

A previously installed Home Screen app may need to be reinstalled after a name change.

Picture-in-Picture:

ui:
  picture-in-picture:
    enabled: false

Browser and operating-system support is required. External window controls are owned by the browser/OS.

29. Web Fonts and Visual Configuration

web-fonts:
  enabled: false
  directory: "fonts"
  items: []

Example:

web-fonts:
  enabled: true
  items:
    - family: "Pretendard"
      file: "Pretendard.woff2"
      weight: 400
      style: "normal"

Supported extensions: WOFF2, WOFF, TTF, OTF.

Visual defaults:

ui:
  font-size: 13
  message-font-size: 13
  input-font-size: 13
  text-color: ""
  ui-text-color: ""
  input-background-color: ""
  text-shadow-mode: "auto"

Empty colors follow the selected theme.

30. Virtual Scrolling and Performance

ui:
  virtual-scroll:
    enabled: true
    overscan-screens: 0.75
    min-rendered-messages: 30
  history-preload:
    screens: 0.7
    min-px: 200

Virtual scrolling reduces browser rendering cost for long histories. Only the current message range and a small visible guard are kept in the DOM; child content types do not receive separate retention windows.

Resume refresh:

ui:
  resume-refresh:
    enabled: true
    min-interval-seconds: 5
    skip-unchanged: true

This refreshes missed messages after returning to a mobile or backgrounded page. Public-chat virtualization is content-type agnostic: images, video, audio, link previews, YouTube, and other iframes all use the same message-range and height-tracking rules.