.theme-dark {
  /* Action and Status */
  --link-color: #06A8F9;
  --hover-link-color: #6ACBFB;
  --warning-color: #F76C6C;
  --hover-warning-color: #FA9E9E;
  --success-color: #66AD1F;

  /* Baseline */
  /* General text and actionable content (buttons, icons, etc) */
  --primary-color: #F2F2F2;
  /* Supporting text */
  --secondary-color: #808080;
  /* Non-interactable content */
  --disabled-color: #333333;

  /* Main background */
  --bg-color: #0A0A0A;
  /* Active content background: modals, context menus, etc */
  --active-bg-color: #1A1A1A;
  /* Background for interactable objects.
     Also used as hover state for interactable objects without this
     as its background (table rows, buttons, etc) */
  --interaction-color: #FFFFFF1A;
  /* Background for hover / active states if interaction-color is used */
  --hover-interaction-color: #FFFFFF26;

  /* Overlaid on background for modals that require attention */
  --backdrop-color: #000000CC;
  /* Outlines used on background */
  --border-color: #1A1A1A;
  /* Outlines used on active background */
  --active-border-color: #212121;

  /* Syntax */
  --syntax-key-color: #40B9FF;
  --syntax-string-color: #CCCCCC;
  --syntax-number-color: #96E5B2;
  --syntax-datetime-color: #F7FF95;
  --syntax-bracket-color: #FBC97E;
  --syntax-boolean-color: #D37880;
  --syntax-function-color: #FF99CC;
  --syntax-index-color: #CBFE00;
  --syntax-null-color: var(--secondary-color);
}

.theme-light {
  /* Action and Status */
  --link-color: #046595;
  --hover-link-color: #034363;
  --warning-color: #CC3341;
  --hover-warning-color: #A32934;
  --success-color: #4D8217;

  /* Baseline */
  --primary-color: #262626;
  --secondary-color: #727272;

  --bg-color: #FFFFFF;
  --active-bg-color: #F7F7F7;

  /* Syntax */
  --syntax-key-color: #0E6DA5;
  --syntax-string-color: #333333;
  --syntax-number-color: #4B9A67;
  --syntax-datetime-color: #9B8824;
  --syntax-bracket-color: #B35702;
  --syntax-boolean-color: #9D2F39;
  --syntax-function-color: #EA4598;
  --syntax-index-color: #8FB300;
  --syntax-null-color: var(--secondary-color);
}