Blogger Article Writer

↩

↪

✂

⎘

⎗

✔

✖

☀ Dark Mode

This is my textarea to be replaced with CKEditor.

flex-wrap: wrap; justify-content: flex-start; padding: 5px; } .cke_toolbox_group button { margin: 3px; font-size: 14px; border: none; background: none;

↩

↪

✂

⎘

⎗

✔

✖

☀ Dark Mode

This is my textarea to be replaced with CKEditor.

cursor: pointer; outline: none; } #editor1 { width: 100%; min-height: 300px; } #html-output { white-space: pre-wrap; border: 1px solid #ccc; padding: 10px; margin-top: 10px; font-family: Arial, sans-serif; } .cke_custom_toolbar { background-color: #f1f1f1; border-bottom: 1px solid #ccc; padding: 5px; z-index: 1; } .cke_custom_toolbar button { margin: 5px; font-size: 14px; cursor: pointer; outline: none; } .cke_custom_toolbar input[type="checkbox"] { vertical-align: middle; } .dark-mode { background-color: #333; color: #fff; } .dark-mode .toggle-button { left: 60px; } .dark-mode .toggle-icon { animation: sunToMoon 1s; animation-fill-mode: forwards; } .light-mode .toggle-button { left: 10px; } .light-mode .toggle-icon { animation: moonToSun 1s; animation-fill-mode: forwards; } @keyframes sunToMoon { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } @keyframes moonToSun { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } /* Toggle Button */ .toggle-container { position: absolute; top: 5px; width: 40px; height: 28px; border-radius: 14px; background-color: #ccc; cursor: pointer; z-index: 2; } .toggle-slider { position: absolute; top: 1px; width: 26px; height: 26px; border-radius: 50%; background-color: #fff; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15); transition: left 0.3s; } /* Dark Mode */ .dark-mode .toggle-container { background-color: #333; } .dark-mode .toggle-slider { background-color: #444; } /* Light Mode */ .light-mode .toggle-container { background-color: #ccc; } .light-mode .toggle-slider { background-color: #fff; } .toggle-text { position: absolute; top: 7px; left: 10px; color: #000; font-size: 12px; font-weight: bold; } .toggle-icon { position: absolute; top: 6px; left: 10px; font-size: 20px; } .dark-mode .toggle-text { color: #fff; } .light-mode .toggle-text { color: #000; }

File

Format

Insert

View

Customize

File

Format

Insert

View

Customize

This is my textarea to be replaced with CKEditor.

Day Mode