---
# System prepended metadata

title: 開發紀錄 week3 ouo

---

# 開發紀錄 week3 ouo
###### 學生 : 程品奕 F74104723
### 21/10/02 
![](https://i.imgur.com/9UWoahY.png)

## Juce Setup 

- Juce location :`C:\JUCE`
- Editor : vs2019

### AudioPluginHost
 `C:\JUCE\extras\AudioPluginHost\Builds\VisualStudio2019\x64\Debug\App`
 ![](https://i.imgur.com/iR5PGDt.png)

### VST build location
`D:\NCKU\DigitalMusicSignal\SineWaveSynth\Builds\VisualStudio2019\x64\Debug\VST3`

## UI stuffs
### AudioProcessorValueTreeState
這個 class 用來存 UI(slider,combo box, ... ) input 進來的數值，然後給SynthVoice讀取。
- 在 Editor 端，UI components 要用 attachment 來接上 value tree。
- 在 Synth 端，讀取變數的方式如 :　`level = tree->getRawParameterValue("level")->load();`。

好複雜。
### FlexBox
用來排版 UI，可以 nested。可是手動調整 plugin 視窗大小後 resize() 似乎不會被呼叫，所以排版不會跟著變。
### Knob
對 Slider 使用`setSliderStyle(juce::Slider::SliderStyle::RotaryVerticalDrag);` 可得到 knob。
![](https://i.imgur.com/x6jwyp0.png)
## ADSR
增加了 aTime, dTime, sTime, rTime, aVel, dVel, sVel, rVel 8個旋鈕，讓使用者控制 envelope。

Attack 和 decay 為線性變化，sustain 和 release 為指數下降。
sTime 和 rTime 指的是指數下降的"半衰期"。
sVel 和 rVel 目前沒有用。

## More waveform types
在 sine 之外增加了 square, triangle, saw 等 waveform。使用者可由 combo box 選擇 waveform。
### Math implementation:

- sine :　`value = std::sin(currentAngle);`
- square :　`value = ((int)(currentAngle / PI)) % 2 ? 1 : -1;`
- tri :　`value = abs(fmod(currentAngle / PI,2)-1)+0.5;`
- saw :　`value = fmod( currentAngle / PI,2) - 1;`

Nomalization 還沒做。


<style>  body[style],  body[style*="background-color: white;"] {    background-color: #1e1e1e !important;  }  body {    color: #abb2bf;  }  .ui-view-area,  .markdown-body,  .ui-content {    background: #1e1e1e;    color: #abb2bf;  }  h1,  h2,  h3,  h4,  h5,  h6,  p {    color: #ddd;  }  /* form */  .form-control {    background: #333;    color: #fff;    border-color: #8e8e8e;  }  .form-control::placeholder,  .form-control::-webkit-input-placeholder,  .form-control:-moz-placeholder,  .form-control::-moz-placeholder,  .form-control:-ms-input-placeholder {    color: #eee;  }  /*--------------- navbar ---------------*/  .header {    background-color: #0e0e0e;    border-color: #0e0e0e;  }  .navbar {    background-color: #0e0e0e;    border-color: #0e0e0e;  }  .navbar a {    color: #eee !important;  }  .navbar .btn-group label {    background-color: #0e0e0e;    color: #eee;    border-color: #555;  }  .navbar .btn-group label.btn-default:focus,  .navbar .btn-group label.btn-default:hover {    background-color: #2a2a2a;    color: #eee;    border-color: #555;  }  .navbar .btn-group label.active {    background-color: #555;    color: #eee;    border-color: #555;  }  .navbar .btn-group label.active:focus,  .navbar .btn-group label.active:hover {    background-color: #555;    color: #eee;    border-color: #555;  }  .navbar-default .btn-link:focus,  .navbar-default .btn-link:hover {    color: #eee;  }  .navbar-default .navbar-nav>.open>a,  .navbar-default .navbar-nav>.open>a:focus,  .navbar-default .navbar-nav>.open>a:hover {    background-color: #555;  }  .dropdown-header {    color: #eee;  }  .dropdown-menu {    background-color: #222;    border: 1px solid #555;    border-top: none;  }  .dropdown-menu>li>a {    color: #eee;  }  .dropdown-menu>li>a:focus,  .dropdown-menu>li>a:hover {    background-color: #555555;    color: #eee;  }  .dropdown-menu .divider {    background-color: #555;  }  .header .open .dropdown-menu {    background-color: #202020;  }  .ui-share-menu .ui-share-copy,  .ui-share-menu .ui-share-preview {    border-color: #6d6d6d !important;    background-color: #333 !important;    color: #FFF !important;  }  .ui-share-menu .ui-share-copy:hover,  .ui-share-menu .ui-share-copy:focus,  .ui-share-menu .ui-share-preview:hover,  .ui-share-menu .ui-share-preview:focus {    background-color: #737373 !important;    color: #FFF !important;  }  .permission-dropdown .ui-more-settings,  .permission-dropdown .sidenav-trigger {    color: #7bf;  }  .public-published-toggle .unpublish:hover {    background-color: #286090;  }  .menuitem-dropdown .menuitem-dropdown-trigger {    border-color: #8e8e8e;  }  .menuitem-dropdown .menuitem-dropdown-trigger:hover,  .menuitem-dropdown .menuitem-dropdown-trigger:focus {    background-color: #3e4045;  }  .navbar .announcement-popover {    background: #4F4F4F;  }  .navbar .announcement-popover .announcement-popover-header {    background: #2e2e2e;    border-bottom: 1px solid #2e2e2e;  }  .navbar .announcement-popover .announcement-popover-body {    background: #4F4F4F;    color: #eee;  }  .navbar .announcement-popover .announcement-popover-footer {    background: #4F4F4F;  }  .navbar .announcement-area .caption.inverse {    color: #eee;  }  .label-warning {    background-color: #ffc107;    color: #212529;  }  /*--------------- history / recent ---------------*/  .list.row-layout li .item {    border-color: #696c7d;  }  .list.row-layout li:nth-last-of-type(1) .item {    border-bottom: none;  }  .list li .item {    background: #1c1c1c;    color: #fff;  }  .list li:hover .item,  .list li:focus .item {    background: #404040;  }  .list li .item h4 {    color: #fff;  }  .list li p {    color: #ccc;  }  .list li p i {    font-style: normal;  }  .list li .item .content .tags span {    background: #555;  }  .list li .item.wide .content .title a,  .list li .item.wide .content .title a:focus,  .list li .item.wide .content .title a:hover {    color: #ddd;  }  .ui-item {    color: #fff;    opacity: 0.7;  }  .ui-item:hover,  .ui-item:focus {    opacity: 1;    color: #fff;  }  .list li .item.wide hr {    border-color: #6d6d6d;  }  .overview-widget-group .btn,  .multi-select-dropdown-menu .ui-dropdown-label,  .multi-select-dropdown-menu .dropdown-options,  .form-control {    border-color: #8e8e8e;  }  .multi-select-dropdown-menu .dropdown-options .ui-option:hover {    background-color: #4d4d4d;    color: #eee;  }  #overview-control-form #overview-keyword-input-container .select2-container {    background-color: #3e4045 !important;  }  #overview-control-form #overview-keyword-input-container .select2-container .select2-choices {    background-color: #3e4045;  }  .search {    background-color: #3e4045;    color: #eee;  }  .btn.btn-gray {    background: #1b1b1b;  }  .btn.btn-gray:hover {    background: #4d4d4d;    color: #eee;  }  .search::placeholder,  .search::-webkit-input-placeholder,  .search:-moz-placeholder,  .search::-moz-placeholder,  .search:-ms-input-placeholder {    color: #eee;  }  .btn.btn-gray {    border-color: #6d6d6d;    background: #333;    color: #eee;  }  .select2-default {    color: #eee !important;  }  .select2-results .select2-highlighted {    background: #4d4d4d;    color: #eee;  }  .select2-container-multi .select2-choices {    background: #3e4045;  }  .select2-container-multi .select2-choices .select2-search-choice {    background: #131313;    color: #eee;    border-color: #555;    box-shadow: none;  }  .btn-default,  .btn-default:focus {    color: #eee;    background-color: #2e2e2e;    border-color: #6a6a6a;  }  .btn-default.active.focus,  .btn-default.active:focus,  .btn-default.active:hover,  .btn-default:active.focus,  .btn-default:active:focus,  .btn-default:active:hover,  .open>.dropdown-toggle.btn-default.focus,  .open>.dropdown-toggle.btn-default:focus,  .open>.dropdown-toggle.btn-default:hover {    background: #737373;  }  .btn-default:hover {    color: #fff;    background-color: #7d7d7d;    border-color: #6a6a6a;  }  .overview-widget-group .btn.active {    background-color: #6a6a6a;    color: #eee;  }  .overview-widget-group .btn:hover {    background-color: #7d7d7d;    color: #eee;    border-color: #636363;  }  .overview-widget-group .slider.round {    border-color: #ccc;  }  .overview-widget-group .slider.round:before {    border-color: #ccc;  }  .overview-widget-group input:checked+.slider {    background-color: #ccc;  }  .ui-category-description-icon a {    color: #eee;  }  .item .ui-history-pin.active {    color: #f00;  }  .ui-history-close {    color: #eee;    opacity: 0.5;  }  .pagination>li>a,  .pagination>li>span {    color: #eee;    background-color: #2e2e2e;    border-color: #6a6a6a;  }  .pagination>li>a:hover {    color: #fff;    background-color: #7d7d7d;    border-color: #6a6a6a;  }  .pagination>.disabled>a,  .pagination>.disabled>a:focus,  .pagination>.disabled>a:hover,  .pagination>.disabled>span,  .pagination>.disabled>span:focus,  .pagination>.disabled>span:hover {    color: #eee;    background-color: #2e2e2e;    border-color: #6a6a6a;  }  .pagination.dark>li>a,  .pagination.dark>li>span {    color: #aaa;  }  /*--------------- new overview ---------------*/.overview-component .list li .item {  background: #1c1c1c;  color: #fff;}.overview-component .list li:hover .item,.overview-component .list li:focus .item {  background: #404040;}.overview-component .list li p {  color: #ccc;}.overview-component .list li .item {  color: #888888;}.overview-component .ui-overview-pin {  opacity: 1;}  /*--------------- settings ---------------*/  .section .form-horizontal .form-group .btn-default {    font-size: 16px;    border-color: #6d6d6d;    background-color: #333;    color: #FFF;  }  .section .form-horizontal .form-group .btn-default:hover,  .section .form-horizontal .form-group .btn-default:focus {    background-color: #737373;    color: #FFF;  }  .section .form-horizontal .form-control:focus {    border-color: #bbb;  }  /*--------------- share view ---------------*/  #notificationLabel,  .ui-infobar .btn.ui-edit {    color: #eee;    border-color: #6a6a6a;  }  .ui-infobar__user-info li {    color: #bbb;  }  footer {    background: #101010;    color: #bbb;    border-top: 1px solid #454545;  }  footer a {    color: #bbb;  }  /*--------------- doc view ---------------*/  .markdown-body h1,  .markdown-body h2,  .markdown-body h3,  .markdown-body h4,  .markdown-body h5,  .markdown-body h6,  #doc>h1 {    color: #ddd;    border-color: #777 !important;  }  .markdown-body hr {    background-color: #7e7e7e;  }  .h1 .small,  .h1 small,  .h2 .small,  .h2 small,  .h3 .small,  .h3 small,  .h4 .small,  .h4 small,  .h5 .small,  .h5 small,  .h6 .small,  .h6 small,  h1 .small,  h1 small,  h2 .small,  h2 small,  h3 .small,  h3 small,  h4 .small,  h4 small,  h5 .small,  h5 small,  h6 .small,  h6 small {    color: #ddd;  }  .markdown-body p {    color: #ddd;  }  .markdown-body a {    color: #7bf;  }  .markdown-body a code {    color: #7bf !important;  }  .markdown-body ul li,  .markdown-body ol li {    color: #ddd;  }  .markdown-body blockquote {    color: #ddd;    border-left-color: #777;    font-size: 16px;  }  .markdown-body code,  code {    color: #dfdfdf !important;    background-color: #424a55;  }  .markdown-body code {    padding: 1px 2px;  }  .markdown-body pre {    background-color: #1e1e1e;    border: 1px solid #555 !important;    color: #dfdfdf;  }  .markdown-body details {    margin-bottom: 16px;  }  blockquote .small,  blockquote footer,  blockquote small {    color: #bbb;  }  .mark,  mark {    background-color: rgba(255, 255, 0, 0.32) !important;    color: #ddd;    margin: .1em;    padding: .1em .2em;  }  /* Todo list */  .task-list-item-checkbox {    margin: 0.18em 0 0.2em -1.3em !important;  }  .task-list-item input[type=checkbox] {    -webkit-appearance: none;    -moz-appearance: none;    appearance: none;    position: relative;    top: -1px;    margin: 0 1rem 0 0;    cursor: pointer;  }  .task-list-item input[type=checkbox]::before {    -webkit-transition: all 0.1s ease-in-out;    -moz-transition: all 0.1s ease-in-out;    transition: all 0.1s ease-in-out;    content: "";    position: absolute;    left: 0;    z-index: 1;    width: 16px;    height: 16px;    border: 2px solid #F44336;  }  .task-list-item input[type=checkbox]:checked::before {    -webkit-transform: rotate(-48deg);    -moz-transform: rotate(-48deg);    -ms-transform: rotate(-48deg);    -o-transform: rotate(-48deg);    transform: rotate(-48deg);    height: 9px;    border-color: #00E676;    border-top-style: none;    border-right-style: none;  }  .task-list-item input[type=checkbox]::after {    content: "";    position: absolute;    top: -0.125rem;    left: 0;    width: 16px;    height: 16px;    background: #333;    cursor: pointer;  }  /* table */  .markdown-body table tr {    background-color: #1e1e1e;    border-color: #626262;  }  .markdown-body table tr:last-child {    border-bottom: 1px solid #626262;  }  .markdown-body table tr:nth-child(2n) {    background-color: #333;  }  .markdown-body table tr th {    color: #64B5F6;  }  .markdown-body table th,  .markdown-body table td {    border: none;    border-color: #626262;  }  .markdown-body table tr td {    color: #ddd;  }  .markdown-body table tr th:first-child,  .markdown-body table tr td:first-child {    border-left: 1px solid #626262;  }  .markdown-body table tr th:last-child,  .markdown-body table tr td:last-child {    border-right: 1px solid #626262;  }  .markdown-body pre.flow-chart,  .markdown-body pre.sequence-diagram,  .markdown-body pre.graphviz,  .markdown-body pre.mermaid,  .markdown-body pre.abc {    background-color: #fff !important;  }  /* alert */  .alert-danger h1,  .alert-danger h2,  .alert-danger h3,  .alert-danger h4,  .alert-danger h5,  .alert-danger h6,  .alert-danger p,  .alert-danger mark,  .alert-danger ul li,  .alert-danger ol li {    color: #721c24;  }  .alert-danger hr {    background-color: #721c24;  }  .alert-warning h1,  .alert-warning h2,  .alert-warning h3,  .alert-warning h4,  .alert-warning h5,  .alert-warning h6,  .alert-warning p,  .alert-warning mark,  .alert-warning ul li,  .alert-warning ol li {    color: #856404;  }  .alert-warning hr {    background-color: #856404;  }  .alert-success h1,  .alert-success h2,  .alert-success h3,  .alert-success h4,  .alert-success h5,  .alert-success h6,  .alert-success p,  .alert-success mark,  .alert-success ul li,  .alert-success ol li {    color: #155724;  }  .alert-success hr {    background-color: #155724;  }  .alert-info h1,  .alert-info h2,  .alert-info h3,  .alert-info h4,  .alert-info h5,  .alert-info h6,  .alert-info p,  .alert-info mark,  .alert-info ul li,  .alert-info ol li {    color: #004085;  }  .alert-info hr {    background-color: #004085;  }  .alert a {    color: #002752;    font-weight: 700;  }  .alert h1:first-child,  .alert h2:first-child,  .alert h3:first-child,  .alert h4:first-child,  .alert h5:first-child,  .alert h6:first-child {    margin-top: 0;  }  .markdown-body .alert>p {    margin-top: 0px;    margin-bottom: 10px;  }  .markdown-body .alert>ul,  .markdown-body .alert>ol {    margin-bottom: 16px;  }  .markdown-body .alert>*:last-child {    margin-bottom: 0;  }  .alert-warning {    background-color: #fff3cd;    border-color: #ffeeba;  }  .alert-danger mark {    background-color: #ffb7b7 !important;  }  .alert-warning mark {    background-color: #ffe966 !important;  }  .alert-success mark {    background-color: #b9e990 !important;  }  .alert-info mark {    background-color: #b1d6ff !important;  }  /* scroll bar */  .ui-edit-area .ui-resizable-handle.ui-resizable-e {    background-color: #303030;    border: 1px solid #303030;    box-shadow: none;  }  /* info bar */  .ui-infobar {    color: #999;  }  /* permission */  .permission-popover-btn-group .btn.focus,  .permission-popover-btn-group .btn:active,  .permission-popover-btn-group .btn:focus,  .permission-popover-btn-group .btn.active {    background-color: #6a6a6a !important;    color: #eee !important;    border-color: #555 !important;  }  .permission-popover-btn-group .btn:hover,  .permission-popover-btn-group .btn.active:hover {    background-color: #7d7d7d !important;    color: #eee !important;    border-color: #636363 !important;  }  .ui-delete-note:hover,  .ui-delete-note:focus,  .ui-delete-note:active {    background-color: #dc3545 !important;  }  .ui-invitee-invite {    border-color: #8e8e8e !important;  }  .ui-invitee-invite:hover,  .ui-invitee-invite:focus {    background-color: #737373;    color: #eee !important;  }  .ui-no-invitee-label {    color: #ccc !important;  }  .select2-container {    background: #202020;  }  .select2-container-multi .select2-choices .select2-search-field input {    color: #eee;  }  .select2-container-multi .select2-choices .select2-search-field input.select2-active {    color: #000;  }  .select2-drop {    background: #202020;    color: #eee;  }  .select2-results .select2-no-results,  .select2-results .select2-searching,  .select2-results .select2-ajax-error,  .select2-results .select2-selection-limit {    background: #202020;  }  /* table of contents block*/  .ui-toc-dropdown {    width: 42vw;    max-height: 90vh;    overflow: auto;    text-align: inherit;  }  /* table of contents text*/  .ui-toc-dropdown .nav>li>a {    font-size: 14px;    font-weight: bold;    color: #ddd;  }  /* table of contents text: active*/  .ui-toc-dropdown .nav>.active:focus>a,  .ui-toc-dropdown .nav>.active:hover>a,  .ui-toc-dropdown .nav>.active>a {    color: #7bf;    border-left-color: #7bf;  }  /* table of contents text: focus, hover*/  .ui-toc-dropdown .nav>li>a:focus,  .ui-toc-dropdown .nav>li>a:hover {    color: #7bf;    border-left-color: #7bf;  }  /* drop down floating table of contents */  .ui-toc-dropdown.dropdown-menu {    background: #333;  }  .toc-menu a {    color: #ddd;  }  .toc-menu a:focus,  .toc-menu a:hover {    color: #7bf;  }  /*--------------- editor ---------------*/  .cm-m-markdown {    color: #ddd;  }  .cm-s-one-dark .cm-header,  .cm-m-xml.cm-attribute {    color: #ffa653;  }  .cm-m-markdown.cm-variable-3 {    color: #ff7e7e;  }  .cm-s-one-dark .cm-string,  .cm-s-one-dark .cm-variable-2,  .cm-s-one-dark .cm-m-markdown.cm-url{    color: #7bf;  }  .cm-s-one-dark .cm-m-markdown.cm-link {    color: #b0ee83;  }  .cm-s-one-dark .CodeMirror-linenumber {    color: #666;  }  .cm-strong {    color: #f4511e;  }  .cm-s-one-dark .cm-comment {    color: #a9a9a9;  }  .cm-matchhighlight {    color: #ffea00;  }  .cm-positive {    color: #11bf64;  }  .cm-negative {    color: #ff3e3e;  }  .dropdown-menu.CodeMirror-other-cursor {    border: 2px solid #4d4d4d;    background-color: #202020;  }  .dropdown-menu.CodeMirror-other-cursor li a {    color: #ececec;  }  /*--------------- book mode ---------------*/  .topbar {    background: #1e1e1e;  }  .btn.focus,  .btn:focus,  .btn:hover {    color: #fff;    background-color: #333;  }  .summary {    background: #1e1e1e;  }  .summary,  .toolbar {    background: #1e1e1e !important;    border-color: #4d4d4d !important;  }  .toolbar i {    color: #fff;  }  .summary h1,  .summary h2,  .summary h3 .summary hr {    color: #ddd;    border-color: #777 !important;  }  .summary .nav>li>a {    color: #7bf;  }  .summary .nav-pills>li.active>a,  .summary .nav-pills>li.active>a:focus,  .summary .nav-pills>li.active>a:hover {    color: #ff9100;  }  .ui-summary-search {    font-size: 16px;    border: 1px solid #6D6D6D;    background-color: #333;    color: #FFF;  }  .summary h1,  .summary h2,  .summary h3,  .summary h4,  .summary h5,  .summary h6 {    border-color: #454545;  }  /* fix body background color to dark */  div[class$=container-mask] {    background: #1e1e1e;    z-index: 1;    display: block;  }  /* notification */  .dropdown.ui-notification .ui-notification-label,  .dropdown.ui-invitee .ui-invitee-label {    color: #eee;    border-color: #6a6a6a;  }  .ui-notification .dropdown-menu {    border-top: 1px solid #555;  }  /*--------------- help ---------------*/  .modal-header {    background-color: #2a2a2a;  }  .panel-default {    border-color: #6d6d6d;  }  .panel-default>.panel-heading {    background-color: #2a2a2a;    color: #eee;    border-color: #6d6d6d;  }  .panel-body {    background: #2e2e2e;  }  .panel-body a {    color: #7bf;  }  .table>tbody>tr>td,  .table>tbody>tr>th,  .table>tfoot>tr>td,  .table>tfoot>tr>th,  .table>thead>tr>td,  .table>thead>tr>th {    border-color: #6d6d6d;  }  /*--------------- comment ---------------*/  .ui-comment-container .ui-comment-header {    background-color: #2a2a2a;    color: #eee;    border-color: #6d6d6d;  }  .ui-comment-container {    background-color: #2e2e2e;    border-color: #6d6d6d;  }  .ui-comment-container .ui-comments-container .ui-comment .comment-author {    color: #eee;  }  .ui-comment-container .ui-comments-container .ui-comment .timestamp {    color: #aaa;  }  .ui-comment-container .ui-comments-container .ui-comment .comment-content {    color: #eee;  }  .ui-comment-container .ui-comments-container .ui-comment .comment-menu {    color: #eee;  }  .ui-comment-container .ui-comments-container .ui-comment .comment-menu .comment-dropdown-menu {    background: #222;    color: #eee;    border-color: #555;  }  .ui-comment-container .ui-comments-container .ui-comment .comment-menu .comment-dropdown-menu>div:hover {    background-color: #555555;    color: #eee;  }  .ui-comment-container .ui-comments-container .ui-comment .comment-menu:hover,  .ui-comment-container .ui-comments-container .ui-comment .comment-menu:active,  .ui-comment-container .ui-comments-container .ui-comment .comment-menu.active {    background-color: #737373;    color: #eee;  }  .ui-comment-container .ui-comment-input-container {    background-color: #3c3c3c;  }  .ui-comment-container textarea {    background-color: #3e4045;    color: #eee;    border: 1px solid #6d6d6d;  }  .ui-comment-container textarea::placeholder,  .ui-comment-container textarea::-webkit-input-placeholder,  .ui-comment-container textarea:-moz-placeholder,  .ui-comment-container textarea::-moz-placeholder,  .ui-comment-container textarea:-ms-input-placeholder {    color: #eee;  }  @keyframes highlight {    0% {      background-color: #3c3c3c;    }    30% {      background-color: #3c3c3c;    }    100% {      background-color: transparent;    }  }  /*--------------- template ---------------*/  .template-content .modal-header {    background: #2a2a2a;  }  .template-content .close {    color: #fff;  }  .template-content .modal-title {    color: #eee;  }  .template-content .ui-templates-container {    border-color: #6d6d6d;  }  .ui-templates-container .ui-create-template-btn {    background: #446fab;    color: #fff;  }  .ui-template-list-filter .ui-template-list-filter-label,  .ui-template-list-filter .ui-template-list-filter-label:hover {    color: #eee;  }  .ui-template-list .list-group-item.active {    background: #4d4d4d;  }  .ui-template-list .list-group-item.active:focus {    background: #4d4d4d !important;  }  .list-group-item.active,  .list-group-item.active:focus,  .list-group-item.active:hover {    color: #eee;  }  .ui-template-list .list-group-item .list-group-item-heading {    color: #eee;  }  .ui-template-list .list-group-item.active .list-group-item-heading {    color: #eee;  }  .ui-template-list .list-group-item:hover {    background: #4d4d4d !important;  }  .ui-template-item-menu {    color: #eee !important;  }  .ui-template-list .list-group-item {    color: #fff;  }  .ui-template-list .list-group-item .dropdown-container.open {    background-color: #2a2a2a;  }  .ui-template-list .list-group-item .dropdown-container:hover {    background-color: #2a2a2a !important;  }  .template-menu .more-template {    border-color: #6d6d6d;  }  .template-menu .more-template:hover {    color: #eee;    border-color: #6d6d6d;  }  /*--------------- code mirror ---------------*/  .modal-content {    background: #1f2226;  }  .modal-header {    border-bottom: 1px solid #46484f;  }  .modal-footer {    border-top: 1px solid #46484f;  }  a.list-group-item {    background: #1f2226;    color: #ddd;    border: 1px solid #46484f;  }  a.list-group-item .list-group-item-heading {    color: #ddd;  }  a.list-group-item:focus,  a.list-group-item:hover {    background: #434651;    color: #ddd;  }  button.close {    color: #ddd;    opacity: .5;  }  .close:focus,  .close:hover {    color: #fff;    opacity: .8;  }  .CodeMirror {    background: #1f2226;  }  .CodeMirror-gutters {    background: #1f2226;    border-right: 1px solid rgba(204, 217, 255, 0.1);  }  .cm-s-default .cm-comment {    color: #888;  }  .cm-s-default .cm-quote {    color: #ddd;  }  .cm-s-default .cm-header {    color: #ffa653;  }  .cm-s-default .cm-link {    color: #b0ee83;  }  .cm-s-default .cm-string,  .cm-s-default .cm-variable-2 {    color: #7bf;  }  .cm-s-default .cm-def {    color: #c678dd;  }  .cm-s-default .cm-number,  .cm-s-default .cm-attribute,  .cm-s-default .cm-qualifier,  .cm-s-default .cm-plus,  .cm-s-default .cm-atom {    color: #eda35e;  }  .cm-s-default .cm-property,  .cm-s-default .cm-variable,  .cm-s-default .cm-variable-3,  .cm-s-default .cm-operator,  .cm-s-default .cm-bracket {    color: #f76e79;  }  .cm-s-default .cm-keyword,  .cm-s-default .cm-builtin,  .cm-s-default .cm-tag {    color: #98c379;  }  .modal-title {    color: #ccc;  }  .modal-body {    color: #ccc !important;  }  div[contenteditable]:empty:not(:focus):before {    color: #aaa;  }  .CodeMirror pre {    color: #ddd;  }  .CodeMirror pre span[style^="background-color: rgb(221, 251, 230)"] {    background-color: #288c27 !important;  }  .CodeMirror pre span[style^="background-color: rgb(249, 215, 220)"] {    background-color: #a52721 !important;  }  /*------- code highlight: Visual Stutdio Code theme for highlight.js -------*/  .hljs {    background: #1E1E1E;    color: #DCDCDC;  }  .hljs-keyword,  .hljs-literal,  .hljs-symbol,  .hljs-name {    color: #569CD6;  }  .hljs-link {    color: #569CD6;    text-decoration: underline;  }  .hljs-built_in,  .hljs-type {    color: #4EC9B0;  }  .hljs-number,  .hljs-class {    color: #B8D7A3;  }  .hljs-string,  .hljs-meta-string {    color: #D69D85;  }  .hljs-regexp,  .hljs-template-tag {    color: #d16969;  }  .hljs-title {    color: #dcdcaa;  }  .hljs-subst,  .hljs-function,  .hljs-formula {    color: #DCDCDC;  }  .hljs-comment,  .hljs-quote {    color: #57A64A;  }  .hljs-doctag {    color: #608B4E;  }  .hljs-meta,  .hljs-meta-keyword,  .hljs-tag {    color: #9B9B9B;  }  .hljs-variable,  .hljs-template-variable {    color: #BD63C5;  }  .hljs-params,  .hljs-attr,  .hljs-attribute,  .hljs-builtin-name {    color: #9CDCFE;  }  .hljs-section {    color: gold;  }  .hljs-emphasis {    font-style: italic;  }  .hljs-strong {    font-weight: bold;  }  /*  .hljs-code {    font-family:'Monospace';  }  */  .hljs-bullet,  .hljs-selector-tag,  .hljs-selector-id,  .hljs-selector-class,  .hljs-selector-attr,  .hljs-selector-pseudo {    color: #D7BA7D;  }  .hljs-addition {    background-color: #155a36;    color: #dfdfdf;    display: inline-block;    width: 100%;  }  .hljs-deletion {    background-color: #872e2e;    color: #dfdfdf;    display: inline-block;    width: 100%;  }  /*---------- code highlight: Visual Stutdio Code theme for Prism.js ----------*/  code[class*="language-"],  pre[class*="language-"] {    color: #DCDCDC;  }  :not(pre)>code[class*="language-"],  pre[class*="language-"] {    background: #1E1E1E;  }  .token.comment,  .token.block-comment,  .token.prolog,  .token.cdata {    color: #57A64A;  }  .token.doctype,  .token.punctuation {    color: #9B9B9B;  }  .token.tag,  .token.entity {    color: #569CD6;  }  .token.attr-name,  .token.namespace,  .token.deleted,  .token.property,  .token.builtin {    color: #9CDCFE;  }  .token.function,  .token.function-name {    color: #dcdcaa;  }  .token.boolean,  .token.keyword,  .token.important {    color: #569CD6;  }  .token.number {    color: #B8D7A3;  }  .token.class-name,  .token.constant {    color: #4EC9B0;  }  .token.symbol {    color: #f8c555;  }  .token.rule {    color: #c586c0;  }  .token.selector {    color: #D7BA7D;  }  .token.atrule {    color: #cc99cd;  }  .token.string,  .token.attr-value {    color: #D69D85;  }  .token.char {    color: #7ec699;  }  .token.variable {    color: #BD63C5;  }  .token.regex {    color: #d16969;  }  .token.operator {    color: #DCDCDC;    background: transparent;  }  .token.url {    color: #67cdcc;  }  .token.important,  .token.bold {    font-weight: bold;  }  .token.italic {    font-style: italic;  }  .token.entity {    cursor: help;  }  .token.inserted {    color: green;  }  /*---------- code highlight: dark theme for Gist ----------*/  .gist .gist-file {    border: 1px solid #555;  }  .gist .gist-data {    background-color: #1e1e1e;    border-bottom: 1px solid #555;  }  .gist .gist-meta {    background-color: #424a55;    color: #eee;  }  .gist .gist-meta a {    color: #eee;  }  .gist .highlight {    color: #eee;    background-color: #1e1e1e;  }  .gist .blob-num {    color: #afafaf;  }  .gist .blob-code-inner {    color: #dfdfdf;  }  .pl-mb {    color: #fff !important;  }  .pl-c {    color: #57A64A !important;  }  /* comment */  .pl-ent {    color: #569CD6 !important;  }  /* entity */  .pl-e {    color: #9CDCFE !important;  }  .pl-en {    color: #4EC9B0 !important;  }  /* entity attribute */  .pl-smi {    color: #9CDCFE !important;  }  .pl-k {    color: #569cd6 !important;  }  .pl-c1,  .pl-s .pl-v {    color: #4EC9B0 !important;  }  .pl-pds,  .pl-s,  .pl-s .pl-pse .pl-s1,  .pl-sr,  .pl-sr .pl-cce,  .pl-sr .pl-sra,  .pl-sr .pl-sre,  .pl-s .pl-s1 {    color: #D69D85 !important;  }  .pl-s .pl-s1 .pl-pse {    color: #c5dbff !important;  }  /* strings */  .diff-table .pl-c,  .diff-table .pl-ent,  .diff-table .pl-e,  .diff-table .pl-en,  .diff-table .pl-pds,  .diff-table .pl-s,  .diff-table .pl-s .pl-s1,  .diff-table .pl-s .pl-pse .pl-s1,  .diff-table .pl-sr,  .diff-table .pl-sr .pl-cce,  .diff-table .pl-sr .pl-sra,  .diff-table .pl-sr .pl-sre,  .diff-table .pl-k,  .diff-table .pl-smi,  .diff-table .pl-c1,  .diff-table .pl-v {    color: #eee !important;  }}</style>