theming

Theming

Bulti-in themes

There are several themes included within Kiwi IRC to cover a wide use basis.

Relaxed A modern theme suitable for general users that adapts its layout to suit the screen or widget size. The nick list and messages will resize themselves on small widgets or mobile screens.

Basic Very similar to the relaxed theme but much more light weight. The messages will be shown more like traditional IRC clients if you're used to desktop or terminal based IRC clients.

CLI A dark theme with a very simplistic view. It adapts its layout to suit the screen or widget size with an auto hiding nick list.

Creating a theme

Kiwi comes with a base CSS file that defines basic structure and common layouts. A Kiwi theme is simply a CSS file that is loaded on top of the base styles to add colours, layout adjustments, font formatting, etc.

Create a folder with your theme name within the client/assets/themes/ folder. In this new folder, create the following files:

• theme.json
• style.css

theme.json This JSON formatted file describes your theme and provides optional settings.

{
  "name": "My Theme",
  "thumbnail_colour": "#ff0000",
  "nick_lightness": 60
}

Options

• name The name of your theme. Appears in the users settings window
• thumbnail_colour The colour associated with your theme. Appeats in the users settings window
• nick_lightness Colours of nicknames are randomly generated but you may controll how light/dark they should be.

style.css

• As Kiwi may be integrated into an existing HTML document all styles are prefixed with the #kiwi selector
• The #kiwi element may have additional CSS classes depending on the users settings.
  • .narrow If the screen or widget is considered in a small area (nicklist hides)
  • .connected Kiwi is connected to the server. Is removed when disconnected
  • .timestamps Message timestamps have been enabled in the settings
  • .touch If we are on a touch screen enabled device
  • .chanlist_treeview The channel tabs should be displayed down the side rather than along the top

Theme developing tip: Using the /css command within Kiwi will reload all your CSS files without the need to reload your browser

Enabling your theme

Once you have created your theme you will most likely want to use it. You can enable your theme by adding its folder name into conf.client_themes at the bottom of your config.js file.

conf.client_themes = [
    'mytheme'
];