[備忘] summernote を Boostrap5 のダークモードに対応させる

[MITSUHIRO-KURIKI]

一旦使う分だけ

• cssを当てるに当たってPOSTされたテキストを特定のclassNameで囲う処理を定義しておく

# html内容を囲うclass(css等での装飾のみに使用)
WRAP_ClassName = 'SummernoteTextArea'

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/settings.py#L33}

def add_wrap_ClassName_tag(html_text:str) -> str:
    wrap_start = f'<div class="{WRAP_ClassName}">'
    wrap_end   = '</div>'
    if not html_text.startswith(wrap_start):
        return wrap_start + html_text + wrap_end
    else:
        return html_text

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/converter/parts/html_modify.py#L68}

• 上で追加したclassNameは更新画面では削除して、保存の際のみ割当てを行う
  • 更新されるたびに className の wrap 階層が増えるのを防ぐ

def delete_wrap_ClassName_tag(html_text:str) -> str:
    soup = BeautifulSoup(html_text, "html.parser")
    wrap_content = []
    for wrap in soup.find_all("div", class_ = WRAP_ClassName):
        wrap_content += wrap.contents
    return ''.join(map(str, wrap_content))

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/apps/summernote/converter/parts/html_revert.py#L4}

• 本題(メニューボタン等もすべてカラー変更)

@charset "UTF-8";
:root {
    --blockquote-icon-size: 1rem;
}
/* menu */
.SummernoteTextArea {
    font-family: var(--font-family-base);
    padding:     .5rem;
}
.SummernoteTextArea .note-toolbar,
.SummernoteTextArea .note-dropdown-menu,
.SummernoteTextArea button,
.SummernoteTextArea .note-btn,
.SummernoteTextArea .note-modal-header,
.SummernoteTextArea .note-modal-title,
.SummernoteTextArea .note-modal-body,
.SummernoteTextArea .note-form-label,
.SummernoteTextArea .note-modal-footer,
.SummernoteTextArea .note-dropdown-menu .note-dropdown-item,
.SummernoteTextArea .note-popover,
.SummernoteTextArea .note-image-input {
    color:            var(--bs-body-color);
    border-color:     var(--bs-border-color);
}
.SummernoteTextArea .note-toolbar,
.SummernoteTextArea .note-dropdown-menu,
.SummernoteTextArea .note-modal-header,
.SummernoteTextArea .note-modal-body,
.SummernoteTextArea .note-modal-body input,
.SummernoteTextArea .note-modal-footer,
.SummernoteTextArea .note-popover,
.SummernoteTextArea .note-image-input {
    background-color: var(--navbar-bg);
}
.SummernoteTextArea .note-btn {
    background-color: var(--bs-button-bg-color);
}
/* menu botton */
.SummernoteTextArea .note-editor .note-toolbar,
.SummernoteTextArea .note-popover .popover-content {
    padding-bottom: .2rem;
    padding-left:   .1rem;
}
.SummernoteTextArea .note-editor .note-toolbar>.note-btn-group,
.SummernoteTextArea .note-popover .popover-content>.note-btn-group {
    margin-right: .1rem;
    margin-top:   .2rem;
}
/* dropdown-menu */
.SummernoteTextArea .note-dropdown-menu .note-dropdown-item {
    background-color: var(--navbar-bg);
}
.SummernoteTextArea .note-dropdown-menu .note-dropdown-item:hover {
    color:            var(--bs-emphasis-color);
    border-color:     var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
}
/* modal */
.SummernoteTextArea .note-modal-footer .note-btn-primary {
    color:            var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border-color:     var(--bs-btn-border-color);
}
.SummernoteTextArea .note-modal-footer .note-btn-primary:hover {
    color:            var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color:     var(--bs-btn-hover-border-color);
}
.SummernoteTextArea .note-editor .note-toolbar .note-color-all .note-dropdown-menu,
.SummernoteTextArea .note-popover .popover-content .note-color-all .note-dropdown-menu {
    min-width: 5vw;
}
.SummernoteTextArea .btn-light {
    border-color:     var(--bs-border-color);
    background-color: var(--bs-secondary-bg);
}
/* table */
.SummernoteTextArea .note-dimension-picker-highlighted,
.SummernoteTextArea .note-dimension-picker-unhighlighted {
    color:            var(--bs-body-color);
    border-color:     var(--bs-border-color);
}
.SummernoteTextArea .note-dimension-picker-highlighted {
    background-color: var(--bs-primary-bg-subtle);
}
.SummernoteTextArea .note-dimension-picker-unhighlighted {
    background-color: var(--bs-dark-bg-subtle);
}
/* popover */
.SummernoteTextArea .note-popover.bottom,
.SummernoteTextArea .note-popover-arrow {
    border-bottom-color: var(--bs-border-color);
}
.SummernoteTextArea .note-popover-arrow::after {
    border-bottom-color: var(--navbar-bg);
}
/* editing-area */
.SummernoteTextArea .note-editing-area {
    color:            var(--bs-body-color);
    background-color: var(--bs-body-bg);
}
/* code area */
.SummernoteTextArea .CodeMirror-cursor,
.SummernoteTextArea .CodeMirror-secondarycursor {
    color:       var(--bs-highlight-bg) !important;
    border-left: 1px solid var(--bs-body-color)!important;
}
.SummernoteTextArea .CodeMirror-gutter {
    color:            var(--bs-body-color);
    background-color: var(--navbar-bg);
}
.SummernoteTextArea .CodeMirror-scroll {
    color:            var(--bs-body-color);
    background-color: var(--navbar-bg);
}
/* styles */
/* anker */
.SummernoteTextArea a,
.SummernoteTextArea a:link,
.SummernoteTextArea a:active,
.SummernoteTextArea a:visited {
    color: var(--bs-link-color);
}
.SummernoteTextArea a:hover {
    color: var(--bs-link-hover-color);
}
/* hr */
.SummernoteTextArea hr {
    margin-top:    .5rem;
    margin-bottom: .5rem;
}
/* pre code */
.SummernoteTextArea pre {
    padding:    0.3em;
    background: var(--bs-tertiary-bg);
    border:     1px solid var(--bs-border-color);
}
/* blockquote */
.SummernoteTextArea blockquote {
    position:   relative;
    padding:    0 0 .25rem calc( var(--blockquote-icon-size) + ( var(--blockquote-icon-size) / 4 ) );
    background: var(--bs-tertiary-bg);
    border: 1px solid var(--bs-border-color);
    font-style: italic;
}
.SummernoteTextArea blockquote:before{
    position:    absolute;
    left:        calc( var(--blockquote-icon-size) / 5 );
    font-family: 'FontAwesome';
    content:     "\F10D";
    color:       var(--bs-border-color);
    font-size:   var(--blockquote-icon-size);
}
/* list */
.SummernoteTextArea li {
    list-style-type: inherit;
}

^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/static/templates/common/lib/summernote/summernote.css}

• template側
  ^{https://github.com/MITSUHIRO-KURIKI/DjangoTemplate/blob/main/templates/common/debug/sample/summernote_form/create_or_update.html#L43}