diff --git a/public/icons/dark.svg b/public/icons/dark.svg
new file mode 100644
index 0000000..2e7841e
--- /dev/null
+++ b/public/icons/dark.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#ccc" d="M12 11.807A9 9 0 0 1 10.049 2a9.94 9.94 0 0 0-5.12 2.735c-3.905 3.905-3.905 10.237 0 14.142 3.906 3.906 10.237 3.905 14.143 0a9.95 9.95 0 0 0 2.735-5.119A9 9 0 0 1 12 11.807"/></svg>
\ No newline at end of file
diff --git a/public/icons/light.svg b/public/icons/light.svg
new file mode 100644
index 0000000..2b2a23e
--- /dev/null
+++ b/public/icons/light.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="#eab308" d="M8.463 15.538Q7 14.075 7 12t1.463-3.537T12 7t3.538 1.463T17 12t-1.463 3.538T12 17t-3.537-1.463M2 13q-.425 0-.712-.288T1 12t.288-.712T2 11h2q.425 0 .713.288T5 12t-.288.713T4 13zm18 0q-.425 0-.712-.288T19 12t.288-.712T20 11h2q.425 0 .713.288T23 12t-.288.713T22 13zm-8.712-8.287Q11 4.425 11 4V2q0-.425.288-.712T12 1t.713.288T13 2v2q0 .425-.288.713T12 5t-.712-.288m0 18Q11 22.426 11 22v-2q0-.425.288-.712T12 19t.713.288T13 20v2q0 .425-.288.713T12 23t-.712-.288M5.65 7.05 4.575 6q-.3-.275-.288-.7t.288-.725q.3-.3.725-.3t.7.3L7.05 5.65q.275.3.275.7t-.275.7-.687.288-.713-.288M18 19.425l-1.05-1.075q-.275-.3-.275-.712t.275-.688q.275-.3.688-.287t.712.287L19.425 18q.3.275.288.7t-.288.725q-.3.3-.725.3t-.7-.3M16.95 7.05q-.3-.275-.288-.687t.288-.713L18 4.575q.275-.3.7-.288t.725.288q.3.3.3.725t-.3.7L18.35 7.05q-.3.275-.7.275t-.7-.275M4.575 19.425q-.3-.3-.3-.725t.3-.7l1.075-1.05q.3-.275.712-.275t.688.275q.3.275.288.688t-.288.712L6 19.425q-.275.3-.7.288t-.725-.288"/></svg>
\ No newline at end of file
diff --git a/src/app/app.component.css b/src/app/app.component.css
index 6eeab3d..7f99db6 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -25,3 +25,175 @@
     opacity: 0.7;
   }
 }
+
+.theme-switch {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #f3f4f6;
+  color: #111827;
+  cursor: pointer;
+  user-select: none;
+}
+
+.theme-switch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.theme-switch__icon {
+  width: 20px;
+  height: 20px;
+  display: block;
+}
+
+.theme-switch__track {
+  width: 44px;
+  height: 24px;
+  padding: 2px;
+  border-radius: 999px;
+  background: #d1d5db;
+  display: inline-flex;
+  align-items: center;
+  transition: background 0.2s ease;
+}
+
+.theme-switch__thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
+  transition: transform 0.2s ease;
+}
+
+.theme-switch-dark {
+  background: #111827;
+  color: #f9fafb;
+}
+
+.theme-switch-dark .theme-switch__track {
+  background: #2563eb;
+}
+
+.theme-switch-dark .theme-switch__thumb {
+  transform: translateX(20px);
+}
+
+.editor-panel {
+  background: #ffffff;
+}
+
+.editor-panel-dark {
+  background: #111827;
+  border-color: #374151;
+}
+
+.editor-panel-dark .line-number-panel {
+  border-color: #374151;
+  background: #0f172a;
+}
+
+.line-number {
+  color: #9ca3af;
+}
+
+.editor-panel-dark .line-number {
+  color: #6b7280;
+}
+
+.editor-textarea {
+  background: transparent;
+  color: #111827;
+  caret-color: #111827;
+}
+
+.editor-panel-dark .editor-textarea {
+  color: #f9fafb;
+  caret-color: #f9fafb;
+}
+
+.editor-textarea::selection {
+  background: rgb(59 130 246 / 0.25);
+}
+
+.preview-panel {
+  background: #ffffff;
+  color: #111827;
+}
+
+.preview-panel-dark {
+  background: #0f172a;
+  color: #e5e7eb;
+}
+
+.preview-panel-dark,
+.preview-panel-dark .markdown-body,
+.preview-panel-dark .markdown-body p,
+.preview-panel-dark .markdown-body li,
+.preview-panel-dark .markdown-body blockquote,
+.preview-panel-dark .markdown-body td,
+.preview-panel-dark .markdown-body th {
+  color: #e5e7eb;
+}
+
+.preview-panel-dark .markdown-body {
+  background: transparent;
+}
+
+.preview-panel-dark .markdown-body pre,
+.preview-panel-dark .markdown-body code {
+  background: rgb(148 163 184 / 0.14);
+}
+
+.preview-panel-dark .markdown-body .md-alert {
+  background: #111827;
+  border: 1px solid #1f2937;
+  border-left-width: 4px;
+  border-radius: 12px;
+  padding: 16px;
+}
+
+.preview-panel-dark .markdown-body .md-alert-content,
+.preview-panel-dark .markdown-body .md-alert-content p {
+  color: #cbd5e1;
+}
+
+.preview-panel-dark .markdown-body .md-alert-note {
+  background: rgb(37 99 235 / 0.12);
+  border-color: rgb(59 130 246 / 0.35);
+}
+
+.preview-panel-dark .markdown-body .md-alert-tip {
+  background: rgb(22 163 74 / 0.12);
+  border-color: rgb(34 197 94 / 0.35);
+}
+
+.preview-panel-dark .markdown-body .md-alert-important {
+  background: rgb(147 51 234 / 0.12);
+  border-color: rgb(168 85 247 / 0.35);
+}
+
+.preview-panel-dark .markdown-body .md-alert-warning {
+  background: rgb(217 119 6 / 0.12);
+  border-color: rgb(245 158 11 / 0.35);
+}
+
+.preview-panel-dark .markdown-body .md-alert-caution {
+  background: rgb(220 38 38 / 0.12);
+  border-color: rgb(239 68 68 / 0.35);
+}
+
+.preview-panel-dark .markdown-body a {
+  color: #93c5fd;
+}
+
+.preview-panel-dark .markdown-body hr,
+.preview-panel-dark .markdown-body table th,
+.preview-panel-dark .markdown-body table td,
+.preview-panel-dark .markdown-body blockquote {
+  border-color: #334155;
+}
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6518cae..41488cc 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -83,7 +83,7 @@
         accept=".md,.txt,text/markdown,text/plain"
         (change)="onFileUpload($event)"
       />
