CSS Structure and Styling Guide

Notionpresso provides a flexible and extensible CSS structure. This section explains the CSS variable system, key styling points, and the principles of indent application.

CSS Variable System

Notionpresso uses CSS variables to define global styles. This allows for easy theme changes and overall style adjustments.

The main CSS variables are as follows:

.notion {
  --notion-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif,
    "Segoe UI Emoji", "Segoe UI Symbol";
  --notion-max-width: 720px;
  --notion-header-height: 45px;
  --notion-indent: 27px;


/* Color variables */
--fg-color: rgb(55, 53, 47);
--fg-color-0: rgba(55, 53, 47, 0.09);
--fg-color-1: rgba(55, 53, 47, 0.16);
--fg-color-2: rgba(55, 53, 47, 0.4);
--fg-color-3: rgba(55, 53, 47, 0.6);
--fg-color-4: #000;
--fg-color-5: rgb(233, 233, 231);
--fg-color-6: rgba(55, 53, 47, 0.8);
--fg-color-icon: var(--fg-color);




--bg-color: #fff;
--bg-color-0: rgba(135, 131, 120, 0.15);
--bg-color-1: rgb(247, 246, 243);
--bg-color-2: rgba(135, 131, 120, 0.15);




--select-color-0: rgb(46, 170, 220);
--select-color-1: rgba(35, 131, 226, 0.28);
--select-color-2: #d9eff8;
}
--select-color-0: rgb(46, 170, 220);
--select-color-1: rgba(35, 131, 226, 0.28);
--select-color-2: #d9eff8;
}

You can easily change the overall style by redefining these variables.

Key Styling Points

1. Class Naming Convention: All classes start with notion-. This prevents style conflicts.

   Example: .notion-block, .notion-h1, .notion-toggle

2. Block Level Styles: The notion-block class is applied to all block-level elements.

   .notion-block {
     display: block;
   }
   

3. Color Application: Colors are applied through CSS variables.

   .notion-text {
     color: var(--fg-color);
   }
   

4. Responsive Design: The --notion-max-width variable is used to implement responsive layouts.

   .notion-body {
     width: 100%;
     max-width: var(--notion-max-width);
     margin: 0 auto;
   }
   

Indent Application Principle

Notionpresso implements indentation through a recursive structure. This is handled in CSS as follows:

.notion-block > .notion-block {
  margin-left: var(--notion-indent);
}


.notion-block > .notion-display-contents > .notion-block {
margin-left: var(--notion-indent);
}
.notion-block > .notion-display-contents > .notion-block {
margin-left: var(--notion-indent);
}

This CSS rule automatically applies indentation to nested blocks. You can easily adjust the degree of indentation by modifying the --notion-indent variable.

Dark Mode and Custom Themes

Notionpresso supports dark mode by default. Dark mode is implemented as follows:

[data-theme="dark"] .notion {
  --fg-color: rgba(255, 255, 255, 0.9);
  --bg-color: #2f3437;
  /* Other dark mode related variables... */
}

Also, you can easily apply custom themes. You can apply the desired theme using the data-theme attribute:

<Notion data-theme="custom">{/* Notion content */}</Notion>

And you can define styles in CSS as follows:

.notion[data-theme="custom"] {
  --fg-color: #333;
  --bg-color: #f4f4f4;
  /* Other custom theme related variables... */
}

Using this method, you can easily override default styles by utilizing selector priority.

Style Customization Examples

1. Changing Global Font:

   .notion[data-theme="custom"] {
     --notion-font: "Roboto", sans-serif;
   }
   

2. Changing Heading Styles:

   .notion[data-theme="custom"] .notion-h1 {
     font-size: 2.5em;
     color: var(--select-color-0);
     border-bottom: 2px solid var(--fg-color-1);
   }
   

3. Adjusting Indentation:

   .notion[data-theme="custom"] {
     --notion-indent: 20px;
   }
   

4. Implementing Dark Mode:

   [data-theme="dark"] .notion[data-theme="custom"] {
     --fg-color: rgba(255, 255, 255, 0.9);
     --bg-color: #2f3437;
     /* Adjust other color variables appropriately */
   }
   

By following this CSS structure and styling guide, you can implement consistent and easily maintainable styles using Notionpresso. Furthermore, detailed customization is possible as needed.