Files
expressjs.com/css/dark-theme.css
Sebastian Beltran 896e9da0d6 feat: add color to inline code (#1592)
* feat: add color to inline code

* set color such as css vars

* add border radius
2024-09-08 12:25:46 -07:00

278 lines
6.8 KiB
CSS

.dark-mode:root{
--box-fg: rgb(255, 255, 255);
--info-bg: rgb(23, 29, 79);
--info-accent: rgb(189, 195, 255);
--notice-bg: rgb(78, 64, 34);
--notice-accent: rgb(249, 232, 195);
--warn-bg: rgb(78, 34, 50);
--warn-accent: rgb(249, 195, 214);
--code-bg: #0d1117;
}
:root {
--main_dark_bg: #010409;
--second_dark_bg: #0d1117;
--darker_hover: #171b20;
--dark_hover: #383838;
--second_dark_hover: #484848;
--dark_inner_text: #888888;
--dark_header_text: silver;
--dark_main_text: #e6edf3;
--dark_bright_text: wheat;
--dark_border: #ddd;
--link: #259dff;
}
#theme-icon-container {
position: relative;
float: right;
color: white;
min-width: 50px;
color: black;
}
#theme-icon-container i {
cursor: pointer;
line-height: 30px;
}
#theme-icon-container .hidden-light {
display: none;
}
.sun-icon {
background-image: url(/images/sun-icon.png);
background-size: 100%;
background-repeat: no-repeat;
width: 27px;
height: 27px;
cursor: pointer;
}
#theme-icon-container .hidden-dark {
display: block;
}
html.dark-mode #theme-icon-container .hidden-light {
display: block;
}
html.dark-mode #theme-icon-container .hidden-dark {
display: none;
}
html.dark-mode #theme-icon-container {
color: var(--dark_main_text);
background-color: var(--second_dark_bg);
}
html.dark-mode > body {
background: var(--main_dark_bg);
color: var(--dark_main_text);
}
html.dark-mode header {
background-color: var(--second_dark_bg);
color: var(--dark_main_text);
}
html.dark-mode #logo > a {
color: var(--dark_main_text);
}
/* navbar links/drop down menu links */
html.dark-mode #navbar ul#navmenu li a,
html.dark-mode #navbar ul#navmenu li.dropit-trigger a {
color: var(--dark_main_text);
}
/* first drop down link - some js is adding current class */
html.dark-mode #navbar ul#navmenu li a.current {
background: transparent;
}
html.dark-mode #navbar ul#navmenu li a.current:hover {
background: var(--dark_hover);
}
html.dark-mode .menu ul.dropit-submenu {
background: var(--dark_bg);
}
/* drop down menu links */
html.dark-mode #navbar .menu ul.dropit-submenu a:hover {
background: var(--dark_hover);
}
html.dark-mode #navbar #navmenu li {
background: var(--second_dark_bg);
}
/* search bar */
html.dark-mode #navbar > span.algolia-autocomplete > input {
background-color: var(--second_dark_bg);
}
html.dark-mode #navbar > span.algolia-autocomplete > input,
html.dark-mode #navbar > span.algolia-autocomplete > input::placeholder {
color: var(--dark_main_text);
}
/* search bar french */
:lang(fr) html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input {
background-color: var(--second_dark_bg);
color: var(--dark_main_text);
}
/* search bar fixes uz, ru, de, fr */
:lang(uz) span.algolia-autocomplete {
max-width: 8em;
min-width: auto;
}
:lang(ru) span.algolia-autocomplete,
:lang(de) span.algolia-autocomplete,
:lang(fr) span.algolia-autocomplete
{
max-width: 9em;
min-width: auto;
}
:lang(uz) span.algolia-autocomplete > input,
:lang(ru) span.algolia-autocomplete > input,
:lang(de) span.algolia-autocomplete > input,
:lang(fr) span.algolia-autocomplete > input {
max-width: 100%;
}
html.dark-mode #navbar ul#navmenu > span.algolia-autocomplete > input::placeholder {
color: var(--dark_main_text);
}
html.dark-mode div#overlay {
opacity: 0.5;
}
@media (max-width: 899px) {
#theme-icon-container {
bottom: 35px;
}
/* mobile menu main links hover */
html.dark-mode div#navbar ul#navmenu .dropit-trigger:hover {
background: var(--dark_hover);
}
/* mobile menu inner links hover */
html.dark-mode div#navbar .menu ul.dropit-submenu a:hover {
background: var(--second_dark_hover);
color: var(--dark_main_text) !important;
}
}
html.dark-mode .doc-box.doc-info pre.language-javascript {
background: var(--main_dark_bg);
}
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode code,
html.dark-mode em,
html.dark-mode strong {
color: var(--dark_main_text);
}
html.dark-mode pre {
background: var(--second_dark_bg);
}
/* index.html */
html.dark-mode #description .express > a {
color: var(--dark_main_text);
}
html.dark-mode #install-command {
background: var(--main_dark_bg);
}
html.dark-mode #announcements {
background: var(--main_dark_bg);
}
html.dark-mode #boxes div > h3 {
color: var(--dark_main_text);
}
/* basic-routing.htlm */
html.dark-mode [class*='language-'] {
text-shadow: 0 1px var(--second_dark_bg);
}
/* js fat arrow operator */
html.dark-mode .token.operator {
background: inherit;
}
/* debugging.htlm */
html.dark-mode table tr:first-child th {
background-color: var(--second_dark_bg);
color: var(--dark_main_text);
}
/* api pages */
html.dark-mode #menu li > * {
color: var(--dark_main_text);
}
html.dark-mode #menu li ul li > em {
color: var(--dark_header_text);
}
html.dark-mode #menu li ul li > a {
color: var(--dark_inner_text);
}
html.dark-mode #api-doc > h3 {
color: var(--dark_header_text);
}
html.dark-mode #api-doc section h5 {
color: var(--dark_header_text);
}
/*
overriding search-bar results drop down
*/
html.dark-mode .ds-dropdown-menu .ds-dataset-1 {
background-color: var(--dark_bg);
}
html.dark-mode .ds-dropdown-menu .ds-dataset-1 .ds-suggestion a {
background-color: var(--second_dark_bg);
color: var(--dark_main_text);
}
html.dark-mode
.ds-dropdown-menu
.ds-dataset-1
.ds-suggestions
.algolia-docsearch-suggestion--category-header {
color: var(--dark_main_text);
}
html.dark-mode
.ds-dropdown-menu
.ds-dataset-1
.ds-suggestions
.algolia-docsearch-suggestion--wrapper
.algolia-docsearch-suggestion--subcategory-column {
color: var(--dark_header_text);
}
html.dark-mode
.ds-dropdown-menu
.ds-dataset-1
.ds-suggestions
.algolia-docsearch-suggestion--wrapper
.algolia-docsearch-suggestion--title {
color: var(--dark_main_text);
}
html.dark-mode
.ds-dropdown-menu
.ds-dataset-1
.ds-suggestions
.algolia-docsearch-suggestion--wrapper
.algolia-docsearch-suggestion--text {
color: var(--dark_main_text);
}
html.dark-mode
.ds-dropdown-menu
.ds-dataset-1
.ds-suggestions
.algolia-docsearch-suggestion--wrapper
.algolia-docsearch-suggestion--highlight {
color: var(--link);
}
html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--title,
html.dark-mode .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content{
background-color: var(--dark_hover);
}
html.dark-mode .blog-post{
background-color: initial;
border: 1px solid var(--dark_border);
transition: 0.3s;
}
html.dark-mode .blog-post:hover{
background-color: var(--darker_hover);
}
html.dark-mode .blog-title > a{
color: var(--dark_main_text);
}
html.dark-mode .blog-excerpt{
color: var(--dark_bright_text);
}
html.dark-mode #blog-side-menu-container h3 a{
color: var(--dark_header_text);
}
html.dark-mode #blog-side-menu > li > a{
color: var(--dark_inner_text);
}
html.dark-mode pre code {
background-color: inherit;
}