mirror of
https://github.com/misode/misode.github.io.git
synced 2026-04-23 07:10:41 +00:00
Add dark mode
This commit is contained in:
Misode
@@ -125,14 +125,12 @@ Promise.all([
|
||||
}
|
||||
|
||||
sourceToggle.addEventListener('click', evt => {
|
||||
if (sourceViewEl.classList.contains('toggled')) {
|
||||
sourceViewEl.classList.remove('toggled')
|
||||
sourceToggle.children[0].classList.remove('inactive')
|
||||
sourceToggle.children[1].classList.add('inactive')
|
||||
if (sourceViewEl.classList.contains('active')) {
|
||||
sourceViewEl.classList.remove('active')
|
||||
sourceToggle.classList.remove('toggled')
|
||||
} else {
|
||||
sourceViewEl.classList.add('toggled')
|
||||
sourceToggle.children[0].classList.add('inactive')
|
||||
sourceToggle.children[1].classList.remove('inactive')
|
||||
sourceViewEl.classList.add('active')
|
||||
sourceToggle.classList.add('toggled')
|
||||
}
|
||||
})
|
||||
|
||||
@@ -144,13 +142,13 @@ Promise.all([
|
||||
})
|
||||
|
||||
themeSelector.addEventListener('click', evt => {
|
||||
Array.from(themeSelector.children).forEach(el => {
|
||||
if (el.classList.contains('inactive')) {
|
||||
el.classList.remove('inactive')
|
||||
} else {
|
||||
el.classList.add('inactive')
|
||||
}
|
||||
})
|
||||
if (document.body.getAttribute('data-style') === 'dark') {
|
||||
document.body.setAttribute('data-style', 'light')
|
||||
themeSelector.classList.remove('toggled')
|
||||
} else {
|
||||
document.body.setAttribute('data-style', 'dark')
|
||||
themeSelector.classList.add('toggled')
|
||||
}
|
||||
})
|
||||
|
||||
githubLink.addEventListener('click', evt => {
|
||||
|
||||
@@ -18,17 +18,17 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="nav">
|
||||
<div id="source-toggle" class="nav-item">
|
||||
<div id="source-toggle" class="nav-item toggle">
|
||||
<svg id="source-toggle-tree" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"></path></svg>
|
||||
<svg id="source-toggle-source" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z"></path></svg>
|
||||
<svg id="source-toggle-tree" class="inactive" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M0 3.75C0 2.784.784 2 1.75 2h12.5c.966 0 1.75.784 1.75 1.75v8.5A1.75 1.75 0 0114.25 14H1.75A1.75 1.75 0 010 12.25v-8.5zm1.75-.25a.25.25 0 00-.25.25v8.5c0 .138.112.25.25.25h12.5a.25.25 0 00.25-.25v-8.5a.25.25 0 00-.25-.25H1.75zM3.5 6.25a.75.75 0 01.75-.75h7a.75.75 0 010 1.5h-7a.75.75 0 01-.75-.75zm.75 2.25a.75.75 0 000 1.5h4a.75.75 0 000-1.5h-4z"></path></svg>
|
||||
</div>
|
||||
<div class="nav-item nav-selector">
|
||||
<svg id="language-selector" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M1.543 7.25h2.733c.144-2.074.866-3.756 1.58-4.948.12-.197.237-.381.353-.552a6.506 6.506 0 00-4.666 5.5zm2.733 1.5H1.543a6.506 6.506 0 004.666 5.5 11.13 11.13 0 01-.352-.552c-.715-1.192-1.437-2.874-1.581-4.948zm1.504 0h4.44a9.637 9.637 0 01-1.363 4.177c-.306.51-.612.919-.857 1.215a9.978 9.978 0 01-.857-1.215A9.637 9.637 0 015.78 8.75zm4.44-1.5H5.78a9.637 9.637 0 011.363-4.177c.306-.51.612-.919.857-1.215.245.296.55.705.857 1.215A9.638 9.638 0 0110.22 7.25zm1.504 1.5c-.144 2.074-.866 3.756-1.58 4.948-.12.197-.237.381-.353.552a6.506 6.506 0 004.666-5.5h-2.733zm2.733-1.5h-2.733c-.144-2.074-.866-3.756-1.58-4.948a11.738 11.738 0 00-.353-.552 6.506 6.506 0 014.666 5.5zM8 0a8 8 0 100 16A8 8 0 008 0z"></path></svg>
|
||||
<div class="nav-selector-menu btn-group" id="language-selector-menu"></div>
|
||||
</div>
|
||||
<div id="theme-selector" class="nav-item">
|
||||
<div id="theme-selector" class="nav-item toggle">
|
||||
<svg id="theme-selection-light" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M8 10.5a2.5 2.5 0 100-5 2.5 2.5 0 000 5zM8 12a4 4 0 100-8 4 4 0 000 8zM8 0a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0V.75A.75.75 0 018 0zm0 13a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 018 13zM2.343 2.343a.75.75 0 011.061 0l1.06 1.061a.75.75 0 01-1.06 1.06l-1.06-1.06a.75.75 0 010-1.06zm9.193 9.193a.75.75 0 011.06 0l1.061 1.06a.75.75 0 01-1.06 1.061l-1.061-1.06a.75.75 0 010-1.061zM16 8a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0116 8zM3 8a.75.75 0 01-.75.75H.75a.75.75 0 010-1.5h1.5A.75.75 0 013 8zm10.657-5.657a.75.75 0 010 1.061l-1.061 1.06a.75.75 0 11-1.06-1.06l1.06-1.06a.75.75 0 011.06 0zm-9.193 9.193a.75.75 0 010 1.06l-1.06 1.061a.75.75 0 11-1.061-1.06l1.06-1.061a.75.75 0 011.061 0z"></path></svg>
|
||||
<svg id="theme-selection-dark" class="inactive" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"></path></svg>
|
||||
<svg id="theme-selection-dark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M9.598 1.591a.75.75 0 01.785-.175 7 7 0 11-8.967 8.967.75.75 0 01.961-.96 5.5 5.5 0 007.046-7.046.75.75 0 01.175-.786zm1.616 1.945a7 7 0 01-7.678 7.678 5.5 5.5 0 107.678-7.678z"></path></svg>
|
||||
</div>
|
||||
<div id="github-link" class="nav-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="24" height="24"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
|
||||
|
||||
@@ -10,7 +10,6 @@ body {
|
||||
}
|
||||
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
@@ -20,8 +19,7 @@ body {
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
height: 56px;
|
||||
border-bottom: 2px #ccc solid;
|
||||
color: #343a40
|
||||
border-bottom: 2px solid;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
@@ -45,36 +43,27 @@ body {
|
||||
.nav-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
fill: #343a40;
|
||||
cursor: pointer;
|
||||
margin: 0 16px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
fill: #565d64;
|
||||
}
|
||||
|
||||
.nav-item .inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-item span {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.nav-item#github-link {
|
||||
fill: #9fa2a7
|
||||
}
|
||||
|
||||
.nav-item#github-link:hover {
|
||||
fill: #bcbfc3
|
||||
}
|
||||
|
||||
.nav-item#source-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle:not(.toggled) svg:nth-child(1) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toggle.toggled svg:nth-child(2) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-selector {
|
||||
position: relative;
|
||||
}
|
||||
@@ -89,7 +78,6 @@ body {
|
||||
margin-top: 10px;
|
||||
z-index: 10;
|
||||
border-radius: 3px;
|
||||
background-color: #ffffff83;
|
||||
}
|
||||
|
||||
.content {
|
||||
@@ -118,10 +106,6 @@ body {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.source textarea::selection {
|
||||
background-color: rgba(103, 134, 221, 0.6);
|
||||
}
|
||||
|
||||
.source-controls {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
@@ -146,7 +130,7 @@ body {
|
||||
}
|
||||
|
||||
.gutter.gutter-horizontal {
|
||||
border-left: 2px solid #ccc;
|
||||
border-left: 2px solid;
|
||||
float: left;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
@@ -156,9 +140,6 @@ body {
|
||||
align-items: center;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
background-color: #1f2020a6;
|
||||
padding: 7px 11px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
@@ -166,24 +147,10 @@ body {
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.btn.check {
|
||||
fill: #a5e77a;
|
||||
color: #a5e77a;
|
||||
}
|
||||
|
||||
.btn.selected {
|
||||
fill: #a5e77a;
|
||||
color: #a5e77a;
|
||||
}
|
||||
|
||||
.btn svg:not(:last-child) {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #5d5f5fa6;
|
||||
}
|
||||
|
||||
.btn-group .btn:not(:last-child) {
|
||||
border-bottom-right-radius: 0px;
|
||||
border-bottom-left-radius: 0px;
|
||||
@@ -229,20 +196,19 @@ body {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.source.toggled {
|
||||
.source.active {
|
||||
display: initial;
|
||||
position: absolute;
|
||||
width: 100% !important;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.source.toggled .source-controls {
|
||||
.source.active .source-controls {
|
||||
right: 17px;
|
||||
top: 0px;
|
||||
}
|
||||
|
||||
.source.toggled .source-controls-menu {
|
||||
.source.active .source-controls-menu {
|
||||
right: 17px;
|
||||
top: 37px;
|
||||
}
|
||||
@@ -252,3 +218,114 @@ body {
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
||||
/* COLORS */
|
||||
|
||||
.container {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.header,
|
||||
.nav-item {
|
||||
fill: #343a40;
|
||||
color: #343a40;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
fill: #565d64;
|
||||
}
|
||||
|
||||
.nav-item#github-link {
|
||||
fill: #9fa2a7;
|
||||
}
|
||||
|
||||
.nav-item#github-link:hover {
|
||||
fill: #bcbfc3;
|
||||
}
|
||||
|
||||
.source textarea::selection {
|
||||
background-color: rgba(103, 134, 221, 0.6);
|
||||
}
|
||||
|
||||
.gutter.gutter-horizontal,
|
||||
.header {
|
||||
border-color: #cccccc;
|
||||
}
|
||||
|
||||
.nav-selector-menu {
|
||||
background-color: #ffffff83;
|
||||
}
|
||||
|
||||
.btn {
|
||||
background-color: #1f2020a6;
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
.btn.check,
|
||||
.btn.selected {
|
||||
fill: #a5e77a;
|
||||
color: #a5e77a;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background-color: #5d5f5fa6;
|
||||
}
|
||||
|
||||
/* DARK MODE */
|
||||
|
||||
body[data-style=dark] .container,
|
||||
body[data-style=dark] textarea {
|
||||
background-color: #222222;
|
||||
}
|
||||
|
||||
body[data-style=dark] textarea {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
body[data-style=dark] .header-title,
|
||||
body[data-style=dark] .nav-item {
|
||||
fill: #91908f;
|
||||
color: #91908f;
|
||||
}
|
||||
|
||||
body[data-style=dark] .nav-item:hover {
|
||||
fill: #b4b3b0;
|
||||
}
|
||||
|
||||
body[data-style=dark] .nav-item#github-link {
|
||||
fill: #4d4c4c;
|
||||
}
|
||||
|
||||
body[data-style=dark] .nav-item#github-link:hover {
|
||||
fill: #6e6e6e;
|
||||
}
|
||||
|
||||
body[data-style=dark] .source textarea::selection {
|
||||
background-color: rgba(103, 134, 221, 0.6);
|
||||
}
|
||||
|
||||
body[data-style=dark] .gutter.gutter-horizontal,
|
||||
body[data-style=dark] .header {
|
||||
border-color: #3d3d3d;
|
||||
}
|
||||
|
||||
body[data-style=dark] .nav-selector-menu {
|
||||
background-color: #00000083;
|
||||
}
|
||||
|
||||
body[data-style=dark] .btn {
|
||||
background-color: #0a0a0aa6;
|
||||
color: #ffffff;
|
||||
fill: #ffffff;
|
||||
}
|
||||
|
||||
body[data-style=dark] .btn.check,
|
||||
body[data-style=dark] .btn.selected {
|
||||
fill: #a5e77a;
|
||||
color: #a5e77a;
|
||||
}
|
||||
|
||||
body[data-style=dark] .btn:hover {
|
||||
background-color: #383838a6;
|
||||
}
|
||||
|
||||
@@ -58,7 +58,7 @@
|
||||
|
||||
.node-header > label,
|
||||
.node-header > button {
|
||||
padding: 0 3px;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.node-header > *:first-child {
|
||||
@@ -124,17 +124,13 @@ button.remove::before {
|
||||
background-color: #e4e4e4;
|
||||
}
|
||||
|
||||
.node-header > button.add {
|
||||
border-color: #54911b;
|
||||
background-color: #add38a;
|
||||
}
|
||||
|
||||
.node-header > button.selected {
|
||||
button.selected {
|
||||
background-color: #f0e65e;
|
||||
border-color: #b9a327
|
||||
}
|
||||
|
||||
.node-header > label.collapse.closed {
|
||||
.node-header > label.collapse.closed,
|
||||
button.add {
|
||||
border-color: #54911b;
|
||||
background-color: #add38a;
|
||||
}
|
||||
@@ -156,3 +152,50 @@ button.remove {
|
||||
.object-node > .node-body {
|
||||
border-color: #b9b9b9;
|
||||
}
|
||||
|
||||
/* DARK MODE */
|
||||
|
||||
body[data-style=dark] .node-header > * {
|
||||
border-color: #4e4e4e;
|
||||
}
|
||||
|
||||
body[data-style=dark] .node-header > label {
|
||||
background-color: #1b1b1b;
|
||||
color: #dadada;
|
||||
}
|
||||
|
||||
body[data-style=dark] .node-header > input,
|
||||
body[data-style=dark] .node-header > select,
|
||||
body[data-style=dark] .node-header > button {
|
||||
background-color: #272727;
|
||||
color: #dadada;
|
||||
}
|
||||
|
||||
body[data-style=dark] button.selected {
|
||||
background-color: #726d28;
|
||||
border-color: #867e0e
|
||||
}
|
||||
|
||||
body[data-style=dark] .node-header > label.collapse.closed,
|
||||
body[data-style=dark] button.add {
|
||||
border-color: #3b6e0c;
|
||||
background-color: #688f40;
|
||||
}
|
||||
|
||||
body[data-style=dark] .node-header > label.collapse.open,
|
||||
body[data-style=dark] button.remove {
|
||||
border-color: #7e1d05;
|
||||
background-color: #ad472d;
|
||||
}
|
||||
|
||||
.list-node > .node-body {
|
||||
border-color: #72a543;
|
||||
}
|
||||
|
||||
body[data-style=dark] .map-node > .node-body {
|
||||
border-color: #4d99cc;
|
||||
}
|
||||
|
||||
body[data-style=dark] .object-node > .node-body {
|
||||
border-color: #8a8a8a;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user