Affinity theme for obsidian [WIP] only dark / light theme

affinity.css

:root {
  --default-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
    'Helvetica Neue', sans-serif !important;
  --mermaid-font: var(--default-font);
  --reveal-font: var(--default-font);
  --font-monospace: Menlo, Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace !important;

  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-md: 18px;
  --text-lg: 24px;
  --text-xl: 32px;
  --text-2xl: 48px;
  --text-3xl: 64px;
  --text-4xl: 72px;
}

.theme-dark {
  --code: #79ffe1;
  --selection: #f81ce5;
  --blue: #57c1ff;

  --foreground: #fff;
  --background: #000;
  --accents8: #fafafa;
  --accents7: #eaeaea;
  --accents6: #999;
  --accents5: #888;
  --accents4: #666;
  --accents3: #444;
  --accents2: #333;
  --accents1: #111;

  --token_code_class: #fafafa;
  --token_regex_imp_var: #eab308;
  --token_func_cn: #ec4899;
  --token_attr_key: #3b82f6;
  --token_oper_string: #eab308;
  --token_selector: #a855f7;
  --token_property: #22c55e;
  --token_punctuation: #d4d4d8;
  --token_deleted: rgba(232, 74, 95, 0.5);
  --token_inserted: rgba(38, 166, 155, 0.5);
  --token_comment: #666666;

  --background-secondary: #030303;
}

.theme-light {
  --foreground: #000;
  --background: #fff;
  --selection: #50e3c2;
  --accents1: #fafafa;
  --accents2: #eaeaea;
  --accents3: #999;
  --accents4: #888;
  --accents5: #666;
  --accents6: #444;
  --accents7: #333;
  --accents8: #111;
  --code: #f81ce5;

  --token_code_class: #27272a;
  --token_regex_imp_var: #eab308;
  --token_func_cn: #ec4899;
  --token_attr_key: #3b82f6;
  --token_oper_string: #eab308;
  --token_selector: #a855f7;
  --token_property: #22c55e;
  --token_punctuation: #3f3f46;
  --token_deleted: rgba(232, 74, 95, 0.5);
  --token_inserted: rgba(38, 166, 155, 0.5);
  --token_comment: #3f3f46;
}

/* Main View */
.markdown-preview-view,
.markdown-source-view {
  background-color: var(--background);
  box-shadow: none !important;
}

html {
  font-family: var(--default-font);
  color: var(--foreground);
  background-color: var(--background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

::selection {
  background-color: var(--selection) !important;
  color: var(--foreground) !important;
}

/* Headers */

.markdown-preview-view h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--foreground) !important;
  line-height: 110%;
}

/* Texts */

p,
ul,
ol {
  line-height: 1.5;
  font-size: var(--text-md);
  color: var(--accents7);
  letter-spacing: 0.02em;
}

li {
  margin: 0.5rem 0;
}

strong {
  color: var(--accents8);
}

.markdown-preview-view h1 {
  font-size: var(--text-2xl);
  letter-spacing: -0.066875rem;
  margin: 3rem 0;
  font-weight: 800;
}
.markdown-preview-view h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.020625rem;
  margin: 2.5rem 0;
}
.markdown-preview-view h3 {
  font-size: var(--text-lg);
  letter-spacing: -0.029375rem;
  margin: 2rem 0;
}
.markdown-preview-view h4 {
  font-size: var(--text-md);
  letter-spacing: -0.020625rem;
  margin: 1.5rem 0;
}
.markdown-preview-view h5 {
  font-size: var(--text-base);
  letter-spacing: -0.01125rem;
  margin: 1.2rem 0;
}
.markdown-preview-view h6 {
  font-size: var(--text-sm);
  letter-spacing: -0.005625rem;
  margin: 1.2rem 0;
}

/* Pre Code Block */

.theme-dark pre[class*='language-'],
.theme-light pre[class*='language-'] {
  background-color: transparent;
  border: 1px solid var(--accents2);
  border-radius: 5px;
  padding-left: 1rem;
  padding-bottom: 1rem;
  white-space: pre;
  overflow: auto;
  line-height: 1.5;
  text-align: left;
  font-size: 0.8125rem;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Inline Code */

.markdown-preview-view code {
  color: var(--code);
  font-family: 'Menlo', Monaco, Lucida Console, Liberation Mono,
    DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
  font-size: var(--text-sm);
  white-space: pre-wrap;
}

.markdown-preview-view :not(pre) > code {
  display: inline-block;
  padding: 0 0.5rem;
  line-height: 24px;
  margin-bottom: 1px;
  margin-left: 2px;
  margin-right: 2px;
  vertical-align: middle;
  background: var(--accents1);
  border-radius: 5px;
}

/* Syntax Highlight */

.theme-dark .token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: var(--token_comment) !important;
}

.theme-dark .token.punctuation {
  color: var(--token_punctuation) !important;
}

.theme-dark .token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol {
  color: var(--token_property) !important;
}

.theme-dark .token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin {
  color: var(--token_selector) !important;
}

.theme-dark .token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: var(--token_oper_string) !important;
}

.theme-dark .token.atrule,
.token.attr-value,
.token.keyword {
  color: var(--token_attr_key) !important;
}

.theme-dark .token.function,
.token.class-name {
  color: var(--token_func_cn) !important;
}

.theme-dark .token.regex,
.token.important,
.token.variable {
  color: var(--token_regex_imp_var) !important;
}

/* Horizontal Rule */
.theme-dark hr {
  border: 0;
  border-top: 1px solid rgba(141, 147, 171, 0.3);
  height: 2px;
  margin: 40px 0;
}

/* Blockquote */
.markdown-preview-view blockquote {
  background-color: var(--accents1);
  border-radius: 0 8px 8px 0;
  border: 1px solid var(--accents5);
  border-left-width: 5px;
  padding: 10px 20px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

/* External Link */
.markdown-preview-view,
.external-link,
.internal-link {
  color: var(--blue);
  text-decoration: none;
  font-weight: 500;
  box-shadow: inset 0 -3px 0 0 #128af38a;
  transition: all 0.3s ease;
}
.external-link:hover {
  box-shadow: inset 0 -20px 0 0 #128af38a;
  color: var(--blue);
}

/* Editor Code Block */

.cm-s-obsidian .HyperMD-codeblock {
  color: var(--code) !important;
}