Gemini Dracula Dark

Dracula-inspired dark theme for Google Gemini. CSS-only styling that activates only when the browser prefers dark mode.
Bir soru sorun, yorum yayınlayın veya komut dosyasını bildirin.
Satırları kaydır
// ==UserScript==
// @name         Gemini Dracula Dark
// @namespace    https://github.com/flowingx/gemini-dracula-dark
// @version      1.0.0
// @description  Dracula-inspired dark theme for Google Gemini. CSS-only styling that activates only when the browser prefers dark mode.
// @author       flowingx
// @match        https://gemini.google.com/*
// @run-at       document-start
// @grant        none
// @license      MIT
// ==/UserScript==

(function () {
  'use strict';

  const STYLE_ID = 'gemini-dracula-dark-style';
  const QUERY = '(prefers-color-scheme: dark)';
  const CSS = String.raw`
/*
 * Gemini Dracula Dark - safe build
 * CSS-only. No JavaScript and no drag/drop/paste/click/input handlers.
 *
 * Important: the Gemini top bar is intentionally not targeted here. The goal is
 * to let Gemini's own CSS own the model picker, new-chat button, more button,
 * and account/header area.
 */

@media (prefers-color-scheme: dark) {
  :root {
    --gd-bg: #1f2029;
    --gd-bg-deep: #181922;
    --gd-bg-panel: #242631;
    --gd-bg-panel-strong: #2b2d3a;
    --gd-text: #f8f8f2;
    --gd-text-muted: #c7c9d9;
    --gd-text-soft: #a9aec5;
    --gd-border: #44475a;
    --gd-red: #ff5555;
    --gd-pink: #ff79c6;
    --gd-purple: #bd93f9;
    --gd-cyan: #8be9fd;
    --gd-green: #50fa7b;
    --gd-yellow: #f1fa8c;
    --gd-shadow: 0 18px 48px rgba(0, 0, 0, 0.36);
    --gd-glow-red: 0 0 22px rgba(255, 85, 85, 0.25);
    --gd-glow-purple: 0 0 24px rgba(189, 147, 249, 0.22);
  }

  html,
  body {
    color-scheme: dark !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 100% !important;
    background:
      radial-gradient(circle at 12% 0%, rgba(189, 147, 249, 0.16), transparent 30rem),
      radial-gradient(circle at 100% 8%, rgba(139, 233, 253, 0.1), transparent 24rem),
      linear-gradient(135deg, rgba(255, 85, 85, 0.05) 0 1px, transparent 1px 18px),
      var(--gd-bg) !important;
    color: var(--gd-text) !important;
  }

  body > chat-app,
  body > #app-root,
  #app-root,
  chat-app {
    background: transparent !important;
    color: var(--gd-text) !important;
  }

  .theme-host,
  .dark-theme,
  .light-theme,
  .zero-state-theme,
  .mat-drawer-container,
  .mat-sidenav-container,
  .mat-mdc-drawer-container,
  .app-container,
  .chat-container,
  .main-content,
  .conversation-container,
  .conversation,
  .conversation-turn,
  .conversation-turn-container,
  .content-container,
  .scroll-container,
  .bard-sidenav-container {
    background-color: transparent !important;
    color: var(--gd-text) !important;
  }

  .side-nav,
  .sidenav,
  .bard-sidenav,
  .mat-drawer,
  .mat-sidenav,
  .mat-mdc-drawer {
    background:
      linear-gradient(180deg, rgba(189, 147, 249, 0.08), transparent 18rem),
      rgba(24, 25, 34, 0.98) !important;
    border-right: 1px solid rgba(68, 71, 90, 0.72) !important;
    color: var(--gd-text) !important;
  }

  .initial-input-area-container,
  .input-area,
  .input-area-container,
  .text-input-field,
  .text-input-field-container,
  .query-input,
  .prompt-input,
  .composer,
  .composer-container,
  .rich-textarea,
  .ql-editor,
  textarea,
  input,
  [contenteditable="true"] {
    background-color: rgba(36, 38, 49, 0.94) !important;
    color: var(--gd-text) !important;
    border-color: rgba(255, 85, 85, 0.35) !important;
    caret-color: var(--gd-red) !important;
  }

  .initial-input-area {
    background: transparent !important;
    pointer-events: none !important;
  }

  .initial-input-area-container {
    pointer-events: auto !important;
  }

  .initial-input-area-container,
  .input-area-container,
  .text-input-field,
  .text-input-field-container,
  .composer,
  .composer-container {
    border: 1px solid rgba(255, 85, 85, 0.34) !important;
    border-radius: 22px !important;
    box-shadow:
      var(--gd-shadow),
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      var(--gd-glow-red) !important;
  }

  .initial-input-area textarea,
  textarea,
  input,
  [contenteditable="true"],
  .ql-editor {
    outline: none !important;
    box-shadow: none !important;
  }

  .initial-input-area-container:focus-within,
  .input-area-container:focus-within,
  .text-input-field:focus-within,
  .text-input-field-container:focus-within,
  .composer:focus-within,
  .composer-container:focus-within {
    border-color: rgba(189, 147, 249, 0.82) !important;
    box-shadow:
      var(--gd-shadow),
      0 0 0 1px rgba(189, 147, 249, 0.36),
      var(--gd-glow-purple) !important;
  }

  ::placeholder {
    color: rgba(248, 248, 242, 0.56) !important;
  }

  .send-icon {
    color: var(--gd-green) !important;
  }

  .speech-icon {
    color: var(--gd-cyan) !important;
  }

  .upload-icon {
    color: var(--gd-pink) !important;
  }

  .markdown a,
  .markdown-content a,
  .model-response a,
  .response-content a,
  .link,
  .citation,
  .source-link {
    color: var(--gd-cyan) !important;
  }

  .markdown a:hover,
  .markdown-content a:hover,
  .model-response a:hover,
  .response-content a:hover,
  .link:hover,
  .citation:hover,
  .source-link:hover {
    color: var(--gd-yellow) !important;
    text-decoration-color: rgba(241, 250, 140, 0.8) !important;
  }

  .markdown h1,
  .markdown h2,
  .markdown h3,
  .markdown h4,
  .markdown h5,
  .markdown h6,
  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4,
  .markdown-content h5,
  .markdown-content h6,
  .model-response h1,
  .model-response h2,
  .model-response h3,
  .model-response h4,
  .model-response h5,
  .model-response h6,
  .response-content h1,
  .response-content h2,
  .response-content h3,
  .response-content h4,
  .response-content h5,
  .response-content h6 {
    color: var(--gd-text) !important;
    text-shadow: 0 0 10px rgba(255, 85, 85, 0.18) !important;
  }

  .secondary-text,
  .subtitle,
  .description,
  .placeholder,
  .metadata,
  .timestamp,
  .mat-mdc-card-subtitle,
  .mat-mdc-form-field-hint,
  .hint,
  .disclaimer {
    color: var(--gd-text-soft) !important;
  }

  .user-query,
  .query-text,
  .user-query-container,
  .user-message,
  .message.user,
  .human-message {
    color: var(--gd-text) !important;
  }

  .user-query,
  .user-query-container,
  .user-message,
  .message.user,
  .user-query .query-text,
  .user-query-container .query-text,
  .user-message .query-text,
  .message.user .query-text,
  .user-query .user-query-container,
  .user-query-container .user-query,
  .user-message .user-query,
  .message.user .user-query,
  .message.user .user-query-container {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  .model-response,
  .model-response-text,
  .response-container,
  .response-content,
  .markdown,
  .markdown-content,
  .rich-text,
  .message.model,
  .assistant-message {
    color: var(--gd-text) !important;
  }

  .model-response,
  .response-container,
  .message.model,
  .assistant-message {
    background-color: rgba(31, 32, 41, 0.58) !important;
    border-color: rgba(68, 71, 90, 0.46) !important;
  }

  .mat-mdc-card,
  .card,
  .tile,
  .suggestion,
  .suggestion-card,
  .prompt-card,
  .example-card,
  .result-card,
  .attachment,
  .file-chip,
  .image-card,
  .media-card,
  .source-card,
  .code-block,
  pre,
  code,
  table {
    background-color: rgba(36, 38, 49, 0.92) !important;
    color: var(--gd-text) !important;
    border-color: rgba(68, 71, 90, 0.72) !important;
  }

  .mat-mdc-card,
  .card,
  .tile,
  .suggestion-card,
  .prompt-card,
  .result-card,
  .source-card {
    border: 1px solid rgba(68, 71, 90, 0.68) !important;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.24) !important;
  }

  .suggestion-card:hover,
  .prompt-card:hover,
  .result-card:hover,
  .source-card:hover {
    border-color: rgba(139, 233, 253, 0.42) !important;
    box-shadow:
      0 14px 34px rgba(0, 0, 0, 0.3),
      0 0 18px rgba(139, 233, 253, 0.14) !important;
  }

  pre,
  code,
  .code-block {
    font-family: "Cascadia Code", "JetBrains Mono", "SFMono-Regular", Consolas, monospace !important;
  }

  pre {
    border: 1px solid rgba(68, 71, 90, 0.8) !important;
    box-shadow: inset 3px 0 0 rgba(255, 85, 85, 0.85) !important;
  }

  code {
    color: var(--gd-yellow) !important;
  }

  .token.keyword,
  .hljs-keyword,
  .cm-keyword {
    color: var(--gd-pink) !important;
  }

  .token.string,
  .hljs-string,
  .cm-string {
    color: var(--gd-yellow) !important;
  }

  .token.function,
  .hljs-title,
  .cm-def {
    color: var(--gd-green) !important;
  }

  .token.comment,
  .hljs-comment,
  .cm-comment {
    color: #6272a4 !important;
  }

  .token.number,
  .hljs-number,
  .cm-number {
    color: var(--gd-purple) !important;
  }

  blockquote {
    background: rgba(36, 38, 49, 0.78) !important;
    border-left: 4px solid var(--gd-purple) !important;
    color: var(--gd-text-muted) !important;
    margin-left: 0 !important;
    padding: 0.75rem 1rem 0.75rem 1.15rem !important;
  }

  .markdown blockquote,
  .markdown-content blockquote,
  .model-response blockquote,
  .response-content blockquote,
  .quote,
  .blockquote,
  .quoted-text,
  .markdown [style*="border-left"],
  .markdown-content [style*="border-left"],
  .model-response [style*="border-left"],
  .response-content [style*="border-left"] {
    padding-left: 1.15rem !important;
  }

  blockquote > :first-child {
    margin-top: 0 !important;
  }

  blockquote > :last-child {
    margin-bottom: 0 !important;
  }

  hr,
  mat-divider,
  .mat-divider,
  .divider,
  .separator {
    border-color: rgba(68, 71, 90, 0.76) !important;
  }

  table,
  th,
  td {
    border-color: rgba(68, 71, 90, 0.82) !important;
  }

  th {
    background-color: rgba(189, 147, 249, 0.14) !important;
    color: var(--gd-text) !important;
  }

  tr:nth-child(even) td {
    background-color: rgba(68, 71, 90, 0.2) !important;
  }

  .mat-mdc-progress-spinner circle,
  .mat-progress-spinner circle {
    stroke: var(--gd-red) !important;
  }

  .mat-mdc-progress-bar,
  .progress,
  .loading {
    --mdc-linear-progress-active-indicator-color: var(--gd-red);
    --mdc-linear-progress-track-color: rgba(68, 71, 90, 0.72);
  }

  .mdc-switch,
  .mat-mdc-slide-toggle,
  .mat-mdc-checkbox,
  .mat-mdc-radio-button {
    --mdc-switch-selected-handle-color: var(--gd-red);
    --mdc-switch-selected-track-color: rgba(255, 85, 85, 0.36);
    --mdc-checkbox-selected-checkmark-color: #1f2029;
    --mdc-checkbox-selected-icon-color: var(--gd-green);
    --mdc-radio-selected-icon-color: var(--gd-purple);
  }

  .mat-mdc-form-field,
  .mat-mdc-text-field-wrapper,
  .mdc-text-field,
  select {
    background-color: rgba(36, 38, 49, 0.9) !important;
    color: var(--gd-text) !important;
  }

  .mat-mdc-form-field-outline,
  .mdc-notched-outline,
  .mdc-notched-outline__leading,
  .mdc-notched-outline__notch,
  .mdc-notched-outline__trailing {
    border-color: rgba(68, 71, 90, 0.84) !important;
  }

  .mat-mdc-tooltip,
  .tooltip {
    background-color: #11121a !important;
    color: var(--gd-text) !important;
    border: 1px solid rgba(189, 147, 249, 0.4) !important;
  }

  ::selection {
    background: rgba(255, 85, 85, 0.36) !important;
    color: #ffffff !important;
  }

  ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
  }

  ::-webkit-scrollbar-track {
    background: rgba(24, 25, 34, 0.96);
  }

  ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--gd-red), var(--gd-purple));
    border: 3px solid rgba(24, 25, 34, 0.96);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--gd-pink), var(--gd-cyan));
  }

}

`;

  function enable() {
    if (document.getElementById(STYLE_ID)) return;
    const style = document.createElement('style');
    style.id = STYLE_ID;
    style.textContent = CSS;
    (document.head || document.documentElement).appendChild(style);
  }

  function disable() {
    document.getElementById(STYLE_ID)?.remove();
  }

  function syncTheme(event) {
    if ((event && event.matches) || (!event && window.matchMedia(QUERY).matches)) {
      enable();
    } else {
      disable();
    }
  }

  const media = window.matchMedia(QUERY);
  syncTheme(media);
  media.addEventListener?.('change', syncTheme);
})();