A simple clear-vison based BetterDiscord / Vecord thme its monochrome

monochrome-clear-vision.css

@import url(https://clearvision.github.io/ClearVision-v6/main.css);

:root {
  --main-color: #888888;
  --hover-color: #666666;
  --success-color: #b3b3b3;
  --danger-color: #4d4d4d;
  --url-color: var(--main-color);

  --online-color: #cccccc;
  --idle-color: #e0e0e0;
  --dnd-color: #b3b3b3;
  --streaming-color: #999999;
  --offline-color: #f3f3f3;

  --main-font: 'Iosevka Nerd Font SemiBold', 'Iosevka Nerd Font', gg sans, Helvetica Neue, Helvetica, Arial, sans-serif;
  --code-font: 'Iosevka Nerd Font', Consolas, Liberation Mono, Menlo, Courier, monospace;
  --text-normal: rgb(220, 221, 222);
  --text-muted: rgb(114, 118, 125);
  --channels-width: 220px;
  --members-width: 240px;

  --background-shading: 100%;
  --background-overlay: rgba(0, 0, 0, 0.6);
  --background-image: url('https://www.w3schools.com/w3images/mountains.jpg'); /* Monochrome mountain image URL */
  --background-position: center;
  --background-size: cover;
  --background-repeat: no-repeat;
  --background-attachment: fixed;
  --background-brightness: 100%;
  --background-contrast: 100%;
  --background-saturation: 0%;
  --background-invert: 0%;
  --background-grayscale: 100%;
  --background-sepia: 0%;
  --background-blur: 2px;

  --home-icon: none; /* Monochrome computing-themed Discord logo */
  --home-position: center;
  --home-size: 40px;

  --channel-unread: var(--main-color);
  --channel-color: rgba(255, 255, 255, 0.3);
  --channel-text-selected: #fff;
  --muted-color: rgba(255, 255, 255, 0.1);

  --backdrop-overlay: rgba(0, 0, 0, 0.8);
  --backdrop-image: var(--background-image);
  --backdrop-position: var(--background-position);
  --backdrop-size: var(--background-size);
  --backdrop-repeat: var(--background-repeat);
  --backdrop-attachment: var(--background-attachment);
  --backdrop-brightness: var(--background-brightness);
  --backdrop-contrast: var(--background-contrast);
  --backdrop-saturation: var(--background-saturation);
  --backdrop-invert: var(--background-invert);
  --backdrop-grayscale: var(--background-grayscale);
  --backdrop-sepia: var(--background-sepia);
  --backdrop-blur: var(--background-blur);

  --user-popout-image: var(--background-image);
  --user-popout-position: var(--background-position);
  --user-popout-size: var(--background-size);
  --user-popout-repeat: var(--background-repeat);
  --user-popout-attachment: var(--background-attachment);
  --user-popout-brightness: var(--background-brightness);
  --user-popout-contrast: var(--background-contrast);
  --user-popout-saturation: var(--background-saturation);
  --user-popout-invert: var(--background-invert);
  --user-popout-grayscale: var(--background-grayscale);
  --user-popout-sepia: var(--background-sepia);
  --user-popout-blur: calc(var(--background-blur) + 3px);
  --user-popout-overlay: rgba(0, 0, 0, 0.6);

  --user-modal-image: var(--background-image);
  --user-modal-position: var(--background-position);
  --user-modal-size: var(--background-size);
  --user-modal-repeat: var(--background-repeat);
  --user-modal-attachment: var(--background-attachment);
  --user-modal-brightness: var(--background-brightness);
  --user-modal-contrast: var(--background-contrast);
  --user-modal-saturation: var(--background-saturation);
  --user-modal-invert: var(--background-invert);
  --user-modal-grayscale: var(--background-grayscale);
  --user-modal-sepia: var(--background-sepia);
  --user-modal-blur: calc(var(--background-blur) + 3px);

  --bd-blue: var(--main-color);
  --bd-blue-hover: var(--hover-color);
  --bd-blue-active: var(--hover-color);
}