@charset "utf-8"; // Default color scheme settings // These are overridden in classic.css and dark.scss $color-scheme-auto: true !default; $color-scheme-dark: false !default; // Light mode // ---------- $lm-brand-color: #818181 !default; $lm-brand-color-light: lighten($lm-brand-color, 40%) !default; $lm-brand-color-dimmed: darken($lm-brand-color, 11%) !default; $lm-brand-color-dark: darken($lm-brand-color, 25%) !default; $lm-site-title-color: $lm-brand-color-dark !default; $lm-heading-color: #111111 !default; $lm-text-color: $lm-brand-color-dark !default; $lm-background-color: #fdfdfd !default; $lm-code-background-color: #f6f8fa !default; $lm-link-base-color: #1e69d8 !default; $lm-link-visited-color: darken($lm-link-base-color, 15%) !default; $lm-link-hover-color: $lm-text-color !default; $lm-border-color-01: $lm-brand-color-light !default; $lm-border-color-02: lighten($lm-brand-color, 35%) !default; $lm-border-color-03: $lm-brand-color-dark !default; $lm-table-text-color: lighten($lm-heading-color, 18%) !default; $lm-table-zebra-color: lighten($lm-brand-color, 46%) !default; $lm-table-header-bg-color: lighten($lm-brand-color, 43%) !default; $lm-table-header-border: lighten($lm-brand-color, 37%) !default; $lm-table-border-color: $lm-border-color-01 !default; // Syntax highlighting styles should be adjusted appropriately for every "skin" // ---------------------------------------------------------------------------- @mixin lm-highlight { .highlight { .err { color: #e3d2d2; background-color: #a61717 } // Error .c { color: #9c9996 } // Comment .cm { color: #9c9996 } // Comment.Multiline .cp { color: #9c9996 } // Comment.Preproc .c1 { color: #9c9996 } // Comment.Single .cs { color: #9c9996; font-style: italic } // Comment.Special .gd { color: #e25050 } // Generic.Deleted .gd .x { color: #e25050 } // Generic.Deleted.Specific .ge { font-style: italic } // Generic.Emph .gh { color: #999999 } // Generic.Heading .gi { color: #3f993f } // Generic.Inserted .gi .x { color: #3f993f } // Generic.Inserted.Specific .go { color: #888888 } // Generic.Output .gp { color: #555555 } // Generic.Prompt .gr { color: #aa0000 } // Generic.Error .gs { font-weight: bold } // Generic.Strong .gt { color: #aa0000 } // Generic.Traceback .gu { color: #aaaaaa } // Generic.Subheading .k { color: #cf222e } // Keyword .kc { color: #cf222e } // Keyword.Constant .kd { color: #cf222e } // Keyword.Declaration .kp { color: #cf222e } // Keyword.Pseudo .kr { color: #cf222e } // Keyword.Reserved .kt { color: #445588 } // Keyword.Type .n { color: #111111 } .na { color: #097e39 } // Name.Attribute .nb { color: #cf222e } // Name.Builtin .bp { color: #999999 } // Name.Builtin.Pseudo .nc { color: #097e39 } // Name.Class .ne { color: #990000 } // Name.Exception .nf { color: #2c7d74 } // Name.Function .ni { color: #097e39 } // Name.Entity .nn { color: #097e39 } // Name.Namespace .no { color: #a61154 } // Name.Constant .nt { color: #b81e63 } // Name.Tag .nv { color: #752a75 } // Name.Variable .vc { color: #752a75 } // Name.Variable.Class .vg { color: #752a75 } // Name.Variable.Global .vi { color: #752a75 } // Name.Variable.Instance .o { color: #0842a0 } // Operator .ow { color: #0842a0 } // Operator.Word .m { color: #005a99 } // Literal.Number .mf { color: #005a99 } // Literal.Number.Float .mh { color: #005a99 } // Literal.Number.Hex .mi { color: #005a99 } // Literal.Number.Integer .il { color: #005a99 } // Literal.Number.Integer.Long .mo { color: #005a99 } // Literal.Number.Oct .s { color: #914d08 } // Literal.String .s1 { color: #914d08 } // Literal.String.Single .s2 { color: #914d08 } // Literal.String.Double .sb { color: #914d08 } // Literal.String.Backtick .sc { color: #914d08 } // Literal.String.Char .sd { color: #914d08 } // Literal.String.Doc .se { color: #914d08 } // Literal.String.Escape .sh { color: #914d08 } // Literal.String.Heredoc .si { color: #914d08 } // Literal.String.Interpol .sr { color: #009926 } // Literal.String.Regex .ss { color: #0842a0 } // Literal.String.Symbol .sx { color: #914d08 } // Literal.String.Other .w { color: #bbbbbb } // Text.Whitespace .lineno, .gl { color: #9c9996 } // Line Number .hll { background-color: #ffffcc } // Marked-lines } } // Dark mode // --------- $dm-brand-color: #999999 !default; $dm-brand-color-light: lighten($dm-brand-color, 5%) !default; $dm-brand-color-dimmed: darken($dm-brand-color, 8%) !default; $dm-brand-color-dark: darken($dm-brand-color, 43%) !default; $dm-site-title-color: $dm-brand-color-light !default; $dm-heading-color: #bbbbbb !default; $dm-text-color: darken($dm-heading-color, 15%) !default; $dm-background-color: #181818 !default; $dm-code-background-color: #222222 !default; $dm-link-base-color: #5691cd !default; $dm-link-visited-color: #80bbff !default; $dm-link-hover-color: $dm-text-color !default; $dm-border-color-01: $dm-brand-color-dark !default; $dm-border-color-02: $dm-brand-color-light !default; $dm-border-color-03: $dm-brand-color !default; $dm-table-text-color: $dm-text-color !default; $dm-table-zebra-color: lighten($dm-background-color, 4%) !default; $dm-table-header-bg-color: lighten($dm-background-color, 10%) !default; $dm-table-header-border: lighten($dm-background-color, 15%) !default; $dm-table-border-color: $dm-border-color-01 !default; // Syntax highlighting styles should be adjusted appropriately for every "skin" // List of tokens: https://github.com/rouge-ruby/rouge/wiki/List-of-tokens // Some colors come from Material Theme Darker: // https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/settings/specific/darker-hc.ts // https://github.com/material-theme/vsc-material-theme/blob/master/scripts/generator/color-set.ts // ---------------------------------------------------------------------------- @mixin dm-highlight { .highlight { .err { color: #e3d2d2; background-color: #8c2121 } // Error .c { color: #8a8a8a } // Comment .c1 { color: #8a8a8a } // Comment.Single .cm { color: #8a8a8a } // Comment.Multiline .cp { color: #8a8a8a } // Comment.Preproc .cs { color: #8a8a8a; font-style: italic } // Comment.Special .gd { color: #d85a5a } // Generic.Deleted .gd .x { color: #d85a5a } // Generic.Deleted.Specific .ge { font-style: italic } // Generic.Emph .gh { color: #999999 } // Generic.Heading .gi { color: #4ec64e } // Generic.Inserted .gi .x { color: #4ec64e } // Generic.Inserted.Specific .go { color: #888888 } // Generic.Output .gp { color: #555555 } // Generic.Prompt .gr { color: #f07178 } // Generic.Error .gs { font-weight: bold } // Generic.Strong .gt { color: #f07178 } // Generic.Traceback .gu { color: #aaaaaa } // Generic.Subheading .k { color: #d85a7b } // Keyword .kc { color: #d85a7b } // Keyword.Constant .kd { color: #d85a7b } // Keyword.Declaration .kp { color: #d85a7b } // Keyword.Pseudo .kr { color: #d85a7b } // Keyword.Reserved .kt { color: #ffcb6b } // Keyword.Type .n { color: #c7d1d8 } .na { color: #11a69f } // Name.Attribute .nb { color: #d85a7b } // Name.Builtin .bp { color: #999999 } // Name.Builtin.Pseudo .nc { color: #11a69f } // Name.Class .ne { color: #990000 } // Name.Exception .nf { color: #5ab780 } // Name.Function .ni { color: #11a69f } // Name.Entity .nn { color: #11a69f } // Name.Namespace .no { color: #9d99e6 } // Name.Constant .nt { color: #de3581 } // Name.Tag .nv { color: #9680b1 } // Name.Variable .vc { color: #9680b1 } // Name.Variable.Class .vg { color: #9680b1 } // Name.Variable.Global .vi { color: #9680b1 } // Name.Variable.Instance .o { color: #bcd890 } // Operator .ow { color: #bcd890 } // Operator.Word .m { color: #9d99e6 } // Literal.Number .mf { color: #9d99e6 } // Literal.Number.Float .mh { color: #9d99e6 } // Literal.Number.Hex .mi { color: #9d99e6 } // Literal.Number.Integer .il { color: #9d99e6 } // Literal.Number.Integer.Long .mo { color: #9d99e6 } // Literal.Number.Oct .s { color: #baa94a } // Literal.String .s1 { color: #baa94a } // Literal.String.Single .s2 { color: #baa94a } // Literal.String.Double .sb { color: #baa94a } // Literal.String.Backtick .sc { color: #baa94a } // Literal.String.Char .sd { color: #baa94a } // Literal.String.Doc .se { color: #baa94a } // Literal.String.Escape .sh { color: #baa94a } // Literal.String.Heredoc .si { color: #baa94a } // Literal.String.Interpol .sr { color: #009926 } // Literal.String.Regex .ss { color: #3c90f5 } // Literal.String.Symbol .sx { color: #baa94a } // Literal.String.Other .w { color: #eeffff } // Text.Whitespace .lineno, .gl { color: #8a8a8a } // Line Number .hll { background-color: #373730 } // Marked-lines } } // Mode selection // -------------- // Classic skin (always light mode) // Assign outside of the if construct to establish global variable scope $brand-color: $lm-brand-color; $brand-color-light: $lm-brand-color-light; $brand-color-dimmed: $lm-brand-color-dimmed; $brand-color-dark: $lm-brand-color-dark; $site-title-color: $lm-site-title-color; $heading-color: $lm-heading-color; $text-color: $lm-text-color; $background-color: $lm-background-color; $code-background-color: $lm-code-background-color; $link-base-color: $lm-link-base-color; $link-visited-color: $lm-link-visited-color; $link-hover-color: $lm-link-hover-color; $border-color-01: $lm-border-color-01; $border-color-02: $lm-border-color-02; $border-color-03: $lm-border-color-03; $table-text-color: $lm-table-text-color; $table-zebra-color: $lm-table-zebra-color; $table-header-bg-color: $lm-table-header-bg-color; $table-header-border: $lm-table-header-border; $table-border-color: $lm-table-border-color; @if $color-scheme-auto { // Auto mode :root { --minima-brand-color: #{$lm-brand-color}; --minima-brand-color-light: #{$lm-brand-color-light}; --minima-brand-color-dimmed: #{$lm-brand-color-dimmed}; --minima-brand-color-dark: #{$lm-brand-color-dark}; --minima-site-title-color: #{$lm-site-title-color}; --minima-heading-color: #{$lm-heading-color}; --minima-text-color: #{$lm-text-color}; --minima-background-color: #{$lm-background-color}; --minima-code-background-color: #{$lm-code-background-color}; --minima-link-base-color: #{$lm-link-base-color}; --minima-link-visited-color: #{$lm-link-visited-color}; --minima-link-hover-color: #{$lm-link-hover-color}; --minima-border-color-01: #{$lm-border-color-01}; --minima-border-color-02: #{$lm-border-color-02}; --minima-border-color-03: #{$lm-border-color-03}; --minima-table-text-color: #{$lm-table-text-color}; --minima-table-zebra-color: #{$lm-table-zebra-color}; --minima-table-header-bg-color: #{$lm-table-header-bg-color}; --minima-table-header-border: #{$lm-table-header-border}; --minima-table-border-color: #{$lm-table-border-color}; } @include lm-highlight; @media (prefers-color-scheme: dark) { :root { --minima-brand-color: #{$dm-brand-color}; --minima-brand-color-light: #{$dm-brand-color-light}; --minima-brand-color-dimmed: #{$dm-brand-color-dimmed}; --minima-brand-color-dark: #{$dm-brand-color-dark}; --minima-site-title-color: #{$dm-site-title-color}; --minima-heading-color: #{$dm-heading-color}; --minima-text-color: #{$dm-text-color}; --minima-background-color: #{$dm-background-color}; --minima-code-background-color: #{$dm-code-background-color}; --minima-link-base-color: #{$dm-link-base-color}; --minima-link-visited-color: #{$dm-link-visited-color}; --minima-link-hover-color: #{$dm-link-hover-color}; --minima-border-color-01: #{$dm-border-color-01}; --minima-border-color-02: #{$dm-border-color-02}; --minima-border-color-03: #{$dm-border-color-03}; --minima-table-text-color: #{$dm-table-text-color}; --minima-table-zebra-color: #{$dm-table-zebra-color}; --minima-table-header-bg-color: #{$dm-table-header-bg-color}; --minima-table-header-border: #{$dm-table-header-border}; --minima-table-border-color: #{$dm-table-border-color}; } @include dm-highlight; } $brand-color: var(--minima-brand-color); $brand-color-light: var(--minima-brand-color-light); $brand-color-dimmed: var(--minima-brand-color-dimmed); $brand-color-dark: var(--minima-brand-color-dark); $site-title-color: var(--minima-site-title-color); $heading-color: var(--minima-heading-color); $text-color: var(--minima-text-color); $background-color: var(--minima-background-color); $code-background-color: var(--minima-code-background-color); $link-base-color: var(--minima-link-base-color); $link-visited-color: var(--minima-link-visited-color); $link-hover-color: var(--minima-link-hover-color); $border-color-01: var(--minima-border-color-01); $border-color-02: var(--minima-border-color-02); $border-color-03: var(--minima-border-color-03); $table-text-color: var(--minima-table-text-color); $table-zebra-color: var(--minima-table-zebra-color); $table-header-bg-color: var(--minima-table-header-bg-color); $table-header-border: var(--minima-table-header-border); $table-border-color: var(--minima-table-border-color); } @else if $color-scheme-dark { // Dark skin (always dark mode) $brand-color: $dm-brand-color; $brand-color-light: $dm-brand-color-light; $brand-color-dimmed: $dm-brand-color-dimmed; $brand-color-dark: $dm-brand-color-dark; $site-title-color: $dm-site-title-color; $heading-color: $dm-heading-color; $text-color: $dm-text-color; $background-color: $dm-background-color; $code-background-color: $dm-code-background-color; $link-base-color: $dm-link-base-color; $link-visited-color: $dm-link-visited-color; $link-hover-color: $dm-link-hover-color; $border-color-01: $dm-border-color-01; $border-color-02: $dm-border-color-02; $border-color-03: $dm-border-color-03; $table-text-color: $dm-table-text-color; $table-zebra-color: $dm-table-zebra-color; $table-header-bg-color: $dm-table-header-bg-color; $table-header-border: $dm-table-header-border; $table-border-color: $dm-table-border-color; @include dm-highlight; } @else { // Classic skin syntax highlighting @include lm-highlight; }