High contrast CSS snippet

Help
1

Hi,

Does anyone have a CSS snippet to force a theme to be high contrast?

The Advanced Appearance plugin has a setting to set the theme contrast to low, high or black. I really like the black but don’t really want any of the other features of this plugin.

How would I achieve this?

BTW: I have almost zero CSS knowledge. My skills go as far as editing rgb/hex values in stylesheets.

2

It is not possible to create a snippet that would make every theme high contrast since each theme uses different variables for colors. For example, the variables in Minimal Theme look like this:

      --base-h:0;       /* Base hue */
      --base-s:0%;      /* Base saturation */
      --base-d:16%;     /* Base lightness Dark Mode  - 0 is black */
      --base-l:97%;     /* Base lightness Light Mode  - 100 is white */
      --accent-h:201;   /* Accent hue */
      --accent-s:17%;   /* Accent saturation */
      --accent-d:60%;   /* Accent lightness Dark Mode */
      --accent-l:50%;   /* Accent lightness Light Mode */

and Cybertron uses these variables:

  --background-primary: #2f3136;
  --background-primary-alt: #36393f;
  --background-secondary: #141414; /*202225*/ /*141414*/
  --background-secondary-alt: #222222;
  --text-normal: #5dbcd2;
  --text-faint: #999999;
  --text-title-h1: rgb(252, 246, 1, 0.75);
  --text-title-h2: #b9adff; 
  --text-title-h3: #52c1da;
  --text-title-h4: #8ebe8e;
  --text-title-h5: #d8d8d8;
  --text-title-h6: #afafaf;
  --text-link: #99ff99;
  --text-a: #d669bc;
  --text-a-hover: #b3a14b;
  --text-mark: rgb(252, 246, 1, 0.45); /* SEE HIGHLIGHTER */
  --pre-code: #272524d9;
  --text-highlight-bg: rgba(252, 246, 1, 0.4); /* SEE HIGHLIGHTER */
  --interactive-accent: rgb(252, 246, 1, 0.95);
  --interactive-before: #5e6565;
  --background-modifier-border: #595959; /*595959*/
  --blockquote-border: #9e8aff;
  --text-accent: #319cb4;
  --interactive-accent-rgb: #fe8019;
  --font-family-editor: Avenir, Avenir Next, var(--default-font), sans-serif;
  --font-family-preview: Avenir, Avenir Next, var(--default-font), sans-serif;
  --text-selection: #164f92;
  --text-on-accent: #2f3136;
  --scrollbar-bg: rgb(20, 20, 20, 0.0);
  --scrollbar-thumb-bg: #595959;
  --background-modifier-error: #36393f;
  --background-modifier-success: #36393f;

It would be fairly easy to make the Minimal Theme high contrast since there aren’t many variables. You could edit these to your liking, however, if you use the Minimal Theme Settings plugin, you can choose to use “All White” and “True Black,” which would be very high contrast, since black and white are opposites.

2 Likes