---
title: LoTuX CTF Writeup Dark Theme
tags: Themes
description: LoTuX CTF Writeup Dark Theme Design By Curious
---

<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;700&display=swap');

.modal-body {
color: whitesmoke !important;
}

.ui-user-name {
color: whitesmoke;
}

.modal-content {
background-color: #000;
}

.modal-header {
background-color: #222;
border-bottom-color: #888;
}

button.ui-more-settings-menu-back {
background-color: #000 !important;
}

.navbar-left .navbar-button-icon:hover {
background-color: #333 !important;
}

.select2-container-multi .select2-choices {
background-color: #000;
}

div.note-permission-button, div.ui-publish-slide-options {
background-color: #000;
border: 1px solid #ddd;
color: #5d9bd1;
}

.select2-drop {
background-color: #000;
}

.select2-results .select2-no-results, .select2-results .select2-searching, .select2-results .select2-ajax-error, .select2-results .select2-selection-limit {
background-color: #333;
color: whitesmoke;
}

.bg-white {
background-color: #222;
}

.bg-\[\#FDFDFD\] {
background-color: #222;
}

.bg-gray-100 {
background-color: #222;
border: 1px solid #888;
}

.hover\:border-gray-600:hover {
border: 1px solid #bbb;
}

.bg-\[\#f3f3f3\] {
background-color: #333;
}

.text-zinc-500 {
color: whitesmoke;
}

.focus\:border-\[\#686868\]:focus {
border: 1px solid #888;
background-color: rgb(60, 60, 60);
}

.bg-\[\#b1b1b1\] {
background-color: rgb(30, 30, 30, 1);
border: 1px solid #888;
}

.btn.active.focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn:active:focus, .btn:focus {
outline: none;
}

.hover\:bg-\[\#e7e7e7\]:hover {
background-color: rgb(50, 50, 50, 1)
}

.text-gray-700 {
color: rgb(225, 225, 225, 1);
}

.ui-edit-area .ui-sync-toggle {
box-shadow: 0 0 2px #999;
}

html, body {
background-color: #000 !important;
color: whitesmoke;
font-family: 'Roboto Mono', monospace;
}

.navbar-default {
background-color: #000;
border-color: #666;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
color: #aaa;
}

.hover\:bg-gray-200:hover {
background-color: #333;
}

.navbar-right .ui-host-list.open .btn.ui-status.online {
background-color: #333;
}

.btn.active, .btn:active {
box-shadow: inset 0 3px 5px rgba(245, 245, 245, 0.125);
}

.ui-notification .notification-menu-item:hover, .ui-notification .notification-menu-item:focus {
background-color: #333;
}