-      <button class="button ml-2" title="Upload file" type="button" (click)="fileInput.click()">
+      <button class="button ml-2" title="Upload MD" type="button" (click)="fileInput.click()">
         <img src="icons/upload.svg" alt="Upload" class="w-6 h-6" />
       </button>
 
@@ -144,6 +144,26 @@
           >GitHub</a
         >
       </button>
+      <label
+        class="theme-switch"
+        [class.theme-switch-dark]="darkEditorTheme()"
+        title="Cambiar tema del editor y preview"
+      >
+        @if (!darkEditorTheme()) {
+          <img src="icons/light.svg" alt="Modo claro activo" class="theme-switch__icon" />
+        } @else {
+          <img src="icons/dark.svg" alt="Modo oscuro activo" class="theme-switch__icon" />
+        }
+        <input
+          type="checkbox"
+          [checked]="darkEditorTheme()"
+          (change)="toggleEditorTheme()"
+          aria-label="Alternar modo oscuro del editor y preview"
+        />
+        <span class="theme-switch__track">
+          <span class="theme-switch__thumb"></span>
+        </span>
+      </label>
     </div>
   </header>
   <main class="w-full h-[85%] flex px-4">
@@ -152,16 +172,17 @@
         [ngClass]="{
           'w-full rounded-2xl': !hideOrShowPreview(),
           'w-1/2 rounded-l-2xl': hideOrShowPreview(),
+          'editor-panel-dark': darkEditorTheme(),
         }"
-        class="h-full bg-white flex border-r border-[#cccc] overflow-hidden"
+        class="editor-panel h-full flex border-r border-[#cccc] overflow-hidden"
       >
         <div
           #lineNumber
           id="lineNumber"
-          class="w-[5%] h-full border-r border-[#cccc] flex flex-col gap-y-1 items-center pt-5 overflow-y-hidden"
+          class="line-number-panel w-[5%] h-full border-r border-[#cccc] flex flex-col gap-y-1 items-center pt-5 overflow-y-hidden"
         >
           @for (lineNumber of lineNumbers(); track lineNumber) {
-            <span class="w-full text-center text-sm text-gray-400 select-none">
+            <span class="line-number w-full text-center text-sm select-none">
               {{ lineNumber }}
             </span>
           }
@@ -169,7 +190,7 @@
         <textarea
           #editorTextarea
           data-testid="editor-textarea"
-          class="w-[95%] h-full p-5 text-left resize-none outline-none border-none overflow-y-auto"
+          class="editor-textarea w-[95%] h-full p-5 text-left resize-none outline-none border-none overflow-y-auto"
           (scroll)="syncScroll()"
           (input)="onInput($event)"
           [value]="inputValue()"
@@ -183,8 +204,9 @@
         [ngClass]="{
           'w-full rounded-2xl': fullOrMinPreview(),
           'w-1/2 rounded-r-2xl': !fullOrMinPreview(),
+          'preview-panel-dark': darkEditorTheme(),
         }"
-        class="w-1/2 h-full bg-white p-5 overflow-y-auto markdown-body"
+        class="preview-panel w-1/2 h-full p-5 overflow-y-auto markdown-body"
       >
         <div #previewRef class="markdown-body">
           <div [innerHTML]="previewHtml()"></div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index c204ed7..c4759b6 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -63,6 +63,7 @@ export class AppComponent {
   selectedText = signal<string>('');
   hideOrShowPreview = signal<boolean>(true);
   fullOrMinPreview = signal<boolean>(false);
+  darkEditorTheme = signal<boolean>(false);
   showModal = signal<boolean>(false);
   typeOfModal = signal<string>('');
   searchQuery = signal<string>('');
@@ -307,6 +308,10 @@ export class AppComponent {
     this.fullOrMinPreview.set(!this.fullOrMinPreview());
   }
 
+  toggleEditorTheme() {
+    this.darkEditorTheme.set(!this.darkEditorTheme());
+  }
+
   onHeadingChange(event: Event) {
     const select = event.target as HTMLSelectElement;
     const value = select.value;