mirror_php/typecho
1
0
Fork 0
mirror of https://github.com/typecho/typecho.git synced 2025-01-17 12:38:28 +01:00
Code Issues Projects Releases Wiki Activity

update theme classic-22 color schema (#1689)

Browse Source 
* fix: auto dark mode

* improve: pagenav style, theme color

* improve: color schema name

* fix: icon color
This commit is contained in:
Fen 2024-01-07 00:39:10 +08:00 committed by GitHub
parent 68026e0fbc
commit af281422d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 117 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
usr/themes/classic-22/comments.php
View File

@ -10,7 +10,7 @@
'defaultAvatar' => 'identicon'
)); ?>
<?php $comments->pageNav('&laquo; 前一页', '后一页 &raquo;'); ?>
<?php $comments->pageNav(_t('前一页'), _t('后一页')); ?>
<?php endif; ?>
@ -23,7 +23,9 @@
<h5 id="response"><?php _e('你的评论'); ?></h5>
<form method="post" action="<?php $this->commentUrl() ?>" id="comment-form" role="form">
<textarea placeholder="<?php _e('评论内容...'); ?>" rows="4" cols="50" name="text" id="textarea" required><?php $this->remember('text'); ?></textarea>
<div class="grid">
<textarea placeholder="<?php _e('评论内容...'); ?>" rows="4" cols="300" name="text" id="textarea" required><?php $this->remember('text'); ?></textarea>
</div>
<?php if ($this->user->hasLogin()): ?>
<p>
<?php _e('登录身份：'); ?><a href="<?php $this->options->profileUrl(); ?>"><?php $this->user->screenName(); ?></a><span class="mx-2 text-muted">&middot;</span><a href="<?php $this->options->logoutUrl(); ?>"><?php _e('退出'); ?></a>

4
usr/themes/classic-22/footer.php
View File

@ -13,6 +13,10 @@
</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>

19
usr/themes/classic-22/functions.php
View File

