Creating A Theme: A Discussion & Guide
Creating a new theme involves a deep dive into various configuration settings and stylistic elements. This article aims to guide you through the process, providing a comprehensive overview of the necessary components and configurations, focusing on the creation of a unique and personalized theme. Understanding these elements is crucial for both beginners and experienced users looking to customize their environment.
Understanding the Theme Components
Before diving into the specifics, it's essential to understand the key components that make up a theme. These components include the overall style, configuration settings, and the various widgets that populate the user interface. A well-designed theme should have a cohesive style that is both aesthetically pleasing and functional. Let's explore these components in detail:
Theme Styles (CSS)
The foundation of any theme lies in its CSS (Cascading Style Sheets). Theme Styles dictate the visual appearance of the interface, including colors, fonts, spacing, and layout. In the provided CSS, several key settings are defined, such as the behavior of stylesheets and debugging options. Here’s a snippet:
watch_stylesheet: true
watch_config: true
debug: false
These settings control whether the stylesheet and configuration are actively monitored for changes (watch_stylesheet and watch_config), and whether debugging mode is enabled (debug). When creating a theme, you'll want to ensure watch_stylesheet and watch_config are set to true during development so that changes are reflected immediately. Debug mode can be enabled to help identify and resolve any issues.
Core Theme Configuration
The core configuration involves settings that dictate the behavior and appearance of the environment. This includes settings for window management, bars, and widgets. The provided configuration includes settings for Komorebi, a window manager, and YASB (Yet Another Status Bar), a status bar application. Let's look at the Komorebi configuration:
komorebi:
start_command: "komorebic start --whkd"
stop_command: "komorebic stop --whkd"
reload_command: "komorebic stop --whkd && komorebic start --whkd"
These commands define how Komorebi is started, stopped, and reloaded. Understanding these commands is vital for ensuring that your window management behaves as expected. For instance, the reload_command stops Komorebi and then restarts it, ensuring that any configuration changes are applied.
Primary Bar Configuration
The primary bar is a crucial element of the user interface, typically displayed at the top or bottom of the screen. Customizing the primary bar involves configuring its dimensions, padding, widgets, and visual effects. Here’s an example configuration:
bars:
primary-bar:
enabled: true
screens: ["*"]
class_name: "yasb-bar"
alignment:
position: "top"
center: true
blur_effect:
enabled: false
acrylic: false
dark_mode: false
round_corners: false
round_corners_type: "normal"
window_flags:
always_on_top: true
windows_app_bar: true
hide_on_fullscreen: true
dimensions:
width: "100%"
height: 40
padding:
top: 5
left: 2
bottom: 0
right: 2
widgets:
left: ["komorebi_workspaces","komorebi_active_layout","home","taskbar","active_window"]
center: ["weather","clock","media"]
right: ["notifications","systray","memory","cpu","disk","volume","microphone"]
This configuration snippet outlines several key aspects of the primary bar. The enabled setting determines whether the bar is displayed, and screens specifies which screens the bar should appear on. The class_name is used for CSS styling, while alignment controls the bar's position. The blur_effect section allows for the application of visual effects like blur, acrylic, and dark mode. The window_flags settings dictate how the bar interacts with other windows, such as always staying on top or hiding in fullscreen mode. Finally, the widgets section defines which widgets are displayed on the left, center, and right sides of the bar. These widgets provide various functionalities, such as workspace management, system monitoring, and media controls.
Deep Dive into Widget Configuration
Widgets are individual components that provide specific functionalities within the theme. Widget configuration is a critical aspect of theme creation, as it determines what information is displayed and how users interact with the system. The provided configuration includes a variety of widgets, such as workspace management, active layout display, home menu, taskbar, active window information, weather updates, clock, media controls, notifications, system tray, and system monitoring tools. Let's examine some of these widgets in detail:
Komorebi Workspaces Widget
The komorebi_workspaces widget is designed to display and manage workspaces within the Komorebi window manager. Effective workspace management is crucial for productivity, and this widget provides a visual representation of active workspaces. Here’s the configuration:
widgets:
komorebi_workspaces:
type: "komorebi.workspaces.WorkspaceWidget"
options:
label_offline: "Offline"
label_default_name: ""
label_zero_index: false
hide_empty_workspaces: true
hide_if_offline: false
The options section defines several settings for the widget. label_offline specifies the text to display when a workspace is offline, while label_default_name sets the default name for workspaces. label_zero_index determines whether workspace indices start from zero. hide_empty_workspaces and hide_if_offline control the visibility of workspaces based on their status. These settings allow users to customize how workspaces are displayed, ensuring a clear and efficient workflow.
Komorebi Active Layout Widget
The komorebi_active_layout widget displays the current layout being used by the Komorebi window manager. Understanding the active layout is essential for managing window arrangements effectively. The configuration is as follows:
widgets:
komorebi_active_layout:
type: "komorebi.active_layout.ActiveLayoutWidget"
options:
hide_if_offline: false
label: "{icon}"
layouts:
[
"bsp",
"columns",
"rows",
"grid",
"vertical_stack",
"horizontal_stack",
"ultrawide_vertical_stack",
"right_main_vertical_stack",
]
layout_icons:
bsp: "\uebeb"
columns: "\uebf7"
rows: "\uec01"
grid: "\udb81\udf58"
scrolling: "\uebf7"
vertical_stack: "\uebee"
horizontal_stack: "\uebf0"
ultrawide_vertical_stack: "\uebee"
right_main_vertical_stack: "\uebf1"
monocle: "\uf06f"
maximized: "\uf06f"
floating: "\uf2d2"
paused: "\udb83\udf89"
tiling: "\udb81\ude40"
callbacks:
on_left: "toggle_layout_menu"
on_middle: "toggle_tiling"
on_right: "next_layout"
This widget configuration includes settings for visibility, label format, available layouts, layout icons, and callbacks. The label setting specifies how the layout is displayed, using an icon. The layouts array lists the supported layouts, and layout_icons maps each layout to a specific icon. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling the layout menu, tiling, or switching to the next layout. This level of customization allows users to tailor their window management experience to their specific needs.
Home Widget
The home widget provides a quick access menu for frequently used locations and system actions. Efficient navigation is key to a productive environment, and this widget streamlines access to essential directories and functions. Here’s the configuration:
widgets:
home:
type: "yasb.home.HomeWidget"
options:
label: "<span>\ue6a7</span>"
menu_list:
- { title: "Home", path: "~" }
- { title: "Download", path: "~\\Downloads" }
power_menu: true
system_menu: true
blur: true
The options section includes settings for the widget’s label, menu list, and additional menus. The label setting defines the icon for the widget. The menu_list array specifies the items to display in the menu, such as the user’s home directory and downloads folder. The power_menu and system_menu settings enable the display of power and system actions, such as shutdown and restart. The blur setting applies a blur effect to the menu for visual appeal. This widget enhances usability by providing easy access to commonly used resources.
Taskbar Widget
The taskbar widget displays running applications, allowing users to quickly switch between them. Effective task management is essential for multitasking, and this widget provides a visual overview of active applications. The configuration is as follows:
widgets:
taskbar:
type: "yasb.taskbar.TaskbarWidget"
options:
tooltip: true
animation:
enabled: true
duration: 200
type: "fadeInOut"
icon_size: 16
title_label:
enabled: false
show: "focused"
min_length: 10
max_length: 30
ignore_apps:
processes: []
titles: []
classes: []
callbacks:
on_right: "close_app"
This widget configuration includes settings for tooltips, animations, icon size, title labels, ignored applications, and callbacks. The tooltip setting enables the display of tooltips for each application. The animation section configures the animation effect when applications are opened or closed. The icon_size setting specifies the size of the application icons. The title_label section controls the display of application titles, with options to show titles only for focused applications and set minimum and maximum lengths. The ignore_apps section allows users to specify applications to be excluded from the taskbar. The callbacks section defines actions to be performed when the user interacts with the widget, such as closing an application with a right-click. This widget enhances productivity by providing a clear and efficient way to manage running applications.
Active Window Widget
The active_window widget displays information about the currently focused window. Knowing the active window is crucial for staying organized and focused. The configuration is as follows:
widgets:
active_window:
type: "yasb.active_window.ActiveWindowWidget"
options:
label: "{win[process][name]}"
label_alt: "{win[title]}"
label_no_window: ""
label_icon: true
label_icon_size: 16
max_length: 30
max_length_ellipsis: "..."
monitor_exclusive: True
rewrite:
- pattern: "^(.+?)\\.exe$|\\.EXE{{content}}quot;
replacement: "\\1"
case: title
- pattern: "(.*)applicationframehost(.*){{content}}quot;
replacement: "notepad \\2"
- pattern: "(.*)zen(.*){{content}}quot;
replacement: "browser \\2"
- pattern: "(.*)microsoft.cmdpal.ui(.*){{content}}quot;
replacement: "Drun \\2"
- pattern: "(.*)imageglass(.*){{content}}quot;
replacement: "Photos \\2"
This configuration includes settings for labels, icons, maximum length, and rewriting patterns. The label and label_alt settings specify how the window information is displayed, using variables for the process name and window title. The label_no_window setting defines the text to display when no window is focused. The label_icon and label_icon_size settings control the display and size of the window icon. The max_length and max_length_ellipsis settings limit the length of the displayed text and add an ellipsis if the text is too long. The monitor_exclusive setting ensures that the widget displays information only for the current monitor. The rewrite section allows for the modification of window titles based on regular expressions, providing a cleaner and more consistent display. This widget helps users stay informed about their active tasks.
Weather Widget
The weather widget provides real-time weather information, including temperature, conditions, and forecasts. Staying informed about the weather can be useful for planning and daily activities. The configuration is as follows:
widgets:
weather:
type: "yasb.weather.WeatherWidget"
options:
label: "<span>{icon}</span> {temp}"
label_alt: "{location}: Min {min_temp}, Max {max_temp}, Humidity {humidity}"
api_key: "add your own api api_key"
update_interval: 600
hide_decimal: true
units: "imperial"
location: "Use your current location"
callbacks:
on_left: "toggle_card"
on_right: "toggle_label"
icons:
sunnyDay: "\ue30d"
clearNight: "\ue32b"
cloudyDay: "\ue312"
cloudyNight: "\ue311"
rainyDay: "\ue308"
rainyNight: "\ue333"
snowyIcyDay: "\ue30a"
snowyIcyNight: "\ue335"
blizzardDay: "\udb83\udf36"
blizzardNight: "\udb83\udf36"
foggyDay: "\ue303"
foggyNight: "\ue346"
thunderstormDay: "\ue30f"
thunderstormNight: "\ue338"
default: "\uebaa"
weather_card:
blur: false
round_corners: true
round_corners_type: "normal"
border_color: "system"
alignment: "center"
direction: "down"
icon_size: 64
show_hourly_forecast: true
time_format: "24h" # can be 12h or 24h
hourly_point_spacing: 76
hourly_icon_size: 32 # better to set 16, 32 or 64 for better quality
icon_smoothing: false # should be true for smoother icon or false for sharper icon if using 16, 32 or 64 for hourly_icon_size
temp_line_width: 2 # can be 0 to hide the temperature line
current_line_color: "#8EAEE8"
current_line_width: 1 # can be 0 to hide the current hour line
current_line_style: "dot"
This widget configuration includes settings for labels, API key, update interval, units, location, callbacks, icons, and a weather card. The label and label_alt settings define how the weather information is displayed. The api_key setting requires a personal API key for accessing weather data. The update_interval setting specifies how often the weather data is updated. The units setting defines the units of measurement (e.g., imperial or metric). The location setting specifies the location for which to display weather information. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling the weather card or label. The icons section maps weather conditions to specific icons. The weather_card section configures the appearance of a detailed weather card, including blur, corner rounding, border color, alignment, and forecast display. This widget provides a comprehensive weather overview, enhancing the user’s daily routine.
Clock Widget
The clock widget displays the current time and date. Time management is essential for productivity, and this widget provides a constant reminder of the current time. The configuration is as follows:
widgets:
clock:
type: "yasb.clock.ClockWidget"
options:
label: "{%a %b %d %H:%M}"
label_alt: "{%A %B %d %Y %H:%M}"
timezones: []
icons:
clock_01 : "\udb85\udc3f"
clock_02 : "\udb85\udc40"
clock_03 : "\udb85\udc41"
clock_04 : "\udb85\udc42"
clock_05 : "\udb85\udc43"
clock_06 : "\udb85\udc44"
clock_07 : "\udb85\udc45"
clock_08 : "\udb85\udc46"
clock_09 : "\udb85\udc47"
clock_10 : "\udb85\udc48"
clock_11 : "\udb85\udc49"
clock_12 : "\udb85\udc4a"
clock_16 : "SNACK TIME !"
clock_21 : "Zzz..."
clock_22 : "Zzz..."
clock_23 : "Zzz..."
calendar:
blur: false
round_corners: true
round_corners_type: "normal"
border_color: "system"
alignment: "center"
direction: "down"
show_holidays: true
show_week_numbers: true
country_code: "US"
holiday_color: "#FF6464"
callbacks:
on_left: "toggle_label"
label_shadow:
enabled: false
color: "black"
radius: 3
offset: [ 1, 1 ]
This configuration includes settings for labels, timezones, icons, a calendar, callbacks, and label shadows. The label and label_alt settings define the format for displaying the time and date. The timezones setting allows users to specify timezones to display. The icons section maps specific times to custom icons or messages. The calendar section configures the appearance of a detailed calendar, including blur, corner rounding, border color, alignment, holiday display, and week numbers. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling the label. The label_shadow section configures the appearance of a shadow effect for the label. This widget provides a versatile time and date display, enhancing the user’s awareness.
Media Widget
The media widget displays information about the currently playing media, such as the title and artist. Controlling media playback is a common task, and this widget provides a convenient way to manage media. The configuration is as follows:
widgets:
media:
type: "yasb.media.MediaWidget"
options:
label: "{title}"
label_alt: "{artist} - {title}"
max_field_size:
label: 20
label_alt: 20
show_thumbnail: true
controls_only: false
controls_left: true
hide_empty: true
thumbnail_alpha: 200
thumbnail_padding: 0
thumbnail_corner_radius: 16
thumbnail_edge_fade: true
icons:
prev_track: "\udb81\udcae"
next_track: "\udb81\udcad"
play: "\udb81\udc0a"
pause: "\udb80\udfe4"
This configuration includes settings for labels, maximum field sizes, thumbnail display, controls, and icons. The label and label_alt settings define how the media information is displayed. The max_field_size section limits the length of the displayed text for labels. The show_thumbnail setting enables the display of media thumbnails. The controls_only setting determines whether only media controls are displayed. The controls_left setting positions the controls to the left of the media information. The hide_empty setting hides the widget when no media is playing. The thumbnail_alpha, thumbnail_padding, thumbnail_corner_radius, and thumbnail_edge_fade settings configure the appearance of the media thumbnail. The icons section maps media control actions to specific icons. This widget enhances the user’s media experience by providing easy access to media information and controls.
Notifications Widget
The notifications widget displays the number of unread notifications. Staying informed about notifications is crucial for communication and task management. The configuration is as follows:
widgets:
notifications:
type: "yasb.notifications.NotificationsWidget"
options:
label: "<span>\uf476</span> {count}"
label_alt: "{count} notifications"
hide_empty: true
tooltip: false
callbacks:
on_left: "toggle_notification"
on_right: "do_nothing"
on_middle: "toggle_label"
This configuration includes settings for labels, visibility, tooltips, and callbacks. The label and label_alt settings define how the notification count is displayed. The hide_empty setting hides the widget when there are no notifications. The tooltip setting disables the display of tooltips. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling the notification display or label. This widget helps users stay on top of their notifications.
Systray Widget
The systray widget displays system tray icons, providing access to various system utilities and applications. Managing system utilities is essential for system administration and maintenance. The configuration is as follows:
widgets:
systray:
type: "yasb.systray.SystrayWidget"
options:
class_name: "systray"
label_collapsed: "\uea9b"
label_expanded: "\uea9c"
label_position: "left" # Can be "left" or "right"
icon_size: 18 # Can be any integer between 8 and 64
pin_click_modifier: "alt" # Can be "ctrl", "alt" or "shift"
show_unpinned: false
show_unpinned_button: true
show_battery: false
show_volume: false
show_network: false
tooltip: true
btn_shadow:
enabled: false
color: "white"
radius: 3
offset: [ 1, 1 ]
This configuration includes settings for class name, labels, icon size, pinning behavior, and displayed icons. The class_name setting defines the CSS class for the widget. The label_collapsed and label_expanded settings define the icons for collapsed and expanded states. The label_position setting specifies the position of the label relative to the icons. The icon_size setting specifies the size of the icons. The pin_click_modifier setting defines the modifier key to use when pinning icons. The show_unpinned setting controls the display of unpinned icons. The show_unpinned_button setting enables the display of a button to show unpinned icons. The show_battery, show_volume, and show_network settings control the display of battery, volume, and network icons. The tooltip setting enables the display of tooltips for the icons. The btn_shadow section configures the appearance of a shadow effect for the icons. This widget provides access to system utilities and applications, enhancing system management.
System Monitoring Widgets (Memory, CPU, Disk)
The theme includes several widgets for monitoring system resources, such as memory, CPU usage, and disk activity. Monitoring system resources is crucial for maintaining system performance and stability. Let's examine these widgets:
Memory Widget
The memory widget displays information about memory usage. The configuration is as follows:
widgets:
memory:
type: "yasb.memory.MemoryWidget"
options:
label: "RAM"
label_alt: "VIRT: {virtual_mem_percent}% SWAP: {swap_mem_percent}%"
update_interval: 5000
progress_bar:
enabled: true
size: 16
thickness: 2
color: "#fffdd0"
background_color: "#ff69b4"
callbacks:
on_left: "toggle_label"
memory_thresholds:
low: 25
medium: 50
high: 90
This configuration includes settings for labels, update interval, a progress bar, callbacks, and memory thresholds. The label and label_alt settings define how the memory information is displayed. The update_interval setting specifies how often the memory data is updated. The progress_bar section configures the appearance of a progress bar for memory usage. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling the label. The memory_thresholds section defines thresholds for low, medium, and high memory usage. This widget helps users monitor memory usage and identify potential issues.
CPU Widget
The cpu widget displays information about CPU usage. The configuration is as follows:
widgets:
cpu:
type: "yasb.cpu.CpuWidget"
options:
label: "CPU"
label_alt: "CPU {info[percent][total]:.0f}%"
progress_bar:
enabled: true
position: "left"
size: 14
thickness: 2
color: "#fffdd0"
background_color: "#ff69b4"
update_interval: 10000
callbacks:
on_right: "do_nothing"
This configuration includes settings for labels, a progress bar, update interval, and callbacks. The label and label_alt settings define how the CPU information is displayed. The progress_bar section configures the appearance of a progress bar for CPU usage. The update_interval setting specifies how often the CPU data is updated. The callbacks section defines actions to be performed when the user interacts with the widget. This widget helps users monitor CPU usage and identify potential issues.
Disk Widget
The disk widget displays information about disk usage. The configuration is as follows:
widgets:
disk:
type: "yasb.disk.DiskWidget"
options:
label: "HD"
label_alt: "<span>\uf473</span>"
update_interval: 60
group_label:
volume_labels: ["C", "D", "E", "F"]
show_label_name: false
blur: True
round_corners: True
round_corners_type: "small"
border_color: "System"
alignment: "right"
direction: "down"
callbacks:
on_left: "toggle_group"
on_middle: "toggle_label"
on_right: "exec explorer" # Open disk C in file explorer
This configuration includes settings for labels, update interval, group labels, and callbacks. The label and label_alt settings define how the disk information is displayed. The update_interval setting specifies how often the disk data is updated. The group_label section configures the appearance of labels for disk volumes. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling the group display or opening the file explorer. This widget helps users monitor disk usage and manage their storage.
Volume and Microphone Widgets
The theme includes widgets for controlling system volume and microphone settings. Managing audio settings is essential for multimedia and communication tasks. Let's examine these widgets:
Volume Widget
The volume widget displays and controls the system volume. The configuration is as follows:
widgets:
volume:
type: "yasb.volume.VolumeWidget"
options:
label: "<span>{icon}</span> {level}"
label_alt: "{volume}"
tooltip: false
volume_icons:
- "\ueee8"
- "\uf026"
- "\uf027"
- "\uf027"
- "\uf028"
audio_menu:
blur: true
round_corners: true
round_corners_type: "normal"
border_color: "#ff69b4"
alignment: "right"
direction: "down"
callbacks:
on_left: "toggle_volume_menu"
on_middle: "exec cmd.exe /c start ms-settings:sound"
on_right: "toggle_mute"
This configuration includes settings for labels, tooltips, volume icons, an audio menu, and callbacks. The label and label_alt settings define how the volume information is displayed. The tooltip setting disables the display of tooltips. The volume_icons section maps volume levels to specific icons. The audio_menu section configures the appearance of a detailed audio menu, including blur, corner rounding, border color, and alignment. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling the volume menu, opening sound settings, or toggling mute. This widget helps users manage their system volume easily.
Microphone Widget
The microphone widget displays and controls the microphone settings. The configuration is as follows:
widgets:
microphone:
type: "yasb.microphone.MicrophoneWidget"
options:
label: "<span>{icon}</span> {level}"
label_alt: "<span>{icon}</span> {level}%"
icons:
snormal: "\udb80\udf6c"
muted: "\udb80\udf6d"
callbacks:
on_left: "toggle_mute"
on_middle: "toggle_label"
on_right: "exec cmd.exe /c start ms-settings:sound"
This configuration includes settings for labels, icons, and callbacks. The label and label_alt settings define how the microphone information is displayed. The icons section maps microphone states (normal and muted) to specific icons. The callbacks section defines actions to be performed when the user interacts with the widget, such as toggling mute, toggling the label, or opening sound settings. This widget helps users manage their microphone settings easily.
Conclusion
Creating a new theme involves a detailed understanding of various components and configurations. From theme styles and core configurations to individual widget settings, each element plays a crucial role in the overall user experience. By carefully configuring these components, users can create a personalized environment that enhances their productivity and enjoyment.
For more information on theme creation and customization, visit the official YASB documentation.
