mirror of
https://github.com/luau-lang/luau.git
synced 2024-11-15 14:25:44 +08:00
Add dark theme (#991)
Fixes #333   --------- Co-authored-by: Someone-dQw4w9WgXcQ <dcheunggb@outlook.com>
This commit is contained in:
Someon1e
GitHub
parent
a08c3409b8
commit
8b510d3dbb
@ -1,5 +1,6 @@
|
||||
remote_theme: "mmistakes/minimal-mistakes@4.22.0"
|
||||
remote_theme: "mmistakes/minimal-mistakes@4.24.0"
|
||||
minimal_mistakes_skin: "default" #"air", "aqua", "contrast", "dark", "dirt", "neon", "mint", "plum" "sunrise"
|
||||
minimal_mistakes_skin2: "dark"
|
||||
url:
|
||||
name: Roblox
|
||||
title: Luau
|
||||
|
||||
73
docs/_includes/masthead.html
Normal file
73
docs/_includes/masthead.html
Normal file
@ -0,0 +1,73 @@
|
||||
{% capture logo_path %}{{ site.logo }}{% endcapture %}
|
||||
|
||||
<div class="masthead">
|
||||
<div class="masthead__inner-wrap">
|
||||
<div class="masthead__menu">
|
||||
<nav id="site-nav" class="greedy-nav">
|
||||
{% unless logo_path == empty %}
|
||||
<a class="site-logo" href="{{ '/' | relative_url }}"><img src="{{ logo_path | relative_url }}"
|
||||
alt="{{ site.masthead_title | default: site.title }}"></a>
|
||||
{% endunless %}
|
||||
<a class="site-title" href="{{ '/' | relative_url }}">
|
||||
{{ site.masthead_title | default: site.title }}
|
||||
{% if site.subtitle %}<span class="site-subtitle">{{ site.subtitle }}</span>{% endif %}
|
||||
</a>
|
||||
<ul class="visible-links">
|
||||
{%- for link in site.data.navigation.main -%}
|
||||
<li class="masthead__menu-item">
|
||||
<a href="{{ link.url | relative_url }}" {% if link.description %} title="{{ link.description }}"
|
||||
{% endif %}>{{ link.title }}</a>
|
||||
</li>
|
||||
{%- endfor -%}
|
||||
</ul>
|
||||
<i class="fas fa-fw fa-adjust" aria-hidden="true" onclick="toggleTheme()"></i>
|
||||
{% if site.search == true %}
|
||||
<button class="search__toggle" type="button">
|
||||
<span class="visually-hidden">{{ site.data.ui-text[site.locale].search_label | default: "Toggle
|
||||
search" }}</span>
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
<button class="greedy-nav__toggle hidden" type="button">
|
||||
<span class="visually-hidden">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle menu"
|
||||
}}</span>
|
||||
<div class="navicon"></div>
|
||||
</button>
|
||||
<ul class="hidden-links hidden"></ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<link rel="stylesheet" href="{{ '/assets/css/main.css' | relative_url }}" id="theme_source">
|
||||
<link rel="stylesheet alternate" href="{{ '/assets/css/theme2.css' | relative_url }}" id="theme_source_2">
|
||||
|
||||
<script>
|
||||
let theme = localStorage.getItem('theme');
|
||||
if (theme === "dark") {
|
||||
localStorage.setItem('theme', 'dark');
|
||||
node1 = document.getElementById('theme_source');
|
||||
node2 = document.getElementById('theme_source_2');
|
||||
node1.setAttribute('rel', 'stylesheet alternate');
|
||||
node2.setAttribute('rel', 'stylesheet');
|
||||
} else {
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
|
||||
function toggleTheme() {
|
||||
node1 = document.getElementById("theme_source");
|
||||
node2 = document.getElementById("theme_source_2");
|
||||
if (node1.getAttribute("rel") == "stylesheet") {
|
||||
node1.setAttribute("rel", "stylesheet alternate");
|
||||
node2.setAttribute("rel", "stylesheet");
|
||||
try { editor.setOption("theme", "dark") } catch { };
|
||||
localStorage.setItem("theme", "dark");
|
||||
} else {
|
||||
node2.setAttribute("rel", "stylesheet alternate");
|
||||
node1.setAttribute("rel", "stylesheet");
|
||||
try { editor.setOption("theme", "light") } catch { };
|
||||
localStorage.setItem("theme", "light");
|
||||
}
|
||||
return false;
|
||||
}
|
||||
</script>
|
||||
@ -2,11 +2,11 @@
|
||||
<div>
|
||||
<label class="header-center"><b>Input</b></label>
|
||||
<br>
|
||||
<textarea rows="10" cols="70" id="script"></textarea>
|
||||
<textarea rows="10" cols="80" id="script"></textarea>
|
||||
<div class="button-group">
|
||||
<button onclick="executeScript(); return false;" class="demo-button">Run</button>
|
||||
<input type="checkbox" checked="true" class="demo-button" id="output-clear" />
|
||||
<label for="output-clear">Clear Output</label>
|
||||
<input type="checkbox" checked="true" id="output-clear" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@ -26,31 +26,81 @@
|
||||
padding: 7px 7px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.line-error {
|
||||
background: #e65f55;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- CodeMirror -->
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/addon/edit/matchbrackets.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/addon/edit/matchbrackets.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.14/codemirror.min.css" />
|
||||
|
||||
|
||||
<style>
|
||||
.cm-s-dark.CodeMirror {background: rgb(37, 37, 37); color: rgb(204, 204, 204);}
|
||||
.cm-s-dark div.CodeMirror-selected {background: rgb(11, 90, 175) !important;}
|
||||
.cm-s-dark .CodeMirror-gutters {background: rgb(50, 50, 50); border-right: 0px;}
|
||||
.cm-s-dark .CodeMirror-linenumber {color: rgb(204, 204, 204);}
|
||||
.cm-s-dark .CodeMirror-cursor {border-left: 1px solid rgb(204, 204, 204) !important;}
|
||||
|
||||
.cm-s-dark span.cm-comment {color: rgb(102, 102, 102);}
|
||||
.cm-s-dark span.cm-atom {color: rgb(255, 198, 0);}
|
||||
.cm-s-dark span.cm-number {color: rgb(255, 198, 0);}
|
||||
|
||||
.cm-s-dark span.cm-keyword {color: rgb(248, 109, 124);}
|
||||
.cm-s-dark span.cm-string {color: rgb(173, 241, 149);}
|
||||
|
||||
.cm-s-dark span.cm-variable {color: rgb(204, 204, 204);}
|
||||
.cm-s-dark span.cm-builtin {color:rgb(132, 214, 247);}
|
||||
.cm-s-dark span.cm-bracket {color: rgb(204, 204, 204);}
|
||||
.cm-s-dark span.cm-tag {color: rgb(255, 0, 0);}
|
||||
|
||||
.cm-s-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important;}
|
||||
.cm-s-dark .CodeMirror-activeline-background { background: #202020; }
|
||||
</style>
|
||||
|
||||
<style>
|
||||
.cm-s-light.CodeMirror {background: white; color: black;}
|
||||
.cm-s-light div.CodeMirror-selected {background: rgb(110, 161, 241) !important;}
|
||||
.cm-s-light .CodeMirror-gutters {background: rgb(221, 221, 221); border-right: 0px;}
|
||||
.cm-s-light .CodeMirror-linenumber {color: black;}
|
||||
.cm-s-light .CodeMirror-cursor {border-left: 1px solid black !important;}
|
||||
|
||||
.cm-s-light span.cm-comment {color: rgb(0, 127, 9);}
|
||||
.cm-s-light span.cm-atom {color: rgb(0, 127, 127);}
|
||||
.cm-s-light span.cm-number {color: rgb(0, 127, 127);}
|
||||
|
||||
.cm-s-light span.cm-keyword {color: rgb(0, 0, 127);}
|
||||
.cm-s-light span.cm-string {color: rgb(127, 0, 127);}
|
||||
|
||||
.cm-s-light span.cm-variable {color: black;}
|
||||
.cm-s-light span.cm-builtin {color:rgb(127, 0, 0);}
|
||||
.cm-s-light span.cm-bracket {color: rgb(127, 127, 0);}
|
||||
.cm-s-light span.cm-tag {color: rgb(255, 0, 0);}
|
||||
|
||||
.cm-s-light .CodeMirror-matchingbracket { text-decoration: underline; color: black !important;}
|
||||
.cm-s-light .CodeMirror-activeline-background { background: #202020; }
|
||||
</style>
|
||||
|
||||
<!-- Luau Parser for CodeMirror -->
|
||||
<script src="assets/js/luau_mode.js"></script>
|
||||
<!-- CodeMirror Luau Editor (MUST BE LOADED AFTER CODEMIRROR!) -->
|
||||
<script>
|
||||
|
||||
var editor = CodeMirror.fromTextArea(document.getElementById("script"), {
|
||||
theme: "default",
|
||||
theme: localStorage.getItem('theme'),
|
||||
mode: "luau",
|
||||
matchBrackets: true,
|
||||
lineNumbers: true,
|
||||
smartIndent: true,
|
||||
indentWithTabs: true,
|
||||
indentUnit: 4,
|
||||
indentUnit: 4
|
||||
});
|
||||
editor.setValue("print(\"Hello World!\")\n");
|
||||
editor.addKeyMap({
|
||||
"Ctrl-Enter": function(cm) {
|
||||
editor.addKeyMap({
|
||||
"Ctrl-Enter": function (cm) {
|
||||
executeScript();
|
||||
},
|
||||
"Shift-Tab": function (cm) {
|
||||
@ -91,10 +141,11 @@
|
||||
|
||||
var err_line = parseInt(err_text);
|
||||
if (err_line) {
|
||||
lastError = editor.addLineClass(err_line-1, "background", "line-error");
|
||||
lastError = editor.addLineClass(err_line - 1, "background", "line-error");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
<!-- Luau WASM (async fetch; should be the last line) -->
|
||||
<script async src="https://github.com/Roblox/luau/releases/latest/download/Luau.Web.js"></script>
|
||||
8
docs/assets/css/theme2.scss
Normal file
8
docs/assets/css/theme2.scss
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
@charset "utf-8";
|
||||
|
||||
@import "minimal-mistakes/skins/{{ site.minimal_mistakes_skin2 | default: 'default' }}"; // skin
|
||||
@import "minimal-mistakes"; // main partials
|
||||
Loading…
Reference in New Issue
Block a user