Typora Themes

https://theme.typora.io/doc/
Admin
A documentation website providing guides and resources for installing, writing, and submitting...
Tokens:2,325
Snippets:37
Trust Score:9.8
Update:2 months ago
Show doc for...
Tokens:
Raw
### Structure of Inline Elements

Source: https://theme.typora.io/doc/Write-Custom-Theme

Example of the HTML structure generated for an inline strong element in Typora.

```html
<!--wrapper for strong element-->
<span md-inline="strong" class=""> 
  
  <!--meta syntax for strong element-->
  <span class="md-meta md-before">**</span> 
  
    <!--output for strong element-->
    <strong>
      <!--inner output-->
      <span md-inline="plain">strong</span> 
    </strong>
  
   <!--meta syntax for strong element-->
  <span class="md-meta md-after">**</span>
</span>

```

--------------------------------

### Define General Window and Writing Area Styles

Source: https://theme.typora.io/doc/Write-Custom-Theme

Apply global styles to the window using html and body tags, or restrict styles to the writing area using the #write selector.

```css
/** example **/
html, body {
  background-color: #fefefe; /*background color of the window and titlebar*/
  font-family: helvetica, sans-serif; /*custom font*/
  ...
}

html {
  font-size: 14px; /*default font size*/
}

#write {
  max-width: 90%; /*adjust size of the wriring area*/
  font-size: 1rem; /*basic font size*/
  color: #555; /*basic font color*/
  ...
}
```

--------------------------------

### Define Print Styles

Source: https://theme.typora.io/doc/Write-Custom-Theme

CSS media query to apply specific styles during printing or PDF export.

```css
@media print {
    /* for example: */
    .typora-export * {
        -webkit-print-color-adjust: exact;
    }
    /* add styles here */
}

```

--------------------------------

### Style Source Code Mode

Source: https://theme.typora.io/doc/Write-Custom-Theme

CSS selector for targeting headers within Typora's Source Code mode.

```css
.cm-s-typora-default .cm-header {
  /*styles for h1~h6 in source code mode*/
}

```

--------------------------------

### Define CSS for Inline Elements

Source: https://theme.typora.io/doc/Write-Custom-Theme

Basic CSS selectors for styling various inline markdown elements.

```css
strong {
  font-weight: bold;
}
em {..}
code {..}
a {..}
img {..}
mark {..} /*highlight*/

```

--------------------------------

### Scope Styles to Dialogs or Writing Area

Source: https://theme.typora.io/doc/Write-Custom-Theme

Use ancestor selectors to differentiate between UI components and the main writing area.

```css
/*this will only aplly to h4 in dialogs popped up by typora (just an example)*/
.dialog h4 {...} 

/*this will only apply to h4 inside writing area, which is generated after user input "#### " */
#write h4 {...} 
```

--------------------------------

### Style Block Elements

Source: https://theme.typora.io/doc/Write-Custom-Theme

Target standard HTML tags used for Markdown elements to customize typesetting.

```css
p {...}
h1 {...}
table {...}
table th td {...}
table tr:nth-child(2n) td {...}
...
```

--------------------------------

### Overwriting CSS Variables for Typora Themes

Source: https://theme.typora.io/doc/Write-Custom-Theme

Use these CSS variables within the :root selector to customize colors, fonts, and UI elements of the Typora interface.

```css
:root {
   --bg-color:  #ffffff; /*change background*/
   --text-color: #333333; /*change text color*/
   --md-char-color: #C7C5C5; /*change color of meta characetrs like `*` in markdown */
   --meta-content-color: #5b808d; /*change color of meta contents like image text or link address in markdown */

   --primary-color: #428bca; /* color of primary buttons */
   --primary-btn-border-color: #285e8e;
   --primary-btn-text-color: #fff;

   --window-border: 1px solid #eee; /*border for sidebar, etc*/

   --active-file-bg-color: #eee; /*background color if list item in file tree or file list*/
   --active-file-text-color: inherit;
   --active-file-border-color: #777;

   --side-bar-bg-color: var(--bg-color); /*change background of sidebar*/
   --item-hover-bg-color: rgba(229, 229, 229, 0.59); /*background of control items when hover, like menu in sidebar*/
   --item-hover-text-color: inherit;
   --monospace: monospace; /*monospace font for codes, fences*/
}
```
Tokens:
Raw