_styles.js

// ==========================
// Bot Visual Style Settings
// ==========================
/** @type {StyleConfig} */
const _styles = {
  // Font Family: available @ https://fonts.google.com
  headerFontFamily: "Roboto Mono",
  cardFontFamily: "Roboto Mono",

  // App Styles
  appBorderRadius: "8px", // px value
  appPadding: "6px", // px value
  appBackgroundImage: "url(../images/transparent-image.png)", // image must go in images folder
  appBackgroundColor: "rgba(0, 0, 0, 0)", // rgba value https://rgbcolorpicker.com

  //  Header Styles
  headerDisplay: "flex", // "none" to hide header or "flex" to show header
  headerBorderRadius: "8px", // px value
  headerMarginBottom: "6px", // px value
  headerPadding: "12px", // px value
  headerBackgroundColor: "rgba(0, 0, 0, 0.7)", // rgba value https://rgbcolorpicker.com/
  headerFontSize: "18px", // px value
  headerFontColor: "#FFFFFF", // hex value
  headerFontWeight: "normal", // "normal", "lighter", "bold"

  // Card Styles
  cardGapBetween: "6px", // px value
  cardBorderRadius: "8px", // px value
  cardPadding: "12px", // px value
  cardBackgroundColor: "rgba(0, 0, 0, 0.7)", // rgba value https://rgbcolorpicker.com/

  // Username Styles
  usernameFontSize: "18px", // px value
  usernameColor: "#FFFFFF", // hex value
  usernameFontWeight: "normal", // "normal", "lighter", "bold"

  // Task Styles
  taskFontSize: "16px", // px value
  taskFontColor: "#FFFFFF", // hex value
  taskFontWeight: "normal", // "normal", "lighter", "bold"

  taskDoneFontColor: "#b0b0b0", // hex value
  taskDoneFontStyle: "italic", // "italic" or "normal"
  taskDoneTextDecoration: "line-through", // "line-through" or "none"

  taskFocusFontColor: "#111111", // hex value
  taskFocusBackgroundColor: "rgba(255, 255, 255, 0.7)", // rgba value https://rgbcolorpicker.com/
  taskFocusBorderRadius: "8px", // hex value
};