Theme selection and dark background

This commit is contained in:
Misode
2019-12-20 18:57:05 +01:00
parent 98fcf5c1fd
commit 828af07a8a
3 changed files with 25 additions and 2 deletions

View File

@@ -70,3 +70,13 @@ textarea.invalid:focus {
overflow-wrap: normal;
overflow-x: scroll;
}
body[data-style="dark"] {
background-color: #222529;
}
body[data-style="dark"] #source {
background-color: #181a1d;
border-color: #646b72;
color: #eee;
}

View File

@@ -15,7 +15,7 @@
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="custom.css">
</head>
<body>
<body data-style="light">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<span id="descriptionSpan" class="navbar-brand mb-0 h1" data-i18n="description.loot-table"></span>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
@@ -32,11 +32,20 @@
</div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" role="button" data-toggle="dropdown">
<a class="nav-link dropdown-toggle mr-2" href="" role="button" data-toggle="dropdown">
🌎 Language
</a>
<div id="lngList" class="dropdown-menu"></div>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="" role="button" data-toggle="dropdown">
Theme
</a>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="changeTheme('light')">Light</a>
<a class="dropdown-item" onclick="changeTheme('dark')">Dark</a>
</div>
</li>
</ul>
<span class="ml-0 ml-md-2"><a href="https://github.com/misode/loot-table" style="color: #ddd;" data-i18n="author"></a></span>
</div>

View File

@@ -32,6 +32,10 @@ function changeVersion(version) {
});
}
function changeTheme(theme) {
$('body').attr('data-style', theme);
}
function updateView() {
if (structure) {
let {out: sourceOut, component: $component} = generateSourceAndView(table, structure);