Customizing ARC: How to Change Look, Features, and Behavior
ARC is designed to be highly customizable. Whether you want to change the launcher layout, add your own apps, tweak the theme, or remap keys, here’s how to get started!
1. Changing the Layout
The core layout—such as the grid of app icons, tab bar, and top bar—is controlled via the YAML configuration file found in your .config
directory (usually ~/.config/arc_launcher.yaml
or similar).
To change the app grid:
- Adjust the
grid
section:grid: cols: 4 # number of app columns rows: 2 # number of app rows margin: 10 # space between cells padding: 30 # space around grid x_offset: 4 y_offset: 0 Adjust cell width and height for the size of each app icon.
2. Changing Colors and Theme
All UI colors are defined in the colors and accent_color fields. Use RGB lists (e.g., [220, 220, 220] for light gray).
Example:
colors: background: [20, 20, 20] tab_active: [100, 100, 100] button_hover: [100, 160, 210] text: [220, 220, 220] accent_color: [204, 99, 36]
Tip: Use an online color picker to choose your favorite palette.
3. Adding or Removing Apps
The builtin_apps section lets you control which applications appear in your launcher.
To add a new app:
Create or install the app in your apps_dir or somewhere accessible.
Add a new entry to builtin_apps:
- name: Weather
icon: ./ARC_DE/icons/weather.png
exec: "python3 -m WeatherApp.main"
Restart the launcher.
To remove an app: Simply delete its entry from the builtin_apps list.
4. Changing Icons
Icons are defined as file paths throughout the config file:
App icons: Set in each app’s icon field.
Status bar icons: Set in the topbar section (battery, wifi, bluetooth, etc.).
Other icons: WiFi locked/unlocked, notifications, etc.
Replace icon files in ./ARC_DE/icons/ or reference your own files.
5. Changing Fonts
You can use your favorite font by updating the font section:
font: name: ./assets/fonts/Inter/Inter_18pt-SemiBold.ttf size: 20
Change the name to your font file path and adjust size as you prefer.
6. Editing Music and Game Directories
music_dir: Default music folder (e.g., ~/Music)
game_json: Path to your games JSON file (e.g., ~/Games/games.json)
7. Adjusting Corner Radius and UI Elements
radius: Controls the roundness of buttons, app icons, sliders, etc.
indicator: Controls the appearance and spacing of indicator dots (such as for page navigation or volume).
8. Changing Warning Duration
warning_duration: How long (in milliseconds) a warning message will display.
Example: warning_duration: 2000 (2 seconds)
9. Saving and Applying Changes
After editing your configuration:
Save the YAML file.
Restart the ARC launcher or reboot the system to apply the changes.
10. Advanced: Adding Custom Apps or Packages
apps_dir: Directory for additional user apps.
packages_dir: Directory for extra software packages.
Place your custom scripts or apps in these folders and reference them in builtin_apps as shown above.
11. Troubleshooting
Launcher doesn't start?
Double-check your YAML syntax. Use an online YAML validator if unsure.
App not showing up?
Make sure the exec command is correct and the script or app is executable, and delete the "launcher_apps.json" from .cache.
Example config file:
screen:
width: 480
height: 320
fps: 30
tab:
width: 100
height: 40
margin: 5
accent_color: [204, 99, 36]
colors:
background: [20, 20, 20]
background_light: [250, 250, 250]
tab_bg: [50, 50, 50]
tab_active: [100, 100, 100]
button: [220, 220, 220]
button_hover: [100, 160, 210]
text_light: [5, 5, 5]
text: [220, 220, 220]
warning_bg: [200, 50, 50]
warning_text: [255, 255, 255]
indicator: [180, 180, 180]
indicator_active: [255, 255, 255]
input_bg: [255, 255, 255]
input_border: [100, 100, 100]
input_text: [0, 0, 0]
input_placeholder: [150, 150, 150]
cell_bg: [220, 220, 220]
cell_active: [240, 240, 240]
accent: [204, 99, 36]
slider_bg: [80, 80, 80]
slider_fill: [50, 150, 250]
slider_knob: [200, 200, 200]
slider_active_knob: [255, 255, 255]
icons:
wifi_locked: ./ARC_DE/icons/wifi_locked.png
wifi_unlocked: ./ARC_DE/icons/wifi_unlocked.png
builtin_apps:
- name: Terminal
icon: ./ARC_DE/icons/terminal.png
exec: "kitty --directory=~"
- name: Web browser
icon: ./ARC_DE/icons/browser.png
exec: "python3 ./web_apps/browser.py"
- name: Calendar
icon: ./ARC_DE/icons/calendar.png
exec: "python3 -m Calendar_app.main"
- name: RF tools
icon: ./ARC_DE/icons/rf.png
exec: "python3 -m RF_tools.main"
- name: IR tools
icon: ./ARC_DE/icons/ir.png
exec: "python3 -m IR_tools.main"
- name: NFC tools
icon: ./ARC_DE/icons/nfc.png
exec: "python3 -m NFC_tools.main"
- name: WiFi tools
icon: ./ARC_DE/icons/wifi_tools.png
exec: "python3 -m WIFI_tools.main"
- name: Bluetooth tools
icon: ./ARC_DE/icons/bluetooth_tools.png
exec: "python3 -m BT_tools.main"
- name: Files
icon: ./ARC_DE/icons/files.png
exec: "pcmanfm"
- name: Text editor
icon: ./ARC_DE/icons/editor.png
exec: "python3 -m Notes_app.main"
- name: Music
icon: ./ARC_DE/icons/music.png
exec: "python3 -m music_player.main"
- name: Games
icon: ./ARC_DE/icons/games.png
exec: "python3 -m Games.main"
- name: Settings
icon: ./ARC_DE/icons/settings.png
exec: "python -m Settings.main"
- name: ARC connect
icon: ./ARC_DE/icons/arc_connect.png
exec: "python3 -m ARC_connect.ip"
apps_dir: ./apps
packages_dir: ./packages
grid:
cols: 4
rows: 2
margin: 10
padding: 30
x_offset: 4
y_offset: 0
cell:
width: 90 # (you may want to compute this in Python based on grid, etc.)
height: 90
topbar:
height: 30
bg: [20, 20, 20]
fg: [200, 200, 200]
notification_dot: [245, 88, 88]
icons: []
icon_battery: ./ARC_DE/icons/topbar/battery.png
icon_mobile: ./ARC_DE/icons/topbar/cellular.png
wifi_icons:
- ./ARC_DE/icons/topbar/wifi_0.png
- ./ARC_DE/icons/topbar/wifi_1.png
- ./ARC_DE/icons/topbar/wifi_2.png
- ./ARC_DE/icons/topbar/wifi_3.png
- ./ARC_DE/icons/topbar/wifi_4.png
icon_bt_on: ./ARC_DE/icons/topbar/bluetooth_on.png
icon_bt_off: ./ARC_DE/icons/topbar/bluetooth_off.png
icon_bt_connected: ./ARC_DE/icons/topbar/bluetooth_connected.png
show_clock: true
clock_format: "%H:%M"
show_notifications: true
show_battery: true
show_wifi: true
show_bt: true
show_mobile: true
padding_left: 5
padding_right: 5
icon_spacing: 5
notification_spacing: 5
radius:
button: 8
app_button: 20
tab: 6
warning: 6
modal: 6
input: 6
app_icon: 15
slider: 4
slider_knob: 6
indicator:
radius: 4
spacing: 10
font:
name: ./assets/fonts/Inter/Inter_18pt-SemiBold.ttf
size: 20
music_dir: ~/Music
game_json: ~/Games/games.json
warning_duration: 2000