.ui-edit-area .ui-resizable-handle.ui-resizable-e {
background: linear-gradient(to right, #1e2126, #000);
box-shadow: none;
}

.btn-default {
color: whitesmoke;
background-color: #111;
border-color: #666;
}

.btn-default:hover {
color: whitesmoke;
background-color: #222;
border-color: #999;
}

.btn-default.active, .btn-default:active, .open>.dropdown-toggle.btn-default {
color: whitesmoke;
background-color: #555;
border-color: #999;
}

.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 {
color: whitesmoke;
background-color: #666;
border-color: #bbb;
}

.ui-infobar {
color: #888;
}

.navbar-default .navbar-brand {
color: whitesmoke;
}

.navbar-default .navbar-nav>li>a {
color: whitesmoke;
}

.navbar-right .btn.ui-status.online {
color: whitesmoke;
}

.dropdown-menu {
background-color: #000;
border: 1px solid rgba(255, 255, 255, .175);
}

.dropdown-header {
color: whitesmoke;
}

.form-control {
color: whitesmoke;
background-color: #111;
}

.input-group .input-group-btn .ui-share-copy {
background-color: #111;
}

.input-group .input-group-btn .ui-share-copy:hover {
background-color: #333;
}

.btn.focus, .btn:focus, .btn:hover {
color: whitesmoke;
}

.menuitem-dropdown .menuitem-dropdown-trigger:hover, .menuitem-dropdown .menuitem-dropdown-trigger:focus {
background-color: #333;
}

.dropdown-menu>li>a {
color: whitesmoke;
}

.permission-dropdown .ui-share-preview {
background-color: #000;
}

.permission-dropdown .ui-share-preview:hover {
background-color: #333;
}

.navbar-right .ui-menu:hover {
background-color: #333 !important;
}

.navbar-default .navbar-nav>li>a:focus, .navbar-default .navbar-nav>li>a:hover {
color: whitesmoke;
outline: none;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:focus, .navbar-default .navbar-nav>.open>a:hover {
color: whitesmoke;
background-color: #222;
}

.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
color: whitesmoke;
background-color: #222;
}

.divider {
border-bottom-color: #555;
}

.community-button:hover {
background-color: #333;
}

.ui-comment-app .open-comments {
background-color: #000;
}

.ui-comment-app .open-comments .btn.ui-open-comments:focus:not(:hover) {
background-color: #000;
border-color: #666;
}

.ui-comment-app .open-comments .btn.ui-open-comments.open, .ui-comment-app .open-comments .btn.ui-open-comments.open:focus {
background-color: #333;
border-color: #666;
}

.ui-comment-app .open-comments .btn.ui-open-comments {
color: #ddd;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto Mono', monospace;
}

.markdown-body h1, .markdown-body h2 {
color: whitesmoke;
border-bottom: 1px solid #ffffff69;
}

.markdown-body h6 {
color: whitesmoke;
}

.markdown-body code {
background-color: #333;
}

.markdown-body blockquote {
color: #ccc;
padding-left: 1.1em;
border-left: 0.15em solid #aaa;
}

blockquote .small, blockquote footer, blockquote small {
color: #ccc;
}

.markdown-body table tr {
background-color: #222;
}

.markdown-body table tr:nth-child(2n) {
background-color: #222;
}

pre {
color: whitesmoke;
}

.markdown-body:not(.next-editor) pre {
background-color: #222;
}

.markdown-body .highlight pre, .markdown-body pre {
background-color: #222;
}

a {
color: #329efa
}

a:focus, a:hover {
color: #157cd3;
}

.ui-infobar .btn.ui-edit {
color: #ddd
}

.btn-default.focus, .btn-default:focus {
background-color: #222;
}

.markdown-body {
font-family: 'Roboto Mono', monospace;
}

.markdown-body hr {
height: 0.15em;
}

.fa, .ui-status-lastchange {
color: #ccc;
}

.footer a {
color: #ccc;
}

.footer {
color: #ccc;
}

.ui-toc-dropdown .nav>.active:focus>a,
.ui-toc-dropdown .nav>.active:hover>a,
.ui-toc-dropdown .nav>.active>a {
color: whitesmoke;
border-left: 2px solid whitesmoke;
}

.ui-toc-dropdown .nav>li>a:focus,
.ui-toc-dropdown .nav>li>a:hover {
color: whitesmoke;
border-left: 1px solid whitesmoke;
}

.ui-toc-dropdown .nav>li>a {
color: #aaa;
}

.ui-toc-dropdown a {
color: #aaa;
}

.expand-toggle:hover,
.expand-toggle:focus,
.back-to-top:hover,
.back-to-top:focus,
.go-to-bottom:hover,
.go-to-bottom:focus {
color: whitesmoke;
}

.ui-owner.user-card-popover, .ui-owner-team.user-card-popover {
color: #ccc;
}

.fa.fa-share-alt.fa-18 {
color: whitesmoke;
}

.navbar .announcement-area .caption.inverse {
color: #aaa;
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
background-color: transparent;
color: #cf9b5e;
}

.hljs-keyword, .hljs-selector-tag, .hljs-type {
color: #ed4291;
}

.hljs-string, .hljs-variable, .hljs-template-variable, .hljs-strong, .hljs-emphasis, .hljs-quote {
color: #f26a1e;
}

.hljs-number, .hljs-literal, .hljs-symbol, .hljs-bullet, .hljs-attribute {
color: #18b8ed;
}

.hljs-built_in, .hljs-builtin-name {
color: #107af4;
}

.token.function, .token.class-name {
color: #eb5f7c;
}

.token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
color: #9fd72e;
}

.token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted {
color: #cb1e7e;
}

.text-gray-500 {
color: whitesmoke;
}

.bg-\[\#F3F3F3\] {
background-color: #333;
}

.hover\:bg-gray-100:hover {
background-color: #222;
}
</style>