Base16 Framework

repository·main·Indexed 21 days ago

https://github.com/chriskempson/base16

A framework for creating consistent, color-coordinated themes across various applications using a standardized 16-color palette (8 shades and 8 accents). It provides guidelines for styling syntax, building schemes in YAML, and using Mustache templates to generate application-specific themes via builders like base16-builder-php.

Tokens
2.1K
Snippets
6
Records
9
Agent score
74%

What's inside Base16

  1. What is Base16?

    main

    Base16 is not a theme itself, but a framework for building themes styled after the Tomorrow theme. It uses a standardized base of sixteen colors to ensure consistency across different applications.

    To use the framework, you follow specific guidelines for:

    • Styling syntax: How to map colors to code elements.
    • Building schemes and templates: How to structure the color data and the application-specific templates that consume them.
  2. How the Base16 Builder process works

    main

    A Base16 builder is an application that compiles a YAML scheme file and a template file to produce a theme file for a specific application.

    The Workflow:

    1. The builder accepts scheme data in YAML format via stdin (Standard Input).
    2. The builder uses this data to populate variables within a template file (typically using the Mustache templating language).
    3. The resulting application theme is sent to stdout (Standard Output).
    4. Any errors encountered during the process are sent to stderr (Standard Error).
    cat scheme.yaml | base16-builder --template template.mustache > output-theme.ext
  3. Understand the limitations of the Base16 framework

    main

    Base16 is designed to be simple and scoped. When building or using themes, keep the following constraints in mind:

    • Fixed Palette: It uses a 16-color palette consisting of 8 shades and 8 accents.
    • Uniformity: All themes produced via the framework are identical in structure, differing only in their color variations.
    • Coupled Colors: You cannot change the color of a single element in isolation without affecting other elements that share that color mapping.
    • Simple Builders: Builders are specialized tools designed for a single task (generating themes from schemes and templates).
  4. Create Template Config Files

    main

    Template config files are used by templates to pass information to a Builder. These files must be named config.yaml and reside within a templates folder.

    Each top-level key in the YAML file corresponds to a template file (e.g., a key named default refers to templates/default.mustache). For each template, you define:

    • extension: The file extension for the produced file (e.g., .file-extension). The resulting filename will follow the pattern base16-[template-name]-[scheme-name].[extension].
    • output: The directory name within the templates root where the processed files will be saved.
    default: 
        extension: .file-extension
        output: output-directory-name
        
    additional: 
        extension: .file-extension
        output: output-directory-name
  5. Create Scheme Files

    main

    Scheme files define the color palette used by a Builder to process templates. A scheme file is a YAML structure containing metadata and 16 specific color keys ranging from base00 to base0F.

    Important: Hexadecimal color values must be provided as strings and must not be preceded by a # symbol.

    scheme: "Scheme Name"
    author: "Scheme Author"
    base00: "000000"
    base01: "111111"
    base02: "222222"
    base03: "333333"
    base04: "444444"
    base05: "555555"
    base06: "666666"
    base07: "777777"
    base08: "888888"
    base09: "999999"
    base0A: "aaaaaa"
    base0B: "bbbbbb"
    base0C: "cccccc"
    base0D: "dddddd"
    base0E: "eeeeee"
    base0F: "ffffff"
  6. Compile a theme using base16-builder

    main

    To generate a theme file, pipe a YAML scheme file into the base16-builder command and specify the target template using the --template flag. Redirect the output to a file of your choice.

    Example for generating a Vim theme from a 'tomorrow-night' scheme:

    cat tomorrow-night.yaml | base16-builder --template vim.mustache > tomorrow-night.vim
  7. Reference: Base16 Template Tags

    main

    When creating a Mustache template for a Base16 builder, you can use the following tag variables. These are derived from the provided YAML scheme file.

    Note: The index (e.g., 00 through 0F) applies to all color-related tags (e.g., base00-... through base0F-...).

    ### Metadata
    - `scheme-name`: The name of the scheme.
    - `scheme-author`: The author of the scheme.
    - `scheme-slug`: The `scheme-name` lowercased with dashes for spaces.
    
    ### Color Variables (for indices 00 to 0F)
    - `base00-hex`: Hex value (e.g., "7cafc2").
    - `base00-hex-bgr`: Reversed hex value (e.g., "c2af7c").
    - `base00-hex-r`: First two characters of hex (e.g., "7c").
    - `base00-hex-g`: Middle two characters of hex (e.g., "af").
    - `base00-hex-b`: Last two characters of hex (e.g., "c2").
    - `base00-rgb-r`: RGB integer component (e.g., "124").
    - `base00-rgb-g`: RGB integer component (e.g., "175").
    - `base00-rgb-b`: RGB integer component (e.g., "194").
    - `base00-dec-r`: Decimal RGB component (e.g., "0.87...").
    - `base00-dec-g`: Decimal RGB component (e.g., "0.50...").
    - `base00-dec-b`: Decimal RGB component (e.g., "0.21...").
    - `base00-hsl-h`: HSL Hue component (e.g., "0.87...").
    - `base00-hsl-s`: HSL Saturation component (e.g., "0.50...").
    - `base00-hsl-l`: HSL Lightness component (e.g., "0.21...")
  8. Explore Base16 resources and tools

    main

    The Base16 ecosystem is composed of several specialized repositories and third-party tools:

    Official/Core Resources

    Third-party CLI Tools

    • auto-base16-theme: Create a theme from an input image's color palette.
    • base16-manager: Install templates and set themes globally.
    • base16-shell-preview: Preview and set base16-shell themes.
    • base16-universal-manager: Automatically fetch, build, and set themes for all supported applications.
    • flavours: Manage and apply templates by specifying a scheme name.

    Other Tools

    • Themix/Oomox: A GUI for generating themes (GTK, Archdroid, etc.) that includes a Base16 plugin for importing/exporting YAML files via Mustache templates.
    • base16-spectrum-generator: A Python script to generate .png color spectrums for a theme.
  9. Reference: Scheme File Keys

    main

    Scheme files require the following keys to define the color palette and metadata:

    scheme: "Scheme Name"
    author: "Scheme Author"
    base00: "000000"
    base01: "111111"
    base02: "222222"
    base03: "333333"
    base04: "444444"
    base05: "555555"
    base06: "666666"
    base07: "777777"
    base08: "888888"
    base09: "999999"
    base0A: "aaaaaa"
    base0B: "bbbbbb"
    base0C: "cccccc"
    base0D: "dddddd"
    base0E: "eeeeee"
    base0F: "ffffff"