---
title: Color Theme Schema | doc-utils
layout: main.html
breadcrumb:
- '[doc-utils](index.html)'
- '[color-themes](color-themes/index.html)'
---
$schema: http://json-schema.org/draft-07/schema
$id: https://gitea.jbrumond.me/doc-utils/color-themes/v1.json
type: object
title: Color Theme
required:
- name
- colors
properties:
  name:
    type: string
    description: >
      The name of the color theme as it is displayed in web UI. Must match the file
      name of the theme file, e.g. a theme called "example-theme" should be located
      in a file called "example-theme.theme.json"
  colors:
    type: object
    description: Contains the values that will be used to populate the CSS variables
      controlling the UI theme
    properties:
      # Content Background Colors
      bg_main:
        $ref: "#/definitions/css_color"
        description: >
          The primary background color applied to the page as a whole. Must have good contrast against
          the main copy text colors text_heading, text_body, text_light, text_link, text_link_active,
          and text_link_visited
      bg_light:
        $ref: "#/definitions/css_color"
        description: >
          A lighter background color applied to content panels; Should have a relatively low contrast against
          the bg_main color, providing only a light accent. Must have good contrast against the main copy text
          colors text_heading, text_body, text_light, text_link, text_link_active, and text_link_visited
      bg_heavy:
        $ref: "#/definitions/css_color"
        description: >
          A heavier background color applied to content panels; Should have a relatively higher contrast against
          the bg_main color, directing attention to what is "important" or "primary" content inside of it. Must
          have good contrast against the main copy text colors text_heading, text_body, text_light, text_link,
          text_link_active, and text_link_visited
      bg_popup_mask:
        $ref: "#/definitions/css_color"
        # todo: description

      # 
      line:
        $ref: "#/definitions/css_color"
        # todo: description
      line_safe:
        $ref: "#/definitions/css_color"
        # todo: description
      line_warn:
        $ref: "#/definitions/css_color"
        # todo: description
      line_danger:
        $ref: "#/definitions/css_color"
        # todo: description

      # Main Content Text Colors
      text_heading:
        $ref: "#/definitions/css_color"
        description: The color of heading text
      text_body:
        $ref: "#/definitions/css_color"
        description: The color of main / normal body copy text
      text_light:
        $ref: "#/definitions/css_color"
        # todo: description
      text_safe:
        $ref: "#/definitions/css_color"
        # todo: description
      text_warn:
        $ref: "#/definitions/css_color"
        # todo: description
      text_danger:
        $ref: "#/definitions/css_color"
        # todo: description
      text_link:
        $ref: "#/definitions/css_color"
        description: The default color of hyperlinks
      text_link_active:
        $ref: "#/definitions/css_color"
        description: The color of hyperlinks that are currently active / selected
      text_link_visited:
        $ref: "#/definitions/css_color"
        description: The color of hyperlinks that have been previously visited

      # QR Codes
      bg_qrcode:
        $ref: "#/definitions/css_color"
        description: >
          The background color (i.e. typically white) of rendered QR codes
      stroke_qrcode:
        $ref: "#/definitions/css_color"
        description: >
          The stroke color (i.e. typically black) of rendered QR codes

      # Text Highlighted with <mark>
      text_highlight:
        $ref: "#/definitions/css_color"
        description: >
          The color of text highlighted using the <mark>text</mark> tag (or by using ==text==
          in markdown)
      bg_text_highlight:
        $ref: "#/definitions/css_color"
        description: >
          The background color of text highlighted using the <mark>text</mark> tag (or by using
          ==text== in markdown)

      # User-Selected Text
      text_selection:
        $ref: "#/definitions/css_color"
        description: The color of text that has been selected by the user
      bg_text_selection:
        $ref: "#/definitions/css_color"
        description: The background color of text that has been selected by the user

      # Buttons
      bg_button_primary:
        $ref: "#/definitions/css_color"
        description: >
          The background color of "primary" buttons (typically major, positive actions, like "save"
          or "publish")
      bg_button_primary_hover:
        $ref: "#/definitions/css_color"
        description: >
          The background color of "primary" buttons (typically major, positive actions, like "save"
          or "publish") while the user is hovering over them
      text_button_primary:
        $ref: "#/definitions/css_color"
        description: >
          The text color of "primary" buttons (typically major, positive actions, like "save" or "publish")
      bg_button_secondary:
        $ref: "#/definitions/css_color"
        description: >
          The background color of "secondary" buttons (typically safe, unimpactful, or backward moving
          actions, like "cancel" or "preview")
      bg_button_secondary_hover:
        $ref: "#/definitions/css_color"
        description: >
          The background color of "secondary" buttons (typically safe, unimpactful, or backward moving
          actions, like "cancel" or "preview") while the user is hovering over them
      text_button_secondary:
        $ref: "#/definitions/css_color"
        description: >
          The text color of "secondary" buttons (typically safe, unimpactful, or backward moving actions,
          like "cancel" or "preview")

      # Error Boxes / Alerts
      bg_error_box:
        $ref: "#/definitions/css_color"
        # todo: description
      border_error_box:
        $ref: "#/definitions/css_color"
        # todo: description
      text_error_box:
        $ref: "#/definitions/css_color"
        # todo: description

      # Inputs / Forms
      bg_input:
        $ref: "#/definitions/css_color"
        # todo: description
      border_input:
        $ref: "#/definitions/css_color"
        # todo: description
      border_input_invalid:
        $ref: "#/definitions/css_color"
        # todo: description

      # Activity / Result Indicators
      icon_active_indicator:
        $ref: "#/definitions/css_color"
        # todo: description
      icon_success_indicator:
        $ref: "#/definitions/css_color"
        # todo: description
      icon_failure_indicator:
        $ref: "#/definitions/css_color"
        # todo: description
      icon_warning_indicator:
        $ref: "#/definitions/css_color"
        # todo: description

      # Semantic Accent Colors
      accent_info:
        $ref: "#/definitions/css_color"
        # todo: description
      accent_highlight:
        $ref: "#/definitions/css_color"
        # todo: description
      accent_warning:
        $ref: "#/definitions/css_color"
        # todo: description
      accent_problem:
        $ref: "#/definitions/css_color"
        # todo: description

      # Charts
      chart_axis:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_text:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_guideline:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_0:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_1:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_2:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_3:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_4:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_5:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_6:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_7:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_8:
        $ref: "#/definitions/css_color"
        # todo: description
      chart_data_9:
        $ref: "#/definitions/css_color"
        # todo: description

      # Pre-Formatted / Syntax Highlighted Code Blocks
      code_normal:
        $ref: "#/definitions/css_color"
        # todo: description
      code_shadow:
        $ref: "#/definitions/css_color"
        # todo: description
      code_background:
        $ref: "#/definitions/css_color"
        # todo: description
      code_selection:
        $ref: "#/definitions/css_color"
        # todo: description
      code_comment:
        $ref: "#/definitions/css_color"
        # todo: description
      code_punc:
        $ref: "#/definitions/css_color"
        # todo: description
      code_operator:
        $ref: "#/definitions/css_color"
        # todo: description
      code_const_literal:
        $ref: "#/definitions/css_color"
        # todo: description
      code_number_literal:
        $ref: "#/definitions/css_color"
        # todo: description
      code_boolean_literal:
        $ref: "#/definitions/css_color"
        # todo: description
      code_tag:
        $ref: "#/definitions/css_color"
        # todo: description
      code_string:
        $ref: "#/definitions/css_color"
        # todo: description
      code_keyword:
        $ref: "#/definitions/css_color"
        # todo: description
      code_func_name:
        $ref: "#/definitions/css_color"
        # todo: description
      code_class_name:
        $ref: "#/definitions/css_color"
        # todo: description
      code_regex_important:
        $ref: "#/definitions/css_color"
        # todo: description
      code_variable:
        $ref: "#/definitions/css_color"
        # todo: description
      code_builtin:
        $ref: "#/definitions/css_color"
        # todo: description
      code_attr_name:
        $ref: "#/definitions/css_color"
        # todo: description
      code_gutter_divider:
        $ref: "#/definitions/css_color"
        # todo: description
      code_line_number:
        $ref: "#/definitions/css_color"
        # todo: description
      code_line_highlight:
        $ref: "#/definitions/css_color"
        # todo: description
