[AST] Please add theme support for system mode : Automatically Switch Theme

[JakiChen]

First of all, thank you for creating such a cool and useful plug-in. However, when I set Strapi Interface mode to use system settings; I found that it could not follow the system switch normally, so I raised this issue.

In order to solve this pain point, I am now using the original code to solve the problem.

import {createGlobalStyle} from "styled-components";
import { style as common } from "./styles/common";
import { style as light } from "./styles/light";
import { style as dark } from "./styles/dark";
import { style as system } from './styles/system';   // added

export const getGlobalStyling = ( theme ) => {
  let themeStyle = null;
  switch ( theme ) {
    case 'dark':
      themeStyle = dark;
      break;
    case 'light':
      themeStyle = light;
      break;
    case 'system':
      themeStyle = system;
      break;
  }

  return createGlobalStyle`
    ${ common }
    ${ themeStyle }
  `;
};

// styles/system.js
import { css } from "styled-components";

export const style = css`
    @media (prefers-color-scheme: dark) {
        .ck {
            --ck-color-toolbar-background: rgb(24, 24, 38);
            --ck-color-text: rgb(165, 165, 186);
            --ck-color-editor-base-text: rgb(255, 255, 255);
            --ck-color-toolbar-border: rgb(74, 74, 106);
            --ck-color-base-border: rgb(74, 74, 106);
            --ck-color-base-background: rgb(33, 33, 52);
            --ck-color-button-default-background: rgb(33, 33, 52);
            --ck-color-list-button-hover-background: rgb(24, 24, 38);
            --ck-color-button-default-hover-background: rgb(33, 33, 52);
            --ck-color-button-on-background: rgb(33, 33, 52);
            --ck-color-button-on-hover-background: rgb(33, 33, 52);
            --ck-color-button-default-active-background: rgb(33, 33, 52);
        }
        .ck-word-count {
            color: rgb(165, 165, 186)
        }
    }

    @media (prefers-color-scheme: light) {

    }
`;