How Do I Put Summernote in Dark Mode?

Download Scripts from Git Hub for summernote

the first thing that you want to do is download the scripts for Summernote Themes from Github here. This will give you all the themes that I used in the video tutorial. Next if you have been following along in the tutorials here for summernote, all you have to do is modify the index.php file. Here is the new codes for that.

Index File

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Summernote Themes</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <!-- theme files !-->
  <link href="themes/darkly/summernote-lite-darkly.min.css" rel="stylesheet">
  <link href="themes/darkly/summernote-lite-darkly-libre.min.css" rel="stylesheet">
  <!-- end theme files !-->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
  <style>
body{
  background: #666666;
  color:#ffffff;
}
  .note-editor.note-frame .note-editing-area .note-editable{
    background-color:#666666;
    }
  .note-editing-area *{
    color:#ffffff;
    }</style>
</head>
<body>
<h1>Summernote Themes</h1>
<form method="post">
  <textarea id="editor" name="editordata"></textarea>
  <button id="save-btn">Save</button>
</form>
<div id="display"></div>;
<script>
$(document).ready(function(){
  $('#editor').summernote({
    height: 200
  });
$("#save-btn").click(function(){
var editor = $("#editor").val();
var dataString = 'editor1='+ editor;
if(editor=='')
{
$("#display").html("Please Enter Some Content");
}
else
{
$.ajax({
type: "POST",
url: "save.php",
data: dataString,
cache: false,
success: function(result){
$("#display").html(result);
}
});
}
return false;
});
});
</script>
</body>
</html>

How Do I Put Summernote in Dark Mode? was last modified: March 2nd, 2023 by Maximus Mccullough