definitions:
  css_color:
    title: CSS Color
    $comment: 'todo: other color function formats, like hsl'
    oneOf:
      - type: string
        title: Hex Colors
        format: regex
        pattern: ^(#[0-9a-fA-F]{3}(?:[0-9a-fA-F]{3}(?:[0-9a-fA-F]{2})?)?)$
        examples:
          - "#000"
          - "#ff0000"
          - "#ffccaa88"
      - type: string
        title: RGB Colors
        format: regex
        pattern: ^(rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\))$
        examples:
          - rgb(10, 70, 130)
      - type: string
        title: RGBA Colors
        format: regex
        pattern: ^(rgba\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([01]|[01]?\.[0-9]{1,3})\s*\))$
        examples:
          - rgba(10, 70, 130, 0.5)
      # todo: other color function formats, like hsl
      - type: string
        title: transparent Keyword
        const: transparent
      - type: string
        title: currentcolor Keyword
        const: currentcolor
      - type: string
        title: 'Named Colors: CSS Level 1'
        enum:
          - black
          - silver
          - gray
          - white
          - maroon
          - red
          - purple
          - fuchsia
          - green
          - lime
          - olive
          - yellow
          - navy
          - blue
          - teal
          - aqua
      - type: string
        title: 'Named Colors: CSS Level 2'
        enum:
          - orange
      - type: string
        title: 'Named Colors: CSS Level 3'
        enum:
          - aliceblue
          - antiquewhite
          - aquamarine
          - azure
          - beige
          - bisque
          - blanchedalmond
          - blueviolet
          - brown
          - burlywood
          - cadetblue
          - chartreuse
          - chocolate
          - coral
          - cornflowerblue
          - cornsilk
          - crimson
          - cyan
          - aqua
          - darkblue
          - darkcyan
          - darkgoldenrod
          - darkgray
          - darkgreen
          - darkgrey
          - darkkhaki
          - darkmagenta
          - darkolivegreen
          - darkorange
          - darkorchid
          - darkred
          - darksalmon
          - darkseagreen
          - darkslateblue
          - darkslategray
          - darkslategrey
          - darkturquoise
          - darkviolet
          - deeppink
          - deepskyblue
          - dimgray
          - dimgrey
          - dodgerblue
          - firebrick
          - floralwhite
          - forestgreen
          - gainsboro
          - ghostwhite
          - gold
          - goldenrod
          - greenyellow
          - grey
          - honeydew
          - hotpink
          - indianred
          - indigo
          - ivory
          - khaki
          - lavender
          - lavenderblush
          - lawngreen
          - lemonchiffon
          - lightblue
          - lightcoral
          - lightcyan
          - lightgoldenrodyellow
          - lightgray
          - lightgreen
          - lightgrey
          - lightpink
          - lightsalmon
          - lightseagreen
          - lightskyblue
          - lightslategray
          - lightslategrey
          - lightsteelblue
          - lightyellow
          - limegreen
          - linen
          - magenta
          - fuchsia
          - mediumaquamarine
          - mediumblue
          - mediumorchid
          - mediumpurple
          - mediumseagreen
          - mediumslateblue
          - mediumspringgreen
          - mediumturquoise
          - mediumvioletred
          - midnightblue
          - mintcream
          - mistyrose
          - moccasin
          - navajowhite
          - oldlace
          - olivedrab
          - orangered
          - orchid
          - palegoldenrod
          - palegreen
          - paleturquoise
          - palevioletred
          - papayawhip
          - peachpuff
          - peru
          - pink
          - plum
          - powderblue
          - rosybrown
          - royalblue
          - saddlebrown
          - salmon
          - sandybrown
          - seagreen
          - seashell
          - sienna
          - skyblue
          - slateblue
          - slategray
          - slategrey
          - snow
          - springgreen
          - steelblue
          - tan
          - thistle
          - tomato
          - transparent
          - turquoise
          - violet
          - wheat
          - whitesmoke
          - yellowgreen
      - type: string
        title: 'Named Colors: CSS Level 4'
        enum:
          - rebeccapurple