@ -13,18 +13,29 @@ function themeConfig($form)
$form->addInput($logoUrl->addRule('url', _t('请填写正确的 URL 地址')));
$themeStyle = new \Typecho\Widget\Helper\Form\Element\Radio(
'themeStyle',
$colorSchema = new \Typecho\Widget\Helper\Form\Element\Radio(
'colorSchema',
array(
'auto' => _t('自动'),
'light' => _t('浅色'),
'dark' => _t('深色')
'dark' => _t('深色'),
'colorful' => _t('彩色'),
),
'auto',
_t('外观风格')
);
$form->addInput($themeStyle);
$form->addInput($colorSchema);
// $primaryColor = new \Typecho\Widget\Helper\Form\Element\Text(
// 'primaryColor',
// null,
// null,
// _t('主色调'),
// _t('在这里填写颜色值，网站将使用该颜色作为主色调')
// );
// $form->addInput($primaryColor);
}
function postMeta(

8
usr/themes/classic-22/header.php
View File

@ -1,12 +1,10 @@
<?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
<!DOCTYPE html>
<html lang="zh-Hans" data-theme="<?php $this->options->themeStyle(); ?>">
<html lang="zh-Hans" data-theme="<?php $this->options->colorSchema(); ?>">
<head>
<meta charset="<?php $this->options->charset(); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php $this->archiveTitle('', '', ' | '); ?><?php $this->options->title(); ?><?php if ($this->is('index')): ?> | <?php $this->options->description() ?><?php endif; ?></title>
<link rel="stylesheet" href="<?php $this->options->themeUrl('static/css/style.css'); ?>">
<?php $this->header(); ?>
@ -30,7 +28,9 @@
<ul>
<li>
<label for="nav-toggler" class="nav-toggler-btn"><img src="<?php $this->options->themeUrl('static/img/menu.svg'); ?>" alt="Menu"></label>
<label for="nav-toggler" class="nav-toggler-btn">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="6" x2="21" y2="6" /><line x1="3" y1="18" x2="21" y2="18" /></svg>
</label>
</li>
</ul>
</nav>

2
usr/themes/classic-22/index.php
View File

@ -42,7 +42,7 @@ $this->need('header.php');
<span class="mx-2 text-muted">&middot;</span>
<a href="#">Newer Posts &raquo;</a>
</div> -->
<?php $this->pageNav('← ' . _t('前一页'), _t('后一页') . ' →'); ?>
<?php $this->pageNav(_t('前一页'), _t('后一页')); ?>
</main>
<?php $this->need('footer.php'); ?>

8
usr/themes/classic-22/post.php
View File

@ -13,12 +13,8 @@
</article>
<div class="grid post-next">
<div>
← <?php $this->thePrev('%s', _t('没有了')); ?>
</div>
<div class="text-end">
<?php $this->theNext('%s', _t('没有了')); ?> →
</div>
<div class="prev"><?php $this->thePrev('%s', _t('没有了')); ?></div>
<div class="next text-end"><?php $this->theNext('%s', _t('没有了')); ?></div>
</div>
<?php $this->need('comments.php'); ?>

BIN
usr/themes/classic-22/screenshot.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.4 KiB

After

Width:  |  Height:  |  Size: 13 KiB

2
usr/themes/classic-22/static/css/style.css
View File

File diff suppressed because one or more lines are too long

15
usr/themes/classic-22/static/img/menu.svg
View File

@ -1,15 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<line x1="3" y1="12" x2="21" y2="12" />
<line x1="3" y1="6" x2="21" y2="6" />
<line x1="3" y1="18" x2="21" y2="18" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 324 B

14
usr/themes/classic-22/static/img/search.svg
View File

@ -1,14 +0,0 @@
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="#fff"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 284 B

24
usr/themes/classic-22/static/js/theme-switcher.js Normal file
View File

@ -0,0 +1,24 @@
/*!
* 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();

3
usr/themes/classic-22/static/scss/_pico.scss
View File

@ -3,7 +3,7 @@
* Licensed under MIT
*/
// Config
// Customize
// $enable-responsive-typography: false;
// Grey
@ -66,6 +66,7 @@ $red-700: #b91c1c;
$red-800: #991b1b;
$red-900: #7f1d1d;
// Config
@import "../../../../../tools/node_modules/@picocss/pico/scss/variables";
// Theming

99
usr/themes/classic-22/static/scss/style.scss
View File

@ -15,29 +15,43 @@ body {
--primary: #{$primary-500};
--primary-hover: #{$primary-600};
--muted-border-color: #{$grey-200};
--level-odd-color: #{$grey-50};
}
[data-theme="dark"] {
--primary: #{$primary-500};
--primary-hover: #{$primary-400};
--muted-border-color: #{$grey-800};
--background-color: #{$grey-900};
--primary: #{$primary-400};
--primary-hover: #{$primary-300};
--muted-border-color: #{$grey-700};
--level-odd-color: #{$grey-800};
}
[data-theme="colorful"] {
--background-color: #{$amber-50} !important;
--muted-border-color: rgba(0, 0, 0, .1) !important;
--form-element-border-color: rgba(0, 0, 0, .2) !important;
--level-odd-color: rgba(0, 0, 0, .025) !important;
.site-navbar {
background-color: #{$primary-600};
}
background-color: var(--primary);
.comment-level-odd {
background-color: #{$grey-900};
a,
.nav-toggler-btn,
input[type="search"] {
color: var(--primary-inverse);
}
.desc {
color: rgba(255, 255, 255, .5);
}
input[type="search"] {
border-color: rgba(255, 255, 255, .25);
--icon-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(255, 255, 255)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
}
}
}
// Content
h1, h2, h3, h4, h5 { line-height: 1.25; }
// h1 { --font-size: 2.5rem; }
// h2 { --font-size: 2rem; }
// h3 { --font-size: 1.75rem; }
// h4 { --font-size: 1.5rem; }
// h5 { --font-size: 1.25rem; }
// Icon Size
.is-sm {
@ -131,12 +145,9 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
.site-navbar {
padding-top: .25rem;
padding-bottom: .25rem;
background-color: var(--primary);
a {
color: var(--primary-inverse);
// color: rgba(255, 255, 255);
// &:hover { text-decoration: underline; }
color: inherit;
}
.site-name {
@ -146,10 +157,14 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
.brand {
font-size: 1.25rem;
font-weight: 700;
img {
max-height: 2rem;
}
}
.desc {
color: rgba(255, 255, 255, .5);
color: var(--muted-color);
display: none;
@if map-get($breakpoints, "sm") {
@media (min-width: map-get($breakpoints, "sm")) {
@ -171,6 +186,10 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
}
}
.nav-toggler-btn {
cursor: pointer;
}
// Dropdown Menu
.nav-menu {
display: none;
@ -185,14 +204,7 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
input[type=search] {
height: 50px;
background-image: url("../img/search.svg");
background-size: auto;
background-color: inherit;
color: var(--primary-inverse);
&:focus {
--form-element-focus-color: rgba(255, 255, 255, .5);
}
&:not(:focus) {
padding: 0;
@ -200,19 +212,14 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
width: 30px;
padding-inline-start: 0;
background-position: center center;
background-color: inherit;
color: transparent;
cursor: pointer;
}
}
}
}
.nav-toggler-btn {
margin: calc(var(--spacing) * -1) calc(var(--spacing) * -0.5);
padding: var(--spacing) calc(var(--spacing) * 0.5);
color: rgba(255, 255, 255, 1.0);
cursor: pointer;
}
@if map-get($breakpoints, "lg") {
@media (min-width: map-get($breakpoints, "lg")) {
.site-navbar .container-inner,
@ -307,11 +314,10 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
.comment-list {
list-style: none;
padding: 0;
// padding-left: calc(var(--spacing) * 4);
}
.comment-level-odd {
background-color: #{$grey-50};
background-color: var(--level-odd-color);
}
.comment-level-even {
background-color: var(--background-color);
@ -385,9 +391,9 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
margin-bottom: calc(var(--spacing) * -1);
}
.comment-by-author {
// background-color: var(--mark-background-color);
}
// .comment-by-author {
// background-color: var(--mark-background-color);
// }
#response {
margin-bottom: var(--spacing);
@ -395,7 +401,6 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
#cancel-comment-reply-link {
font-size: .875em;
color: var(--del-color);
}
.comment-body .respond {
@ -416,10 +421,26 @@ h1, h2, h3, h4, h5 { line-height: 1.25; }
display: inline;
margin-left: calc(var(--spacing) / 2);
margin-right: calc(var(--spacing) / 2);
a {
color: inherit;
}
&.current a {
font-weight: 700;
color: var(--h5-color);
padding: 4px 12px;
border: 1px solid var(--muted-border-color);
border-radius: var(--border-radius);
color: var(--muted-color);
pointer-events: none;
}
}
}
.prev::before {
content: "‹";
margin-right: .25rem;
}
.next::after {
content: "›";
margin-left: .25rem;
}