Dark Mode CSS Variables (dark_css)

JSON Schema

{
  "$id": "https://platen.io/schemas/platen/site/theme/variables/dark_css/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines custom CSS properties that define the dark mode for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/",
  "properties": {
    "body-background": {
      "default": "#343a40",
      "description": "Defines the background of the page body for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#body-background",
      "title": "Body Background",
      "type": "string"
    },
    "body-font-color": {
      "default": "#e9ecef",
      "description": "Defines the color of body text for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#body-font-color",
      "title": "Body Font Color",
      "type": "string"
    },
    "color-link": {
      "default": "#84b2ff",
      "description": "Defines the color of links for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#color-link",
      "title": "Link Color",
      "type": "string"
    },
    "color-visited-link": {
      "default": "#b88dff",
      "description": "Defines the color of links for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#color-visited-link",
      "title": "Visited Link Color",
      "type": "string"
    },
    "gray-100": {
      "default": "rgba(255, 255, 255, 0.1)",
      "description": "Defines the lightest gray color for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#gray-100",
      "title": "Lightest Gray",
      "type": "string"
    },
    "gray-200": {
      "default": "rgba(255, 255, 255, 0.2)",
      "description": "Defines the light gray color for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#gray-200",
      "title": "Light Gray",
      "type": "string"
    },
    "gray-500": {
      "default": "rgba(255, 255, 255, 0.5)",
      "description": "Defines the medium gray color for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#gray-500",
      "title": "Medium Gray",
      "type": "string"
    },
    "icon-filter": {
      "default": "brightness(0) invert(1)",
      "description": "Defines the filter to apply to icons for the theme.\n\nhttps://platen.io/schemas/platen/site/theme/variables/dark_css/#icon-filter",
      "title": "Icon Filter",
      "type": "string"
    }
  },
  "title": "Dark Mode CSS Variables",
  "type": "object"
}

Lightest Gray (gray-100)

Defines the lightest gray color for the theme. It defaults to rgba(255, 255, 255, 0.1). You can specify any single valid color, or reference any color value defined in theme.variables.basic_scss or theme.variables.calculated_scss.

This value is used for:

• The background color of unhighlighted blocks of code
• The background color of even rows in tables
• The background dcolor of the site search box
• The border separating the tabs and content added with Platen’s tabs markup

For more information on valid values, see color in the MDN documentation.

Light Gray (gray-200)

Defines the light gray color for the theme. It defaults to rgba(255, 255, 255, 0.2). You can specify any single valid color, or reference any color value defined in theme.variables.basic_scss or theme.variables.calculated_scss.

This value is used for:

• The opening border of blockquotes
• The background color of inline code
• The border for the details element
• The color of the hr element
• The border separating rows in tables
• The border for tabs containers

For more information on valid values, see color in the MDN documentation.

Medium Gray (gray-500)

Defines the medium gray color for the theme. It defaults to rgba(255, 255, 255, 0.5). You can specify any single valid color, or reference any color value defined in theme.variables.basic_scss or theme.variables.calculated_scss.

This value is used for the background color of the scrollbars for overflow content, when visible.

For more information on valid values, see color in the MDN documentation.

Link Color (color-link)

Defines the color of links for the theme. It defaults to #84b2ff. You can specify any single valid color, or reference any color value in theme.variables.basic_scss or theme.variables.calculated_scss.

This value is used for the color of:

• Normal links in the body
• The active page link in the site menu
• The text and border for buttons
• The bottom border of the open tab for a group added with the tabs markup

For more information on valid values, see color in the MDN documentation.

Visited Link Color (color-visited-link)

Defines the color of links for the theme. It defaults to #b88dff. You can specify any single valid color, or reference any color value defined in theme.variables.basic_scss or theme.variables.calculated_scss.

This value is used for the color of normal links in the body that the site visitor has already been to.

For more information on valid values, see color in the MDN documentation.

Body Background (body-background)

Defines the background of the page body for the theme. It defaults to #343a40. You can specify any single valid color, or reference any color value defined in theme.variables.basic_scss or theme.variables.calculated_scss. You can also specify any other valid value for the background CSS property, like an image or multiple layers.

Body Font Color (body-font-color)

Defines the color of body text for the theme. It defaults to #e9ecef. You can specify any single valid color, or reference any color value defined in theme.variables.basic_scss or theme.variables.calculated_scss.

This value is used for:

• The color of normal text in the body
• The color of text in the site search bar
• The color of the top border for the site search spinner, when visible

For more information on valid values, see color in the MDN documentation

Icon Filter (icon-filter)

Defines the filter to apply to icons for the theme. It defaults to brightness(0) invert(1). You can specify any single valid filter, or reference any filter value in theme.variables.basic_scss or theme.variables.calculated_scss.

This value is applied to any element with the platen-icon class, such as the site branding icon, the calendar in the footer for last updated, the site menu and table of contents icons in mobile view, and the language picker icon.

For more information on valid values, see filter in the MDN documentation.