Customize

Cambiare is completely customizable including all colors and fonts throughout the theme.

Custom Google Fonts

Select any font from Google using the dropdown below and the code will be generated for you to copy & paste directly into your Ghost site!

Custom Theme Styles

Copy & paste the code below into your Ghost Admin > Code Injection > Site Header and override any values you'd like for a completely customized look and feel.

<style>
:root {
  /* Global Styles */
  --accent-color: #6b8add;
  --container-width: 700px;
  --body-bg-color: #fafafa;
  --body-font-color: #000000;

  /* Navigation Styles */
  --primary-nav-link-color: #ffffff;
  --secondary-nav-link-color: #999999;
  --header-bg-opacity: 0.7;
  --header-bg-tint: rgba(34, 37, 53, var(--header-bg-opacity));

  /* Content Styles */
  --site-title-color: #ffffff;
  --card-bg: #ffffff;
  --card-box-shadow: 0 0 6px 1px rgba(0,0,0,0.08);
  --card-box-shadow-hover: 0 2px 24px 5px rgba(0,0,0,.1);
  --border-color: #eaeaea;
  --input-bg: #fafafa;
  --input-border: #eaeaea;
  --heading-color: #444444;
  --content-color: #444444;
  --content-link-color: #000000;

  /* Tag Styles */
  --tag-added: #9EBF64;
  --tag-changed: #A164BF;
  --tag-deprecated: #B9C447;
  --tag-fixed: #647DBF;
  --tag-removed: #BF6464;
  --tag-security: #BF64B4;
}

[data-theme="Dark"] {
  --body-bg-color: #222327;
  --body-font-color: #ffffff;
  --card-bg: #27262c;
  --border-color: #444444;
  --input-bg: #38363f;
  --input-border: #242424;
  --heading-color: #ffffff;
  --content-color: #cccccc;
  --content-link-color: #ffffff;
}
</style>