Theme Guide

Creating a Browser Source theme

Requirements: Basic CSS

Create a themes folder in the same directory as the app. CSS files in the themes folder are read from the app and can be selected in the output settings.

Structure

.stat-list - the container for all of the stats
.stat-item - container for each individual stat
.stat-title - the text that says "Wins", "Losses", Win Rate", "LP Gain" etc
.stat-value - the value of the stat

Nord.css (example)

@import url("https://fonts.googleapis.com/css2?family=Caesar+Dressing");

.stat-title { color: #eceff4 }
.stat-value { color: #88c0d0 }

.stat-list {
  /* Any font installed on the system / import from e.g. google fonts */
  font-family: "Caesar Dressing"; 
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 2rem;
}

.stat-item {
  background: #4c566a;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 0.75rem;
  white-space: nowrap;
}