mirror of
https://github.com/typecho/typecho.git
synced 2025-01-16 20:18:19 +01:00
Fix/classic22 (#1708)
* fix: use prefers-color-scheme control dark mode * update color
This commit is contained in:
Fen
GitHub
parent
4028d7d160
commit
99ffd36648
2
.github/ISSUE_TEMPLATE/config.yml
vendored
2
.github/ISSUE_TEMPLATE/config.yml
vendored
@ -1,5 +1,5 @@
|
||||
blank_issues_enabled: true
|
||||
contact_links:
|
||||
- name: Support
|
||||
- name: 论坛支持
|
||||
url: https://forum.typecho.org/
|
||||
about: 交流使用心得，使用模板插件，寻求帮助等等
|
||||
|
||||
@ -13,10 +13,6 @@
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<?php if ($this->options->colorSchema == 'auto'): ?>
|
||||
<script src="<?php $this->options->themeUrl('static/js/theme-switcher.js'); ?>"></script>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php $this->footer(); ?>
|
||||
|
||||
</body>
|
||||
|
||||
@ -13,29 +13,20 @@ function themeConfig($form)
|
||||
|
||||
$form->addInput($logoUrl->addRule('url', _t('请填写正确的 URL 地址')));
|
||||
|
||||
$colorSchema = new \Typecho\Widget\Helper\Form\Element\Radio(
|
||||
$colorSchema = new \Typecho\Widget\Helper\Form\Element\Select(
|
||||
'colorSchema',
|
||||
array(
|
||||
'auto' => _t('自动'),
|
||||
null => _t('自动'),
|
||||
'light' => _t('浅色'),
|
||||
'dark' => _t('深色'),
|
||||
'customize' => _t('自定义（请在 theme.css 里设置）'),
|
||||
'customize' => _t('自定义'),
|
||||
),
|
||||
'auto',
|
||||
_t('外观风格')
|
||||
null,
|
||||
_t('外观风格'),
|
||||
_t('如果选择了自定义，主题将使用 theme.css 的样式')
|
||||
);
|
||||
|
||||
$form->addInput($colorSchema);
|
||||
|
||||
// $primaryColor = new \Typecho\Widget\Helper\Form\Element\Text(
|
||||
// 'primaryColor',
|
||||
// null,
|
||||
// null,
|
||||
// _t('主色调'),
|
||||
// _t('在这里填写颜色值，网站将使用该颜色作为主色调')
|
||||
// );
|
||||
|
||||
// $form->addInput($primaryColor);
|
||||
}
|
||||
|
||||
function postMeta(
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-Hans" data-theme="<?php $this->options->colorSchema(); ?>">
|
||||
<html lang="zh-Hans"<?php if ($this->options->colorSchema): ?> data-theme="<?php $this->options->colorSchema(); ?>"<?php endif; ?>>
|
||||
<head>
|
||||
<meta charset="<?php $this->options->charset(); ?>">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,24 +0,0 @@
|
||||
/*!
|
||||
* Minimal theme switcher
|
||||
*/
|
||||
|
||||
const themeSwitcher = {
|
||||
init: function() {
|
||||
const setTheme = () => {
|
||||
if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
|
||||
document.documentElement.setAttribute('data-theme', 'dark');
|
||||
} else {
|
||||
document.documentElement.setAttribute('data-theme', 'light');
|
||||
}
|
||||
};
|
||||
|
||||
// Set theme on page load
|
||||
setTheme();
|
||||
|
||||
// Update theme if system color scheme changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setTheme);
|
||||
},
|
||||
};
|
||||
|
||||
// Init
|
||||
themeSwitcher.init();
|
||||
@ -19,52 +19,16 @@ $grey-800: #1e293b;
|
||||
$grey-900: #0f172a;
|
||||
|
||||
// Blue
|
||||
$primary-50: #E9F2FC;
|
||||
$primary-100: #D1E5FB;
|
||||
$primary-200: #9BCCFD;
|
||||
$primary-300: #51B4FF;
|
||||
$primary-400: #029AE8;
|
||||
$primary-500: #017FC0;
|
||||
$primary-600: #02659A;
|
||||
$primary-700: #014C75;
|
||||
$primary-800: #033452;
|
||||
$primary-900: #061E2F;
|
||||
|
||||
// Amber
|
||||
$amber-50: #fffbeb;
|
||||
$amber-100: #fef3c7;
|
||||
$amber-200: #fde68a;
|
||||
$amber-300: #fcd34d;
|
||||
$amber-400: #fbbf24;
|
||||
$amber-500: #f59e0b;
|
||||
$amber-600: #d97706;
|
||||
$amber-700: #b45309;
|
||||
$amber-800: #92400e;
|
||||
$amber-900: #78350f;
|
||||
|
||||
// Green
|
||||
$green-50: #f0fdf4;
|
||||
$green-100: #dcfce7;
|
||||
$green-200: #bbf7d0;
|
||||
$green-300: #86efac;
|
||||
$green-400: #4ade80;
|
||||
$green-500: #22c55e;
|
||||
$green-600: #16a34a;
|
||||
$green-700: #15803d;
|
||||
$green-800: #166534;
|
||||
$green-900: #14532d;
|
||||
|
||||
// Red
|
||||
$red-50: #fef2f2;
|
||||
$red-100: #fee2e2;
|
||||
$red-200: #fecaca;
|
||||
$red-300: #fca5a5;
|
||||
$red-400: #f87171;
|
||||
$red-500: #ef4444;
|
||||
$red-600: #dc2626;
|
||||
$red-700: #b91c1c;
|
||||
$red-800: #991b1b;
|
||||
$red-900: #7f1d1d;
|
||||
$primary-50: #d6f0ff;
|
||||
$primary-100: #b5e7ff;
|
||||
$primary-200: #83d9ff;
|
||||
$primary-300: #48c3ff;
|
||||
$primary-400: #1ea2ff;
|
||||
$primary-500: #0683ff;
|
||||
$primary-600: #0064e6;
|
||||
$primary-700: #0855c5;
|
||||
$primary-800: #0d4b9b;
|
||||
$primary-900: #0e2e5d;
|
||||
|
||||
// Config
|
||||
@import "../../../../../tools/node_modules/@picocss/pico/scss/variables";
|
||||
|
||||
@ -7,21 +7,26 @@
|
||||
|
||||
body {
|
||||
cursor: auto;
|
||||
text-underline-offset: 0.2rem;
|
||||
}
|
||||
|
||||
// Theme
|
||||
[data-theme="light"],
|
||||
:root:not([data-theme="dark"]) {
|
||||
--primary: #{$primary-500};
|
||||
--primary-hover: #{$primary-600};
|
||||
--muted-border-color: #{$grey-200};
|
||||
--level-odd-color: #{$grey-50};
|
||||
}
|
||||
|
||||
@media only screen and (prefers-color-scheme: dark) {
|
||||
:root:not([data-theme]) {
|
||||
--background-color: #{$grey-900};
|
||||
--muted-border-color: #{$grey-700};
|
||||
--level-odd-color: #{$grey-800};
|
||||
}
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background-color: #{$grey-900};
|
||||
--primary: #{$primary-400};
|
||||
--primary-hover: #{$primary-300};
|
||||
--muted-border-color: #{$grey-700};
|
||||
--level-odd-color: #{$grey-800};
|
||||
}
|
||||
|
||||
@ -4,8 +4,8 @@
|
||||
*/
|
||||
|
||||
[data-theme="customize"] {
|
||||
/* --primary: #017FC0 !important;
|
||||
--primary-hover: #02659A !important; */
|
||||
--primary: #017FC0 !important;
|
||||
--primary-hover: #02659A !important;
|
||||
--background-color: #fffbeb !important;
|
||||
--muted-border-color: rgba(0, 0, 0, .1) !important;
|
||||
--form-element-border-color: rgba(0, 0, 0, .2) !important;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user