Dark theme and customization support

Created on 18 June 2024, 8 months ago
Updated 15 July 2024, 7 months ago

Problem/Motivation

Hello. To add your own or a dark theme, you will have to copy all the selectors, which is not very inconvenient and may not be reliable, since they can change in the module.

Steps to reproduce

Proposed resolution

Define key colors in :root as CSS variables for easy customization.

Remaining tasks

  1. Implementation.

User interface changes

None.

API changes

None.

Data model changes

None.

Feature request
Status

Active

Version

1.0

Component

Code

Created by

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @kksandr
  • Status changed to Postponed: needs info 7 months ago
  • ivnish Kazakhstan

    Hi!

    What selectors do you mean? From a11y-light.css file?

  • Status changed to Active 7 months ago
  • Yes, exactly them. Now I completely override the style library of this module like this:

    :root {
      --hphp-color-comment: #696969;
      --hphp-color-red: #d91e18;
      --hphp-color-orange: #aa5d00;
      --hphp-color-yellow: #aa5d00;
      --hphp-color-green: #008000;
      --hphp-color-blue: #007faa;
      --hphp-color-purple: #7928a1;
      --hphp-color-bg: #fefefe;
      --hphp-color-fg: #545454;
      --hphp-border: 4px solid #d4d4d8;
      --hphp-indent: 0.5em 0.5em 0.5em 20px;
    }
    
    .dark-mode {
      --hphp-color-comment: #d4d0ab;
      --hphp-color-red: #ffa07a;
      --hphp-color-orange: #f5ab35;
      --hphp-color-yellow: #ffd700;
      --hphp-color-green: #abe338;
      --hphp-color-blue: #00e0e0;
      --hphp-color-purple: #dcc6e0;
      --hphp-color-bg: #2b2b2b;
      --hphp-color-fg: #f8f8f2;
      --hphp-border: 4px solid #43454a;
    }
    
    /* Comment */
    .hljs-comment,
    .hljs-quote {
      color: var(--hphp-color-comment);
    }
    
    /* Red */
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag,
    .hljs-name,
    .hljs-selector-id,
    .hljs-selector-class,
    .hljs-regexp,
    .hljs-deletion {
      color: var(--hphp-color-red);
    }
    
    /* Orange */
    .hljs-number,
    .hljs-built_in,
    .hljs-builtin-name,
    .hljs-literal,
    .hljs-type,
    .hljs-params,
    .hljs-meta,
    .hljs-link {
      color: var(--hphp-color-orange);
    }
    
    /* Yellow */
    .hljs-attribute {
      color: var(--hphp-color-yellow);
    }
    
    /* Green */
    .hljs-string,
    .hljs-symbol,
    .hljs-bullet,
    .hljs-addition {
      color: var(--hphp-color-green);
    }
    
    /* Blue */
    .hljs-title,
    .hljs-section {
      color: var(--hphp-color-blue);
    }
    
    /* Purple */
    .hljs-keyword,
    .hljs-selector-tag {
      color: var(--hphp-color-purple);
    }
    
    .hljs {
      overflow-x: auto;
      display: block;
      padding: var(--hphp-indent);
      color: var(--hphp-color-fg);
      white-space: pre;
      background: var(--hphp-color-bg);
      border-inline-start: var(--hphp-border);
    }
    
    .hljs-emphasis {
      font-style: italic;
    }
    
    .hljs-strong {
      font-weight: bold;
    }
    

    But it would be great if a dark theme could be created by simply overriding variables by extending the existing library in the theme.

Production build 0.71.5 2024