owncast/web/styles/globals.scss

$owncast-purple: rgba(90,103,216,1);

html,
body {
  padding: 0;
  margin: 0;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
  color: rgba(90,103,216,1);
}

* {
  box-sizing: border-box;
}

pre {
  display: block;
  padding: 1rem;
  margin: .5rem 0;
  background-color: #eee;
}
code {
  color: var(--owncast-purple);
}

.owncast-layout .ant-menu-dark.ant-menu-dark:not(.ant-menu-horizontal) .ant-menu-item-selected {
  background-color: $owncast-purple;
}



@media (prefers-color-scheme: dark) {
  @import "~antd/dist/antd.dark";
  pre {
    background-color: rgb(44, 44, 44);
    color:lightgrey;
  }
}


// GENERAL ANT FORM OVERRIDES
.ant-card {
  border-radius: .5em;
}
.ant-input-affix-wrapper {
  border-radius: 5px;
  background-color: rgba(0,0,0,.1);
  @media (prefers-color-scheme: dark) {
    border-radius: 5px;
    background-color: rgba(255,255,255,.1);
  }
  textarea {
    border-radius: 5px;
  }
}
.ant-btn-primary:hover, .ant-btn-primary:focus {
  background-color: white;
  color: #40a9ff;
}
.ant-btn.ant-btn-primary:focus {
  border: 1px solid var(--owncast-purple);
  @media (prefers-color-scheme: dark) {
    border-color: white;
  }
}
.ant-input-affix-wrapper,
.ant-btn {
  transition-delay: 0s;
  transition-duration: 0.15s;
}

// markdown editor overrides
@media (prefers-color-scheme: dark) {
  .rc-md-editor {
    // Set the background color of the preview container
    .editor-container {
      background-color: #E2E8F0;
      color: rgba(45,55,72,1);
    }

    // Custom CSS for formatting the preview text
    .markdown-editor-preview-pane {
      // color:lightgrey;
      a {
        color: $owncast-purple;
      }
      h1 {
        font-size: 2em;
      }
    }

    // Custom CSS class used to format the text of the editor
    .markdown-editor-pane {
      color: white !important;
      background-color: black;
      font-family: monospace;
    }

    // Set the background color of the editor text input
    textarea {
      background-color: rgb(44,44,44) !important;
      color:lightgrey !important;
    }

    // Hide extra toolbar buttons.
    .button-type-undo, .button-type-redo, .button-type-clear, .button-type-image, .button-type-wrap, .button-type-quote, .button-type-strikethrough, .button-type-code-inline, .button-type-code-block {
      display: none !important;
    }
  }  
}