Skip to content

Instantly share code, notes, and snippets.

@pdxmph
Created January 22, 2023 04:16
Show Gist options
  • Save pdxmph/7081c5c4f459e41d295c960b64d54c6c to your computer and use it in GitHub Desktop.
Save pdxmph/7081c5c4f459e41d295c960b64d54c6c to your computer and use it in GitHub Desktop.
Sample custom CSS to override simplecss with Catppuccin palette
@import url('https://fonts.googleapis.com/css2?family=Neuton:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Mono&display=swap');
@import url('https://unpkg.com/@catppuccin/[email protected]/css/catppuccin.css');
h1, h2, h3, h4, h5, h6 {
font-family: 'Neuton', serif;
}
:root {
/* Set sans-serif & mono fonts */
--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
"Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica,
"Helvetica Neue", sans-serif;
--mono-font: "Fira Mono", Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
/* Body font size. By default, effectively 18.4px, based on 16px as 'root em' */
--base-fontsize: 1.15rem;
/* Major third scale progression - see https://type-scale.com/ */
--header-scale: 1.25;
/* Line height is set to the "Golden ratio" for optimal legibility */
--line-height: 1.618;
/* Default (light) theme */
--bg: var(--ctp-latte-base);
--accent-bg: var(--ctp-latte-crust);
--text: var(--ctp-latte-text);
--text-light: var(--ctp-latte-subtext1);
--border: var(--ctp-latte-overlay0);
--accent: var(--ctp-latte-subtext1);
--accent-light: var(--ctp-latte-rosewater);
--code: var(--ctp-latte-rosewater);
--preformatted: var(--ctp-latte-subtext1);
--marked: var(--ctp-latte-rosewater);
--disabled: var(--ctp-latte-overlay1);
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: var(--ctp-frappe-base);
--accent-bg: var(--ctp-frappe-crust);
--text: var(--ctp-frappe-text);
--text-light: var(--ctp-frappe-subtext1);
--border: var(--ctp-frappe-overlay0);
--accent: var(--ctp-frappe-rosewater);
--accent-light: var(--ctp-frappe-rosewater);
--code: var(--ctp-frappe-subtext1);
--preformatted: var(--ctp-frappe-subtext1);
--marked: var(--ctp-latte-rosewater);
--disabled: var(--ctp-frappe-overlay1);
}
img,
video {
opacity: 0.6;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment