:root {
  /* Block Element */
  --color-ui-01: #f2f2f2;
  --color-ui-02: #fff;
  --color-ui-03: #17aa90;
  --color-ui-04: #5a84b1;
  --color-ui-05: #ffc400;
  --color-ui-06: #171717;
  --color-ui-07: #206694;

  /* Text */
  --color-text-01: rgba(0, 0, 0, 0.9);
  --color-text-02: rgba(0, 0, 0, 0.5);
  --color-text-03: #212529;
  --color-text-04: #fff;
  --color-text-05: #ddd;

  /* Border */
  --color-border-01: #fff;
  --color-border-02: #f2f2f2;

  /* Field */
  --color-field-01: #fff;
  --color-field-02: #fff;

  /* Social */
  --color-twitter-01: #00acee;
  --color-github-00: #24292e;
  --color-github-01: #24292e;
  --color-github-02: #ffffff;
  --color-linkedin-01: #0e76a8;
  --color-discord-01: #7289da;
  --color-discord-02: #2c2f33;
  --color-stackoverflow-01: #f48026;

  /*   Disqus Color  */
  --color-disqus-thread: #a9a9a9;

  /* State Color */
  --color-success-01: #c3e6cb;
}

.dark-mode {
  /* Block Element */
  --color-ui-01: #171717;
  --color-ui-02: #222;
  --color-ui-03: #17aa90;
  --color-ui-04: #2f6998;
  --color-ui-05: #ffc400;
  --color-ui-06: #fff;
  --color-ui-07: #206694;

  /* Text */
  --color-text-01: rgba(255, 255, 255, 0.9);
  --color-text-02: rgba(255, 255, 255, 0.5);
  --color-text-03: #888;
  --color-text-04: #222;
  --color-text-05: #444;

  /* Border */
  --color-border-01: transparent;
  --color-border-02: #333;

  /* Field */
  --color-field-01: #000;
  --color-field-02: #222;

  /* Social */
  --color-twitter-01: #00acee;
  --color-github-01: #ffffff;
  --color-github-02: #24292e;
  --color-linkedin-01: #0e76a8;
  --color-discord-01: #7289da;
  --color-discord-02: #2c2f33;

  /*   Disqus Color  */
  --color-disqus-thread: #161616;

  /* State Color */
  --color-success-01: #519e63;
}
