ui: dark mode

Co-authored by: NetherDevil@outlook.com
This commit is contained in:
undefined committed 2022-03-16 19:17:35 +08:00
1 parent c28f2b3437
commit e427b9196c
8 files changed
+366 -10

No files matched your search

+2 -2
View File
@@ -823,8 +823,8 @@ export class ConnectionHandler extends HandlerCommon {
onerror(err: HydroError) {
if (err instanceof UserFacingError) err.stack = this.conn.pathname;
if (!(err instanceof NotFoundError)
&& !((err instanceof PrivilegeError || err instanceof PermissionError) && this.user._id === 0)) {
logger.error(`Path:${this.conn.pathname}, User:${this.user._id}(${this.user.uname})`);
&& !((err instanceof PrivilegeError || err instanceof PermissionError) && this.user?._id === 0)) {
logger.error(`Path:${this.conn.pathname}, User:${this.user?._id}(${this.user?.uname})`);
logger.error(err);
}
this.send({
+1 -1
View File
@@ -172,7 +172,7 @@ class RichMediaHandler extends Handler {
global.Hydro.handler.ui = async () => {
Route('wiki_help', '/wiki/help', WikiHelpHandler);
Route('wiki_about', '/wiki/about', WikiAboutHandler);
Route('set_theme', '/set_theme/:id', SetThemeHandler);
Route('set_theme', '/set_theme/:theme', SetThemeHandler);
Route('constant', '/constant', UiConstantsHandler);
Route('markdown', '/markdown', MarkdownHandler);
Route('lang', '/l/:lang', LanguageHandler);
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "@hydrooj/ui-default",
"version": "4.34.6",
"version": "4.34.7",
"author": "undefined <i@undefined.moe>",
"license": "AGPL-3.0",
"main": "hydro.js",
+7
View File
@@ -62,6 +62,13 @@ monacoTheme:
category: preference
value: vs-light
family: markdown
theme:
type:
light: Light
dark: Dark
category: preference
value: light
family: setting_display
showInvisibleChar:
type: boolean
family: highlight
@@ -5,7 +5,7 @@
{% import "components/noscript_note.html" as noscript_note with context %}
{% import "components/user.html" as user with context %}
<!DOCTYPE html>
<html data-page="{{ page_name }}" data-layout="{{ layout_name }}" class="layout--{{ layout_name }} page--{{ page_name }} nojs" lang="{{ handler.viewLang }}" data-app="Hydro">
<html data-page="{{ page_name }}" data-layout="{{ layout_name }}" class="layout--{{ layout_name }} page--{{ page_name }} theme--{{ (handler.user|default({})).theme|default('default') }} nojs" lang="{{ handler.viewLang }}" data-app="Hydro">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
@@ -35,7 +35,7 @@
{% if process.env.DEV %}
<link rel="stylesheet" media="all" href="/default.theme.css">
{% else %}
<link rel="stylesheet" media="all" href="{{ static_url((handler.user|default({})).theme|default('default') + '-' + global.Hydro.version['ui-default'] +'.theme.css') }}">
<link rel="stylesheet" media="all" href="{{ static_url('default-' + global.Hydro.version['ui-default'] +'.theme.css') }}">
{% endif %}
{% if not isIE(handler.request.headers['user-agent']) %}
<script>
@@ -71,7 +71,7 @@
<script type="module" src="http://localhost:3000/@vite/client"></script>
<script type="module" src="http://localhost:3000/entry.js"></script>
{% else %}
<script src="{{ static_url((handler.user|default({})).theme|default('default') + '.theme.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
<script src="{{ static_url('default.theme.js') }}?version={{ global.Hydro.version['ui-default'] }}"></script>
{% if process.env.DEV %}
<script type="text/javascript" src="/hydro.js"></script>
{% else %}
@@ -61,9 +61,8 @@
<li class="footer__extra-link-item" data-dropdown-target="#menu-footer-theme">
<span><span class="icon icon-global"></span> Theme <span class="icon icon-expand_less"></span></span>
<ol class="dropdown-target menu" id="menu-footer-theme">
{%- for k in UiContext.themes -%}
<li class="menu__item"><a class="menu__link" href="{{ url('set_theme', id=k) }}">{{ k }}</a></li>
{%- endfor -%}
<li class="menu__item"><a class="menu__link" href="{{ url('set_theme', id='light') }}">Light</a></li>
<li class="menu__item"><a class="menu__link" href="{{ url('set_theme', id='dark') }}">Dark</a></li>
</ol>
</li>
</ol>
+348
View File
@@ -0,0 +1,348 @@
.theme--dark
#panel
background-color: #1d2022
.nav
background-color: rgba(15, 15, 15, 98)
.nav .nav__item:hover
background-color: #171717
.nav .nav__item
color: #aaa
.section
background-color: #1f1f1f
box-shadow: 0 0.2rem 0.5rem #3d3d3d
body
color: #d9dfe7
.footer
background-color: #1f1f1f
color: #aaa
h1, h2, h3, h4, h5, h6
color: #c2c2c2
a, .link, a:visited, .link:visited, a:hover, .link:hover, a:active, .link:active
color: #aaa
.section__title
color: #9b9b9b
.dropdown .menu
box-shadow: 0 0.125rem 0.4375rem #3d3d3d
background-color: rgb(15, 15, 15)
a.menu__link:not(.disabled):hover, button.menu__link:not(.disabled):hover
color: #aaa
background-color: rgb(27, 27, 27)
blockquote, blockquote.blue, blockquote.red, blockquote.yellow, blockquote.warn, blockquote.note
background-color: rgb(23, 23, 23)
color: #999
blockquote
border-left-color: #323232
a.menu__link.active, button.menu__link.active, a.menu__link.active:hover, button.menu__link.active:hover
background-color: #ed5f82
color: #fff
.menu__seperator
border-top-color: #212121
.menu__link
color: #aaa
.button:not(.codicon)
background-color: #212121
border: 1px solid #323232
.button:not(.codicon),.button:not(.codicon):visited,.button:not(.codicon):hover,.typo .button:not(.codicon),.typo .button:not(.codicon):visited,.typo .button:not(.codicon):hover
color: #aaa
.button:not(.codicon):not(.disabled):hover,.button:not(.codicon):not(.disabled):focus
background-color: #3d3d3d
border-color: #3d3d3d
box-shadow: 0 4px 15px rgba(56,56,56,.5)
.dialog
background-color: rgba(31, 31, 31, 0.6)
.dialog.withBg .dialog__content
background-color: #1f1f1f
border: 1px solid #323232
box-shadow: 0 0.125rem 0.625rem rgba(255 255 255 20%)
.section__table-header
background-color: rgba(15, 15, 15, 0.95)
box-shadow: 0 0.1875rem 0.125rem rgba(255 255 255 3%)
.data-table tr
border-top: 1px solid #2b2b2b
border-bottom: 1px solid #2b2b2b
.checkbox input
border-color: #3f3f3f
.data-table tr:nth-child(even)
background-color: #1b1b1b
.page--problem_main .col--ac-tried, .page--problem_category .col--ac-tried
border-left-color: #2b2b2b
.page--problem_main .col--status, .page--problem_category .col--status
border-right-color: #2b2b2b !important
.pager.pager-top
border-bottom-color: #2b2b2b
.pager__item
border-bottom-color: #2b2b2b
.pager.pager-bottom
border-top-color: #2b2b2b
.pager__item
border-top-color: #2b2b2b
input
background-color: #1f1f1f
.search>input
border-color: #434343
border-top-color: rgb(67, 67, 67)
border-bottom-color: rgb(67, 67, 67)
border-left-color: rgb(67, 67, 67)
color: #fff
.select
border: 1px solid #323232
background-color: #1f1f1f
.select:focus
border-color: #2960a0
outline-color: #102f4e
.page--record_main .col--status, .page--record_main .col--submit-by, .page--record_main .col--lang
border-right-color: #2b2b2b
.page--home_domain .col--role
border-left: 1px solid #2b2b2b
border-left-color: rgb(43, 43, 43)
input.textbox, textarea.textbox
border: 1px solid #323232
background-color: #1f1f1f
.autocomplete-wrapper input
background-color: #1f1f1f
color: rgba(255,255,255,.85)
.autocomplete-wrapper
border-color: #363636
background-color: #1f1f1f
label:not(.quick-input-list-label)
color: #999
.scratchpad-container
background-color: #1f1f1f
.toolbar
background-color: rgba(23, 23, 23, 0.8)
pre[class*=language-]
border: 1px solid #323232
background-color: #1f1f1f
code[class*=language-], pre[class*=language-]
color: #cbc5c6
pre[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,code[class*=language-] ::-moz-selection
background-color: #ADD6FF26
pre[class*=language-]::selection,pre[class*=language-] ::selection,code[class*=language-]::selection,code[class*=language-] ::selection
background-color: #ADD6FF26
:not(pre)>code[class*=language-]
background-color: #171717
border: 1px solid #323232
.scratchpad__data-input
border-left-color: #2f2f2f
background-color: #171717
color: #999
pre, code
background-color: #171717
.scratchpad__toolbar
background-color: #18191d
.scratchpad__toolbar__button.enabled:hover
color: #8a94a5
background-color: #27282c
.scratchpad__toolbar__split
background-color: #313131
.menu__link.highlight
background: rgb(40, 11, 20)
.bp3-tag.bp3-minimal:not([class*="bp3-intent-"])
background-color: rgba(87, 100, 117, .2)
color: #d9dfe7
.typo table thead th
background: #1e1e1e
background-color: rgb(30, 30, 30)
.typo table th, .typo table td, .typo table caption
border-color: #323232
color: #999
body>.marker
box-shadow: 0 2px 7px rgba(255 255 255 30%)
background-color: #1f1f1f
border-color: #555
body>.marker .marker__toolbar
background-color: #18191d
.messagepad__sidebar
border-right-color: #212121
.messagepad__list-item:hover
border-color: #323232
background-color: #1b1b1b
.messagepad__list-item.active
border-color: #ed5f82
background-color: rgba(237,95,130,.07)
.messagepad__input
border-top-color: #212121
.section__tab-container.immersive .section__tab-header-item.selected
background-color: rgb(15, 15, 15)
color: #999
box-shadow: 0 0 10px rgba(255 255 255 30%)
.dialog--signin__main
background-color: #1f1f1f
box-shadow: 0 0 30px rgba(255 255 255 60%)
.nothing-icon
filter: brightness(50%)
.scratchpad__data-input:focus
background: #1f1f1f
border-color: #1c2d40
.section__list__item
border-bottom-color: #2b2b2b
.autocomplete-list
background-color: #1f1f1f
li[aria-selected=true]
background-color: #151515
li[data-focus=true]
background-color: #101829
cursor: pointer
.dczcomments__item, .dczcomments__reply
border-top-color: #2b2b2b
.autocomplete-tag
background-color: #ff0000
.problem__tag-link
background-color: #1f1f1f
color: #aaa!important
label.textbox.material input
border-color: #333
color: #aaa
border-bottom-color: rgba(170,170,170,.4)
.widget--category-filter__drop
background-color: #1f1f1f
box-shadow: 0 0.125rem 0.4375rem rgba(255 255 255 30%)
hr
border-bottom-color: #404040
.section__footer
border-top-color: #2b2b2b
.page--discussion_detail .sidebar-user-profile .user-profile-name, .page--blog_detail .sidebar-user-profile .user-profile-name
color: #bbb
.page--record_detail .col--case, .page--record_detail .col--status
border-right-color: #2b2b2b
.data-table thead>tr
border-bottom-color: #2b2b2b
.token.comment,.token.prolog,.token.doctype,.token.cdata
color: #57A64A
font-style: italic
.token.namespace
opacity: .7
.token.string
color: #D69D85
.token.punctuation,.token.operator
color: #B4B4B4
.token.url,.token.symbol,.token.number,.token.boolean,.token.variable,.token.constant,.token.inserted
color: #B5CEA8
.token.atrule,.token.keyword,.token.attr-value,.language-autohotkey .token.selector,.language-json .token.boolean,.language-json .token.number,code[class*=language-css]
color: #569cd6
.token.function
color: #C8C8C8
.token.deleted,.language-autohotkey .token.tag
color: #9a050f
.token.selector,.language-autohotkey .token.keyword
color: #00009f
.token.important
color: #e90
.token.important,.token.bold
font-weight: 700
.token.italic
font-style: italic
.token.class-name,.language-json .token.property
color: #4EC9B0
.token.tag,.token.selector
color: #d7ba7d
.token.attr-name,.token.property,.token.regex,.token.entity
color: #d16969
.token.directive.tag .tag
background: #ffff00
color: #393a34
.page--problem_edit .section__tab-header-item:hover
background-color: #171717
.page--home_security .sessionlist__item
border-bottom-color: #323232
@media only screen and (max-width: 600px) {
.footer__category {
border-bottom-color: #1d1d1d
}
}
+2
View File
@@ -36,3 +36,5 @@ const pageStyleReq = require.context('../', true, /\.page\.styl$/i);
pageStyleReq.keys().map((key) => pageStyleReq(key));
const pageStyleReqDefault = require.context('../', true, /\.page\.default\.styl$/i);
pageStyleReqDefault.keys().map((key) => pageStyleReqDefault(key));
import './dark.styl';