Terraform Registry Dark Theme by raisedadead

/* ==UserStyle==
@name         Terraform Registry Dark Theme
@namespace    mrugesh.dev
@version      1.0.0
@license      MIT
@preprocessor default
==/UserStyle== */

@-moz-document domain("registry.terraform.io") {
  :root {
    /* Colors remain the same */
    --background: #1a1b26;
    --background-hover: #2f3042;
    --background-inset: #16171f;
    --text: #e0e1e6;
    --text-hover: #ffffff;
    --text-inset: #a9adc1;
    --border: #2e2f3e;
    --primary: #7aa2f7;
    --warning: #e0af68;
    --success: #9ece6a;
    --error: #f7768e;
    --info: #7dcfff;
  }

  .provider-docs-menu-list a {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .provider-docs-menu-list a.active,
  .provider-docs-menu-list a:hover,
  .provider-docs-menu-list a:focus {
    background-color: transparent !important;  
    box-shadow: none !important;              
    outline: none !important;                
  }

  .provider-docs-menu-list a.active {
    position: relative;
  }

  .provider-docs-menu-list a.active::before {
    content: '';
    position: absolute;
    left: -1rem;
    width: 3px;
    height: 1.2em;
    background-color: var(--primary);
  }
    
  .alert.alert-info {
    border: 1px solid var(--info) !important;
  }

  .alert.alert-info .alert-title,
  .alert.alert-info i {
    color: var(--info) !important;
  }

  .alert.alert-warning {
    border: 1px solid var(--warning) !important;
  }

  .alert.alert-warning .alert-title,
  .alert.alert-warning i {
    color: var(--warning) !important;
  }

  /* Rest of your original CSS remains exactly the same */
  html,
  body,
  .block-white {
    background-color: var(--background);
  }

  a,
  a:hover {
    color: var(--primary);
  }

  strong {
    color: var(--text);
  }

  table tr {
    background-color: var(--background-inset) !important;
    border-top: 1px solid var(--border) !important;
  }

  table th {
    border: 1px solid var(--border) !important;
    color: var(--text-inset) !important;
  }

  table td {
    border: 1px solid var(--border) !important;
    color: var(--text-inset) !important;
  }

  .bread-crumbs.is-light {
    background-color: var(--background-inset);
  }

  .is-light .bread-crumbs-link {
    color: var(--text-inset);
  }

  .version-dropdown .latest-version-tag {
    background-color: var(--background);
    border: 1px solid var(--border);
    color: var(--text);
  }

  .button,
  .header-navbar .tfc-cta a,
  .header-navbar .tfc-cta .version-dropdown .is-active .dropdown-trigger a,
  .header-navbar .tfc-cta .version-dropdown:hover .dropdown-trigger a,
  .version-dropdown .is-active .dropdown-trigger .button,
  .version-dropdown .is-active .dropdown-trigger .header-navbar .tfc-cta a,
  .version-dropdown:hover .dropdown-trigger .button,
  .version-dropdown:hover .dropdown-trigger .header-navbar .tfc-cta a {
    background-color: var(--background-inset);
    color: var(--text-inset) !important;
  }

  .block-grey.block-border,
  .block-white.block-border,
  .module-view .section-navbar,
  .provider-view .section-navbar {
    border-bottom: 1px solid var(--border);
  }

  .module-view .section-header h1,
  .provider-view .section-header h1 {
    color: var(--text);
  }

  .column-provider-docs-menu {
    background-color: var(--background);
    border-right: 1px solid var(--border);
    color: var(--text);
  }

  .provider-docs-menu-list a,
  .provider-docs-menu-list a {
    color: var(--text);
  }

  .provider-docs-menu-list a:focus,
  .provider-docs-menu-list a:hover {
    background-color: var(--background-hover);
    color: var(--text-hover);
  }

  .provider-docs-menu-list a.active {
    color: var(--primary);
  }

  .provider-docs-menu-filter-input {
    background-color: var(--background);
    color: var(--text);
  }

  .input,
  .select select,
  .textarea {
    border: 1px solid var(--border);
  }

  .provider-doc-outline-content .toc-list .toc-list-item .toc-link {
    color: var(--text);
  }

  .provider-doc-feedback a,
  .provider-doc-outline-content .toc-list .toc-list-item.is-active-li>.toc-link,
  .provider-doc-outline-content .toc-list .toc-list-item .toc-link:hover {
    color: var(--primary);
  }

  .alert {
    background-color: var(--background-inset) !important;
  }

  .markdown {
    color: var(--text);
  }

  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6 {
    color: var(--text);
  }

  .markdown h2,
  .provider-doc-outline-border,
  .provider-docs-menu-title {
    border-bottom: 1px solid var(--border);
  }

  .highlighted-code-wrapper :not(pre)>code[class*="language-"],
  .highlighted-code-wrapper pre[class*="language-"] {
    background-color: var(--background-inset);
    color: var(--primary);
  }

  .markdown code,
  .markdown pre {
    background-color: var(--background-inset);
    border: 1px solid var(--border);
    color: var(--text);
  }

  .markdown pre code {
    color: var(--text);
  }

  .markdown a code,
  .highlighted-code-wrapper .token.attr-name,
  .highlighted-code-wrapper .token.boolean,
  .highlighted-code-wrapper .token.builtin,
  .highlighted-code-wrapper .token.char,
  .highlighted-code-wrapper .token.constant,
  .highlighted-code-wrapper .token.deleted,
  .highlighted-code-wrapper .token.ember-power-select-multiple-option,
  .highlighted-code-wrapper .token.inserted,
  .highlighted-code-wrapper .token.number,
  .highlighted-code-wrapper .token.selector,
  .highlighted-code-wrapper .token.string,
  .highlighted-code-wrapper .token.symbol,
  .highlighted-code-wrapper .token.tag {
    color: var(--primary);
  }

  .highlighted-code-wrapper .token.property,
  .highlighted-code-wrapper .token.atrule,
  .highlighted-code-wrapper .token.attr-value,
  .highlighted-code-wrapper .token.keyword,
  .highlighted-code-wrapper .token.punctuation,
  .highlighted-code-wrapper .token.class-name,
  .highlighted-code-wrapper .token.function,
  .highlighted-code-wrapper .token.important,
  .highlighted-code-wrapper .token.regex,
  .highlighted-code-wrapper .token.variable {
    color: var(--text);
  }

  .highlighted-code-wrapper code[class*="language-"],
  .highlighted-code-wrapper pre[class*="language-"] {
    color: var(--text);
  }

  .token.operator {
    background: inherit !important;
  }

  .token {
    color: var(--text-inset) !important;
  }

  .footer {
    border-top: 1px solid var(--border);
  }

  .footer,
  .footer .navbar {
    background-color: var(--background-inset);
  }

  .footer .navbar a.navbar-item:hover {
    background-color: var(--background-hover);
    color: var(--text-hover);
  }
}