mirror of
https://github.com/compiler-explorer/compiler-explorer.git
synced 2025-12-27 09:23:52 -05:00
Add one dark theme (#6324)
Adds a new theme based on the One Dark theme from the Atom text editor. Adds a new line highlighting theme "Soft Dark Rainbow" that works better with the One Dark theme.
This commit is contained in:
Matthew Guidry
@@ -145,3 +145,4 @@ From oldest to newest contributor, we would like to thank:
|
||||
- [Julian van Doorn](https://github.com/JulianvDoorn)
|
||||
- [Andrea Tomasi](https://github.com/treere)
|
||||
- [Khyber Sen](https://github.com/kkysen)
|
||||
- [Matthew Guidry](https://github.com/mguid65)
|
||||
|
||||
@@ -25,7 +25,15 @@
|
||||
import * as monaco from 'monaco-editor';
|
||||
import {Themes} from './themes.js';
|
||||
|
||||
export type ColourScheme = 'rainbow' | 'rainbow2' | 'earth' | 'green-blue' | 'gray-shade' | 'rainbow-dark' | 'pink';
|
||||
export type ColourScheme =
|
||||
| 'rainbow'
|
||||
| 'rainbow2'
|
||||
| 'earth'
|
||||
| 'green-blue'
|
||||
| 'gray-shade'
|
||||
| 'rainbow-dark'
|
||||
| 'soft-rainbow-dark'
|
||||
| 'pink';
|
||||
|
||||
export type AppTheme = Themes | 'all';
|
||||
|
||||
@@ -56,13 +64,19 @@ export const schemes: ColourSchemeInfo[] = [
|
||||
name: 'gray-shade',
|
||||
desc: 'Gray shades',
|
||||
count: 4,
|
||||
themes: ['dark', 'darkplus', 'real-dark'],
|
||||
themes: ['dark', 'darkplus', 'real-dark', 'onedark'],
|
||||
},
|
||||
{
|
||||
name: 'rainbow-dark',
|
||||
desc: 'Dark Rainbow',
|
||||
count: 12,
|
||||
themes: ['dark', 'darkplus', 'real-dark'],
|
||||
themes: ['dark', 'darkplus', 'real-dark', 'onedark'],
|
||||
},
|
||||
{
|
||||
name: 'soft-rainbow-dark',
|
||||
desc: 'Soft Dark Rainbow',
|
||||
count: 11,
|
||||
themes: ['dark', 'darkplus', 'real-dark', 'onedark'],
|
||||
},
|
||||
{
|
||||
name: 'pink',
|
||||
|
||||
@@ -219,6 +219,51 @@
|
||||
background: rgba(105, 94, 7, 0.35);
|
||||
}
|
||||
|
||||
/*soft rainbow dark*/
|
||||
.soft-rainbow-dark-0 {
|
||||
background: rgba(79, 140, 135, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-1 {
|
||||
background: rgba(160, 160, 49, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-2 {
|
||||
background: rgba(80, 80, 183, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-3 {
|
||||
background: rgba(162, 50, 24, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-4 {
|
||||
background: rgba(51, 122, 173, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-5 {
|
||||
background: rgba(186, 136, 23, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-6 {
|
||||
background: rgba(125, 178, 70, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-7 {
|
||||
background: rgba(165, 60, 109, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-8 {
|
||||
background: rgba(125, 88, 88, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-9 {
|
||||
background: rgba(120, 42, 151, 0.15);
|
||||
}
|
||||
|
||||
.soft-rainbow-dark-10 {
|
||||
background: rgba(47, 120, 35, 0.15);
|
||||
}
|
||||
|
||||
/* Gray shades */
|
||||
/*@for $i from 0 through 4 {
|
||||
.pink- hashtag {$i} {
|
||||
|
||||
@@ -1145,6 +1145,14 @@ html[data-theme='pink'] {
|
||||
}
|
||||
}
|
||||
|
||||
html[data-theme='one-dark'] {
|
||||
@import 'themes/one-dark-theme';
|
||||
background-color: $light !important;
|
||||
.theme-dark-only {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.socialsharing {
|
||||
max-width: 250px;
|
||||
}
|
||||
|
||||
247
static/styles/themes/custom-golden-layout-themes/one-dark.scss
Normal file
247
static/styles/themes/custom-golden-layout-themes/one-dark.scss
Normal file
@@ -0,0 +1,247 @@
|
||||
// based on pink.scss
|
||||
|
||||
$lightest: #444b53;
|
||||
$lighter: #3d424d;
|
||||
$light: #2c313c;
|
||||
$base: #282c34;
|
||||
$dark: #21252b;
|
||||
$darker: #1e1f22;
|
||||
|
||||
// Color variables (appears count calculates by raw css)
|
||||
$color0: $dark; // Appears 7 times
|
||||
$color1: $base; // Appears 3 times
|
||||
$color2: #e06c75; // Appears 2 times
|
||||
$color3: #98c379; // Appears 2 times
|
||||
|
||||
$color4: #d19a66; // Appears 1 time
|
||||
$color5: #61afef; // Appears 1 time
|
||||
$color6: #c678dd; // Appears 1 time
|
||||
$color7: #56b6c2; // Appears 1 time
|
||||
$color8: #abb2bf; // Appears 1 time
|
||||
$color9: #5c6370; // Appears 1 time
|
||||
$color10: #e06c75; // Appears 2 time
|
||||
|
||||
// ".lm_dragging" is applied to BODY tag during Drag and is also directly applied to the root of the object being dragged
|
||||
|
||||
// Entire GoldenLayout Container, if a background is set, it is visible as color of "pane header" and "splitters" (if these latest has opacity very low)
|
||||
.lm_goldenlayout {
|
||||
background: $color0;
|
||||
}
|
||||
|
||||
// Single Pane content (area in which final dragged content is contained)
|
||||
.lm_content {
|
||||
background: $light;
|
||||
}
|
||||
|
||||
// Single Pane content during Drag (style of moving window following mouse)
|
||||
.lm_dragProxy {
|
||||
.lm_content {
|
||||
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
// Placeholder Container of target position
|
||||
.lm_dropTargetIndicator {
|
||||
box-shadow: inset 0 0 30px $color0;
|
||||
outline: 1px dashed $color4;
|
||||
transition: all 200ms ease;
|
||||
|
||||
// Inner Placeholder
|
||||
.lm_inner {
|
||||
background: $color0;
|
||||
opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
// Separator line (handle to change pane size)
|
||||
.lm_splitter {
|
||||
background: $color9;
|
||||
opacity: 0.001;
|
||||
transition: opacity 200ms ease;
|
||||
|
||||
&:hover, // When hovered by mouse...
|
||||
&.lm_dragging {
|
||||
background: $color8;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Pane Header (container of Tabs for each pane)
|
||||
.lm_header {
|
||||
border-top: 2px solid $dark !important;
|
||||
height: 30px !important;
|
||||
user-select: none;
|
||||
|
||||
&.lm_selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Single Tab container. A single Tab is set for each pane, a group of Tabs are contained in ".lm_header"
|
||||
.lm_tab {
|
||||
height: 26px !important;
|
||||
font-family: Arial, sans-serif;
|
||||
font-size: 12px;
|
||||
color: $color8;
|
||||
background: $base;
|
||||
margin-top: 0;
|
||||
margin-right: 0;
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
|
||||
.lm_title {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
// Close Tab Icon
|
||||
.lm_close_tab {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
top: 8px;
|
||||
right: 6px;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Modify Tab Icon
|
||||
.lm_modify_tab_title {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
top: 8px;
|
||||
opacity: 0.4;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
border-bottom: 3px solid $lighter;
|
||||
}
|
||||
|
||||
border-bottom: 3px solid $base;
|
||||
// If Tab is active, so if it's in foreground
|
||||
&.lm_active {
|
||||
border-bottom: 3px solid $color5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lm_dragProxy.lm_bottom,
|
||||
.lm_stack.lm_bottom {
|
||||
.lm_header .lm_tab {
|
||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
|
||||
&.lm_active {
|
||||
box-shadow: 0 2px 2px $color0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// If Pane Header (container of Tabs for each pane) is selected (used only if addition of new Contents is made "by selection" and not "by drag")
|
||||
.lm_selected {
|
||||
.lm_header {
|
||||
background-color: $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.lm_tab {
|
||||
&:hover, // If Tab is hovered
|
||||
&.lm_active // If Tab is active, so if it's in foreground
|
||||
{
|
||||
background: $lighter;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown arrow for additional tabs when too many to be displayed
|
||||
.lm_header .lm_controls .lm_tabdropdown:before {
|
||||
color: #f2f2f2;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
// Pane controls (popout, maximize, minimize, close)
|
||||
.lm_controls {
|
||||
// All Pane controls shares these
|
||||
> li {
|
||||
position: relative;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.4;
|
||||
transition: opacity 300ms ease;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon to PopOut Pane, so move it to a different Browser Window
|
||||
.lm_popout {
|
||||
top: 6px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAANUlEQVR4nI2QMQoAMAwCz5L/f9mOzZIaN0E9UDyZhaaQz6atgBHgambEJ5wBKoS0WaIvfT+6K2MIECN19MAAAAAASUVORK5CYII=);
|
||||
}
|
||||
|
||||
// Icon to Maximize Pane, so it will fill the entire GoldenLayout Container
|
||||
.lm_maximise {
|
||||
top: 6px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAIklEQVR4nGNkYGD4z0AAMBFSAAOETPpPlEmDUREjAxHhBABPvAQLFv3qngAAAABJRU5ErkJggg==);
|
||||
}
|
||||
|
||||
// Icon to Close Pane and so remove it from GoldenLayout Container
|
||||
.lm_close {
|
||||
top: 6px;
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKUlEQVR4nGNgYGD4z4Af/Mdg4FKASwCnDf8JKSBoAtEmEXQTQd8RDCcA6+4Q8OvIgasAAAAASUVORK5CYII=);
|
||||
}
|
||||
}
|
||||
|
||||
// If a specific Pane is maximized
|
||||
.lm_maximised {
|
||||
// Pane Header (container of Tabs for each pane) can have different style when is Maximized
|
||||
.lm_header {
|
||||
background-color: $color0;
|
||||
}
|
||||
|
||||
// Pane controls are different in Maximized Mode, especially the old Icon "Maximise" that now has a different meaning, so "Minimize" (even if CSS Class did not change)
|
||||
.lm_controls {
|
||||
.lm_maximise {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAJklEQVR4nGP8//8/AyHARFDFUFbEwsDAwMDIyIgzHP7//89IlEkApSkHEScJTKoAAAAASUVORK5CYII=);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lm_transition_indicator {
|
||||
background-color: $color0;
|
||||
border: 1px dashed $color9;
|
||||
}
|
||||
|
||||
// If a specific Pane is Popped Out, so move it to a different Browser Window, Icon to restore original position is:
|
||||
.lm_popin {
|
||||
cursor: pointer;
|
||||
|
||||
// Background of Icon
|
||||
.lm_bg {
|
||||
background: $color10;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
// Icon to Restore original position in Golden Layout Container
|
||||
.lm_icon {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAJCAYAAADpeqZqAAAAWklEQVR4nJWOyw3AIAxDHcQC7L8jbwT3AlJBfNp3SiI7dtRaLSlKKeoA1oEsKSQZCEluexw8Tm3ohk+E7bnOUHUGcNh+HwbBygw4AZ7FN/Lt84p0l+yTflV8AKQyLdcCRJi/AAAAAElFTkSuQmCC);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
border-left: 1px solid $color2;
|
||||
border-top: 1px solid $color2;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.lm_icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
714
static/styles/themes/one-dark-theme.scss
Normal file
714
static/styles/themes/one-dark-theme.scss
Normal file
@@ -0,0 +1,714 @@
|
||||
// based on pink-theme.scss
|
||||
@import 'custom-golden-layout-themes/one-dark';
|
||||
|
||||
$logo-primary: #67c52a;
|
||||
$logo-secondary: #999999;
|
||||
|
||||
$lightest: #444b53;
|
||||
$lighter: #3d424d;
|
||||
$light: #2c313c;
|
||||
$base: #282c34;
|
||||
$dark: #21252b;
|
||||
$darker: #1e1f22;
|
||||
|
||||
::-webkit-scrollbar {
|
||||
background: lighten(#333a42, 10%);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: lighten(#333a42, 20%);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #45bbe0 !important;
|
||||
|
||||
&.navbar-brand {
|
||||
img.logo {
|
||||
&.inverse {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
&.normal {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: $base !important;
|
||||
}
|
||||
|
||||
input {
|
||||
color: #eee !important;
|
||||
background-color: $lightest;
|
||||
border: 0 !important;
|
||||
|
||||
&:focus {
|
||||
color: #eee !important;
|
||||
background-color: $lightest;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
&.permalink {
|
||||
color: #eee !important;
|
||||
background-color: $lightest;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
kbd {
|
||||
border-color: #818181 !important;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: #f2f2f2 !important;
|
||||
|
||||
.content {
|
||||
background-color: #1e1e1e !important;
|
||||
|
||||
.compiling {
|
||||
background-color: #101010 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
select {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
textarea.form-control {
|
||||
color: #eee !important;
|
||||
background-color: $lighter;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
.argmenuitem {
|
||||
max-width: 250px;
|
||||
|
||||
span {
|
||||
&.argtitle {
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
overflow-x: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
&.argdescription {
|
||||
max-height: 150px;
|
||||
word-wrap: break-word;
|
||||
overflow-wrap: break-word;
|
||||
font-style: italic;
|
||||
font-size: smaller;
|
||||
display: block;
|
||||
white-space: normal;
|
||||
text-overflow: ellipsis;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-light {
|
||||
background-color: $base !important;
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
color: #aaa !important;
|
||||
background-color: $base !important;
|
||||
padding-bottom: 7px;
|
||||
&.bg-light {
|
||||
border-top: 1px solid $dark;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-light {
|
||||
color: #e2e2e2 !important;
|
||||
background-color: $base !important;
|
||||
border-color: $base !important;
|
||||
|
||||
&.active {
|
||||
background-color: $darker !important;
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($darker, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $lighter !important;
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&:disabled:hover {
|
||||
background-color: lighten($light, 5%) !important;
|
||||
color: #eee !important;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
background-color: $light !important;
|
||||
color: #f2f2f2 !important;
|
||||
border-color: $dark;
|
||||
}
|
||||
|
||||
.commit-entry {
|
||||
&:nth-child(odd) {
|
||||
background-color: $dark !important;
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
background-color: $light !important;
|
||||
}
|
||||
}
|
||||
|
||||
.community-advert {
|
||||
color: white;
|
||||
background: $light !important;
|
||||
border-color: #006400;
|
||||
|
||||
button {
|
||||
opacity: 1;
|
||||
color: #006400;
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.conformance-wrapper {
|
||||
background-color: #1e1e1e !important;
|
||||
|
||||
.compiler-list .form-row {
|
||||
border-bottom: 1px solid #3e3e3e;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-link-btn:hover {
|
||||
background-color: $dark !important;
|
||||
}
|
||||
|
||||
.cppi-logo-sec {
|
||||
fill: #e2e2e2 !important;
|
||||
}
|
||||
|
||||
.currentCursorPosition {
|
||||
color: white;
|
||||
background-color: opacify($dark, 0.8);
|
||||
}
|
||||
|
||||
.custom-select {
|
||||
background-color: #76a1c8 !important;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
color: #eee !important;
|
||||
background-color: $base;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
background-color: $dark !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
color: #f2f2f2 !important;
|
||||
background-color: $base !important;
|
||||
}
|
||||
|
||||
.err-count {
|
||||
color: #e5c07b !important;
|
||||
}
|
||||
|
||||
.execution-stdout {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.fa,
|
||||
.fas {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.qb-logo-pri {
|
||||
fill: #3b3c3e !important;
|
||||
}
|
||||
|
||||
.qb-logo-sec {
|
||||
fill: #e2e2e2 !important;
|
||||
}
|
||||
|
||||
.float-link {
|
||||
color: #eee !important;
|
||||
background-color: rgba(128, 128, 128, 0.5) !important;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(128, 128, 160, 0.5) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.flow-decoration {
|
||||
background-color: #b4131f !important;
|
||||
color: white !important;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.flow-highlight {
|
||||
background-color: rgba(180, 19, 31, 0.4) !important;
|
||||
}
|
||||
|
||||
.form-control:disabled {
|
||||
background-color: darken(#474747, 10%);
|
||||
}
|
||||
|
||||
.graph-container {
|
||||
background: $dark;
|
||||
.cfg-info {
|
||||
color: #aaa;
|
||||
}
|
||||
.graph .block-container .block {
|
||||
background: $light;
|
||||
border: 1px solid white;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group-text {
|
||||
background-color: #a1a1a1 !important;
|
||||
border-color: $dark !important;
|
||||
}
|
||||
|
||||
.logo-pri {
|
||||
fill: $logo-primary !important;
|
||||
}
|
||||
|
||||
.logo-sec {
|
||||
fill: $logo-secondary !important;
|
||||
}
|
||||
|
||||
#library-selection {
|
||||
.libs-selected-col button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.libs-favorites-col button {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.libs-results-col .lib-fav-button {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
|
||||
#v-status {
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
.lib-item {
|
||||
background-color: #333 !important;
|
||||
}
|
||||
|
||||
.linked-code-decoration {
|
||||
background: #555657 !important;
|
||||
}
|
||||
|
||||
.linked-code-decoration-inline {
|
||||
background: #444444;
|
||||
}
|
||||
|
||||
.linked-code-decoration-line {
|
||||
background: lighten($lighter, 5%) !important;
|
||||
}
|
||||
|
||||
.linked-code-decoration-margin {
|
||||
background: $light !important;
|
||||
}
|
||||
|
||||
.linked-compiler-output-line {
|
||||
color: #007bfd !important;
|
||||
}
|
||||
|
||||
.linked-code-decoration-column {
|
||||
font-weight: 600;
|
||||
color: #44ab40 !important;
|
||||
}
|
||||
|
||||
.lm_controls {
|
||||
.lm_maximise {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M0 4.5V0h9v9H0zM8 5V2H1v6h7z'/%3E%3C/svg%3E") !important;
|
||||
background-size: 9px !important;
|
||||
}
|
||||
|
||||
.lm_close {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M.45713 8.5429l-.44426-.44438 3.5955-3.5956L.00697.90152l.8944-.89463 3.6016 3.6015 3.6014-3.6015.88867.88867-3.6014 3.6015 3.6014 3.6015-.89449.89449-3.6015-3.6014-3.5957 3.5956z'/%3E%3C/svg%3E") !important;
|
||||
background-size: 9px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.lm_header {
|
||||
background-color: $dark !important;
|
||||
|
||||
.lm_tab {
|
||||
/*
|
||||
* replace low res golden-layout icons with svg recreations to improve high DPI displays
|
||||
* not all icons in golden-layout are used, so we don't replace all of them
|
||||
*/
|
||||
.lm_close_tab {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M.45713 8.5429l-.44426-.44438 3.5955-3.5956L.00697.90152l.8944-.89463 3.6016 3.6015 3.6014-3.6015.88867.88867-3.6014 3.6015 3.6014 3.6015-.89449.89449-3.6015-3.6014-3.5957 3.5956z'/%3E%3C/svg%3E") !important;
|
||||
background-size: 9px !important;
|
||||
}
|
||||
|
||||
.lm_modify_tab_title {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' class='bi bi-pencil' viewBox='0 0 16 16'%3E%3Cpath d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168l10-10zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207 11.207 2.5zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293l6.5-6.5zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325z'/%3E%3C/svg%3E") !important;
|
||||
background-size: 9px !important;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 23px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lm_maximised .lm_controls .lm_maximise {
|
||||
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill='%23fff' d='M1.0096 8.0019v-.99809h6.9807v1.9962H1.0096z'/%3E%3C/svg%3E") !important;
|
||||
background-size: 9px !important;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background-color: $base !important;
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
.well {
|
||||
background-color: $base !important;
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
.card-body {
|
||||
background-color: $base !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
background-color: $base !important;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: #eee !important;
|
||||
background-color: $base !important;
|
||||
|
||||
.close {
|
||||
color: #eee;
|
||||
}
|
||||
}
|
||||
|
||||
.nav.nav-tabs {
|
||||
li {
|
||||
a {
|
||||
color: #eee !important;
|
||||
background-color: $base !important;
|
||||
}
|
||||
}
|
||||
|
||||
li:not(.active) {
|
||||
a {
|
||||
border-bottom: 1px solid #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
a {
|
||||
background-color: #666 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-light {
|
||||
background-color: $base !important;
|
||||
|
||||
.navbar-nav li {
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
background-color: $dark !important;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff !important;
|
||||
|
||||
&:hover {
|
||||
color: #fff !important;
|
||||
background-color: $dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a.nav-link {
|
||||
border: rgb(140, 140, 140) 1px solid;
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.new-cookie-msg {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.notification {
|
||||
background-color: gray !important;
|
||||
}
|
||||
|
||||
.notification-error {
|
||||
background-color: #aa3333 !important;
|
||||
color: #fff;
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-info {
|
||||
background-color: #676767 !important;
|
||||
color: #f2f2f2;
|
||||
}
|
||||
|
||||
.notification-off {
|
||||
background-color: #222 !important;
|
||||
color: #fff;
|
||||
|
||||
.close {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.notification-on {
|
||||
background-color: #33aa33 !important;
|
||||
color: black;
|
||||
}
|
||||
|
||||
.opt-decoration {
|
||||
&.analysis,
|
||||
&.mixed {
|
||||
background: #fdfd96 !important;
|
||||
}
|
||||
|
||||
&.passed {
|
||||
background: #77dd77 !important;
|
||||
}
|
||||
|
||||
&.missed {
|
||||
background: #ff6961 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.popover,
|
||||
.popover-content,
|
||||
.libs-container,
|
||||
.lib-list,
|
||||
.popover-body,
|
||||
.popover-header {
|
||||
background-color: $base !important;
|
||||
color: #f2f2f2 !important;
|
||||
}
|
||||
|
||||
.popular-arguments-btn {
|
||||
border-color: #474747 !important;
|
||||
}
|
||||
|
||||
.popover .arrow::after,
|
||||
.popover .arrow::before {
|
||||
border-left-color: #151515 !important;
|
||||
border-right-color: #151515 !important;
|
||||
}
|
||||
|
||||
.popover {
|
||||
border-color: $light !important;
|
||||
}
|
||||
|
||||
.prepend-options {
|
||||
border-color: $light !important;
|
||||
background-color: $base !important;
|
||||
}
|
||||
|
||||
.picker-popout-button {
|
||||
border: none !important;
|
||||
background: $light !important;
|
||||
&:hover {
|
||||
background: darken($light, 5%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.qb-logo-pri {
|
||||
fill: #e2e2e2 !important;
|
||||
}
|
||||
|
||||
.qb-logo-sec {
|
||||
fill: #333 !important;
|
||||
}
|
||||
|
||||
.rainbow-decoration {
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-image: linear-gradient(
|
||||
60deg,
|
||||
#ed4242 0,
|
||||
#ffaa44 20%,
|
||||
#fff344 40%,
|
||||
#43a35b 60%,
|
||||
#447cff 80%,
|
||||
#9c44a9 100%
|
||||
);
|
||||
}
|
||||
|
||||
#renamepanemodal .modal-body {
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
.share-disabled {
|
||||
color: #333 !important;
|
||||
}
|
||||
|
||||
.share-reddit {
|
||||
background-color: #ff4500 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.share-twitter {
|
||||
background-color: #1da1f2 !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
#simplecook {
|
||||
background-color: #474747 !important;
|
||||
}
|
||||
|
||||
.text-count {
|
||||
color: green !important;
|
||||
}
|
||||
|
||||
.top-bar.btn-toolbar.bg-light {
|
||||
border-top: 2px solid $dark !important;
|
||||
border-bottom: 2px solid $dark !important;
|
||||
}
|
||||
|
||||
.tree {
|
||||
ul,
|
||||
li {
|
||||
background-color: $dark !important;
|
||||
color: white;
|
||||
}
|
||||
|
||||
li.tree-editor-file {
|
||||
background-color: $dark !important;
|
||||
color: white;
|
||||
|
||||
&:hover {
|
||||
background-color: lighten($base, 5%) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ts-dropdown {
|
||||
color: #f2f2f2 !important;
|
||||
background-color: $base !important;
|
||||
margin: 0 !important;
|
||||
|
||||
.option:hover {
|
||||
background-color: $lighter;
|
||||
color: #eee !important;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: $lightest !important;
|
||||
color: #dddddd !important;
|
||||
}
|
||||
|
||||
.selected {
|
||||
background-color: #405f9d !important;
|
||||
color: #dddddd !important;
|
||||
}
|
||||
|
||||
.optgroup-header {
|
||||
background: $base;
|
||||
color: #eee !important;
|
||||
text-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ts-wrapper.single {
|
||||
.ts-control {
|
||||
border: none;
|
||||
color: #f2f2f2 !important;
|
||||
background: $light !important;
|
||||
text-shadow: none !important;
|
||||
|
||||
&:after {
|
||||
border-color: #525252 transparent transparent transparent;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #f2f2f2 !important;
|
||||
background-color: $light !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#compiler-picker-modal {
|
||||
.architecture,
|
||||
.compiler-type {
|
||||
background: $base;
|
||||
&.active {
|
||||
background: #007bff;
|
||||
}
|
||||
}
|
||||
|
||||
.compilers-col .group-wrapper .group {
|
||||
.label {
|
||||
background: $base;
|
||||
}
|
||||
.compiler {
|
||||
&:hover {
|
||||
background: $light;
|
||||
}
|
||||
&.selected {
|
||||
background-color: #405f9d !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#alert {
|
||||
&.error-alert {
|
||||
.modal-content {
|
||||
border: 4px solid #f43636;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.compiler-arg-warning-icon {
|
||||
color: #ffbf3f !important;
|
||||
}
|
||||
|
||||
.compiler-arg-warning {
|
||||
border-color: #ffbf3f;
|
||||
&:before {
|
||||
border-color: #ffbf3f;
|
||||
background: #ffbf3f;
|
||||
}
|
||||
&.info {
|
||||
border-color: #3f92ff;
|
||||
&:before {
|
||||
border-color: #3f92ff;
|
||||
background: #3f92ff;
|
||||
content: '\f05a';
|
||||
color: rgb(20, 21, 22);
|
||||
}
|
||||
}
|
||||
}
|
||||
134
static/themes.ts
134
static/themes.ts
@@ -29,7 +29,7 @@ import GoldenLayout from 'golden-layout';
|
||||
import {isString} from '../shared/common-utils.js';
|
||||
import {options} from './options.js';
|
||||
|
||||
export type Themes = 'default' | 'dark' | 'darkplus' | 'pink' | 'real-dark' | 'system';
|
||||
export type Themes = 'default' | 'dark' | 'darkplus' | 'pink' | 'onedark' | 'real-dark' | 'system';
|
||||
|
||||
export type Theme = {
|
||||
path: string;
|
||||
@@ -75,6 +75,13 @@ export const themes: Record<Themes, Theme> = {
|
||||
mainColor: '#333333',
|
||||
monaco: 'ce-dark',
|
||||
},
|
||||
onedark: {
|
||||
path: 'one-dark',
|
||||
id: 'onedark',
|
||||
name: 'One Dark',
|
||||
mainColor: '#282c34',
|
||||
monaco: 'ce-one-dark',
|
||||
},
|
||||
system: {
|
||||
id: 'system',
|
||||
name: 'Same as system',
|
||||
@@ -409,6 +416,131 @@ editor.defineTheme('ce-pink', {
|
||||
},
|
||||
});
|
||||
|
||||
editor.defineTheme('ce-one-dark', {
|
||||
base: 'vs-dark',
|
||||
inherit: true,
|
||||
rules: [
|
||||
{
|
||||
token: 'identifier.definition.herb',
|
||||
foreground: '61afef',
|
||||
fontStyle: 'bold',
|
||||
},
|
||||
// General Identifiers
|
||||
{token: 'identifier.cpp', foreground: 'abb2bf'},
|
||||
// Annotations (includes items in attribute list)
|
||||
{token: 'annotation.cpp', foreground: 'abb2bf'},
|
||||
// Keywords
|
||||
{token: 'keyword.auto.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.break.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.case.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.catch.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.class.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.constexpr.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.continue.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.default.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.delete.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.do.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.else.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.enum.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.explicit.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.export.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.extern.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.final.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.for.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.friend.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.goto.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.if.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.inline.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.mutable.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.namespace.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.new.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.noexcept.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.operator.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.override.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.private.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.protected.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.public.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.return.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.static.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.struct.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.switch.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.template.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.thread_local.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.throw.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.try.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.typedef.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.typename.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.union.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.unsigned.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.using.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.virtual.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.while.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword._asm.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.and.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.and_eq.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.bitand.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.bitor.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.compl.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.concept.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.co_await.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.co_return.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.co_yield.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.export.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.import.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.module.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.not.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.not_eq.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.or.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.or_eq.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.requires.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.xor.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.xor_eq.cpp', foreground: 'c678dd'},
|
||||
// Function-like keywords
|
||||
{token: 'keyword.static-assert.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.alignof.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.typeid.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.static_cast.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.sizeof.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.reinterpret_cast.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.dynamic_cast.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.decltype.cpp', foreground: '282c34'},
|
||||
{token: 'keyword.asm.cpp', foreground: '282c34'},
|
||||
// Constants and Literals
|
||||
{token: 'keyword.true.cpp', foreground: 'e5c07b'},
|
||||
{token: 'keyword.false.cpp', foreground: 'e5c07b'},
|
||||
{token: 'keyword.nullptr.cpp', foreground: 'e5c07b'},
|
||||
{token: 'number.cpp', foreground: 'e5c07b'},
|
||||
{token: 'number.hex.cpp', foreground: 'e5c07b'},
|
||||
{token: 'number.float.cpp', foreground: 'e5c07b'},
|
||||
{token: 'number.octal.cpp', foreground: 'e5c07b'},
|
||||
{token: 'number.binary.cpp', foreground: 'e5c07b'},
|
||||
{token: 'string.cpp', foreground: '98c379'},
|
||||
// Other
|
||||
{token: 'keyword.this.cpp', foreground: 'e06c75'},
|
||||
{token: 'keyword.directive.include.cpp', foreground: 'c678dd'},
|
||||
{token: 'keyword.directive.include.begin.cpp', foreground: '98c379'},
|
||||
{token: 'keyword.directive.include.end.cpp', foreground: '98c379'},
|
||||
{token: 'entity.name.type.cpp', foreground: 'e5c07b'},
|
||||
{token: 'string.escape.cpp', foreground: '56b6c2'},
|
||||
{token: 'string.include.identifier.cpp', foreground: '98c379'},
|
||||
],
|
||||
colors: {
|
||||
'editor.background': '#282c34',
|
||||
'editor.foreground': '#abb2bf',
|
||||
// 'editor.lineHighlightBorder': '#e3a5e3',
|
||||
'editor.lineHighlightBackground': '#2c313c',
|
||||
'editor.wordHighlightBackground': '#484e5b',
|
||||
'editor.wordHighlightBorder': '#7f848e',
|
||||
'editor.wordHighlightStrongBackground': '#abb2bf26',
|
||||
'editor.wordHighlightStrongBorder': '#7f848e',
|
||||
'editorHoverWidget.background': '#21252b',
|
||||
'editorLineNumber.foreground': '#495162',
|
||||
'editor.selectionBackground': '#67769660',
|
||||
'editor.inactiveSelectionBackground': '#3a3f4b',
|
||||
'minimap.selectionHighlight': '#abb2bf',
|
||||
},
|
||||
});
|
||||
|
||||
export class Themer {
|
||||
private currentTheme: Theme | null = null;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user