How to Create a Resizable Bar and Apply a Dark Theme to a Markdown Editor

As web developers, we often come across design challenges that require us to create custom UI elements that improve user experience and complement our website or application's aesthetics. In this article, we will show you how to create a resizable bar that expands the entire width of a markdown editor, and also how to apply a dark theme to the editor to match a website's darker color scheme.

Resizable Bar

To begin, we need to inspect the existing resizable component and find the div with the class of "wmd editor bar." Inside this div, we will find an SVG element that displays a series of dots that indicate to the user that they can grab and resize the markdown editor.

To create our resizable bar, we will first hide the existing SVG element by adding the following CSS rule to the "text editor.css" file:

.text-editor .wmd-editor-bar svg {
  display: none;
}

Next, we will reposition and style the div to create our resizable bar. We will add the following CSS rule to "text editor.css" file:

.text-editor .wmd-editor-bar {
  height: 11px;
  cursor: row-resize;
  background-color: #37414b;
  background-repeat: no-repeat;
  background-position: 50%;
  width: 100%;
  position: relative;
}

With these rules, we set the height, cursor, background color, repeat and position of our resizable bar. We also set the width to 100% to make it expand across the entire width of the markdown editor.

To display the series of dots to the user, we add the following CSS rule to the "text editor.css" file:

.text-editor .wmd-editor-bar:before {
  content: "";
  display: block;
  height: 2px;
  width: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2 2'%3E%3Crect x='0' y='0' width='1' height='1' fill='%23fff' /%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff' /%3E%3C/svg%3E");
  margin: 4px auto;
}

This rule sets the content as an empty block and displays our series of dots as a background image.

Dark Theme

Now that we have created our resizable bar, we need to apply a dark theme to our markdown editor. Unfortunately, there is no built-in dark theme, so we will need to add additional CSS rules to change the editor's background, font, and color schemes.

To apply a dark theme, copy and paste the following CSS rules from the next lecture into your "text editor.css" file:

.text-editor {
  background-color: #2c2c2c;
  color: #d4d4d4;
}

.text-editor .CodeMirror {
  background-color: #2c2c2c;
  color: #d4d4d4;
}

.text-editor .CodeMirror-cursor {
  border-left: 2px solid #ccc;
}

.text-editor .CodeMirror-matchingbracket {
  background-color: #515151;
  color: #d4d4d4 !important;
}

.text-editor .CodeMirror-selected {
  background-color: rgba(221, 240, 255, 0.20);
}

.text-editor .CodeMirror.cm-s-abcdef span.cm-comment {
  color: #6f8f22;
}

.text-editor .CodeMirror.cm-s-abcdef span.cm-string {
  color: #d14;
}

.text-editor .CodeMirror.cm-s-abcdef span.cm-keyword {
  color: #569cd6;
}

.text-editor .CodeMirror.cm-s-abcdef span.cm-atom {
  color: #e6db74;
}

.text-editor .CodeMirror.cm-s-abcdef span.cm-number {
  color: #B5CEA8;
}

.text-editor .CodeMirror.cm-s-abcdef span.cm-variable-2 {
  color: #A9B7C6;
}

.text-editor .CodeMirror.cm-s-abcdef span.cm-variable-3,
.text-editor .CodeMirror.cm-s-abcdef span.cm-def {
  color: #cda869;
}

.text-editor .CodeMirror.cm-s-abcdef .CodeMirror-keyword {
  color: #d14;
}

.text-editor .CodeMirror.cm-s-abcdef .CodeMirror-number {
  color: #B5CEA8;
}

.text-editor .CodeMirror.cm-s-abcdef .CodeMirror-string {
  color: #6A8759;
}

.text-editor .CodeMirror.cm-s-abcdef .CodeMirror-comment {
  color: #6f8f22;
}

.text-editor .CodeMirror.cm-s-abcdef .CodeMirror-atom {
  color: #e6db74;
}

.text-editor .CodeMirror.cm-s-abcdef .CodeMirror-variable {
  color: #A9B7C6;
}

These CSS rules will change the background color, font, and color schemes of the markdown editor to match a dark theme.

Conclusion

In this article, we showed you how to create a resizable bar and apply a dark theme to a markdown editor. With a little bit of CSS, we have created a custom UI element that improves the user experience and complements our website's aesthetics. Remember, CSS is a powerful tool that allows us to customize and create beautiful UI elements that can take our websites and applications to the next level.