Skip to content

Instantly share code, notes, and snippets.

@kght6123
Last active Aug 1, 2018
Embed
What would you like to do?
時間帯でダークカラーとライトカラーのCSSを切り替え(Wordpress)
blockquote, .post-password-form label,
a:hover, a:focus, a:active, .post-navigation
.meta-nav, .image-navigation, .comment-navigation,
.widget_recent_entries .post-date, .widget_rss .rss-date,
.widget_rss cite, .site-description,
.author-bio, .entry-footer, .entry-footer a,
.sticky-post, .taxonomy-description,
.entry-caption, .comment-metadata,
.pingback .edit-link, .comment-metadata a, .pingback .comment-edit-link,
.comment-form label, .comment-notes,
.comment-awaiting-moderation, .logged-in-as,
.form-allowed-tags, .site-info, .site-info a,
.wp-caption .wp-caption-text, .gallery-caption,
.widecolumn label, .widecolumn .mu_register label {
color: #c1c1c1 !important;
}
body, blockquote cite, blockquote small,
.main-navigation a, .menu-toggle, .dropdown-toggle,
.social-navigation a, .post-navigation a, .pagination a:hover,
.pagination a:focus, .widget-title a, .site-branding .site-title a,
.entry-title a, .page-links>.page-links-title, .comment-author,
.comment-reply-title small a:hover, .comment-reply-title small a:focus {
color: #e5e5e5 !important;
}
body {
background-color: #111 !important;
background: #111 !important;
}
a {
color: #a2d7fa !important;
}
.site {
background-color: #2C2C2C !important;
}
.widget-area {
background-color: rgba(0, 0, 0, 0) !important;
}
.widget-area ul li::after {
border-right: 3px solid #666;
border-bottom: 3px solid #666;
}
/* Gistダークテーマ */
/* Line Numbers */
.gist-data tbody td:nth-of-type(1) {
color: #666 !important;
}
/* Code */
.gist-data tbody td:nth-of-type(2){
color: #ddd !important;
}
/* All & Footer & body */
.gist-data, .gist-data table, .gist-data tbody {
background-color: #333 !important;
color: #ccc !important;
}
.gist-meta, .gist-meta * {
background-color: #393939 !important;
color: #ccc !important;
}
.gist {
background-color: rgba(0, 0, 0, 0) !important;
color: #ccc !important;
}
.gist, .gist-data, .gist-data table td, .gist-file, .gist-meta {
border: 1px solid rgba(0, 0, 0, 0) !important;
}
/* Comments */
.pl-c
{
color: #57A64A !important;
}
/* Function */
.pl-k
{
color: rgb(229, 173, 255) !important;
}
/* Function Name */
.pl-en
{
color: rgb(255, 173, 230) !important;
}
/* Function Method */
.pl-c1
{
color: rgb(255, 196, 196) !important;
}
/* "'s around Strings */
.pl-pds
{
color: rgb(204, 173, 255) !important;
}
/* Strings */
.pl-s
{
color: rgb(204, 173, 255) !important;
}
/* val */
.pl-smi
{
color: rgb(159, 193, 255) !important;
}
.tbl {
background-color: #616161 !important;
}
.tbl th,
.tbl td {
border-color: #424242 !important;
}
.tbl th {
background-color: #757575 !important;
}
<?php
function kght_theme_enqueue_styles() {
// 親CSSの読み込み
wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css' );
// 親CSSを継承して、子CSSの読み込み
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
// タームゾーンを指定
date_default_timezone_set('Asia/Tokyo');
// リクエストパラメータの値を取得
$kght_style_mode = get_query_var('kght_style_mode', 'none');
// 現在時刻を数値で取得
$time_hour = idate('H');
if (strcmp($kght_style_mode, 'light') == 0) {
// ライトカラーが指定されていたとき
kght_light_enqueue_styles();
} elseif (strcmp($kght_style_mode, 'dark') == 0) {
// ダークカラーが指定されていたとき
kght_dark_enqueue_styles();
} elseif (5 <= $time_hour && $time_hour <= 17) {
// ライトカラー(4時~17時)のとき
kght_light_enqueue_styles();
} elseif (17 <= $time_hour && $time_hour <= 24) {
// ダークカラー(17時~24時)のとき
kght_dark_enqueue_styles();
} else {
// デフォルトはダークカラー
kght_dark_enqueue_styles();
}
}
function kght_dark_enqueue_styles(){
// ダークカラー用のCSSの読み込み
wp_enqueue_style('dark-style', get_stylesheet_directory_uri() . '/dark.css', array('child-style'));
}
function kght_light_enqueue_styles(){
// ライトカラー用のCSSの読み込み
wp_enqueue_style('light-style', get_stylesheet_directory_uri() . '/light.css', array('child-style'));
}
function kght_add_query_vars_filter( $vars ){
// 強制的にダーク・ライトカラーを切り替えるリクエストパラメータを追加
$vars[] = "kght_style_mode";
return $vars;
}
// テーマスタイル読み込みアクションをスクリプトキューに追加
add_action('wp_enqueue_scripts', 'kght_theme_enqueue_styles');
// カスタムクエリ変数を追加
add_filter('query_vars', 'kght_add_query_vars_filter');
?>
blockquote, .post-password-form label,
a:hover, a:focus, a:active, .post-navigation
.meta-nav, .image-navigation, .comment-navigation,
.widget_recent_entries .post-date, .widget_rss .rss-date,
.widget_rss cite, .site-description,
.author-bio, .entry-footer, .entry-footer a,
.sticky-post, .taxonomy-description,
.entry-caption, .comment-metadata,
.pingback .edit-link, .comment-metadata a, .pingback .comment-edit-link,
.comment-form label, .comment-notes,
.comment-awaiting-moderation, .logged-in-as,
.form-allowed-tags, .site-info, .site-info a,
.wp-caption .wp-caption-text, .gallery-caption,
.widecolumn label, .widecolumn .mu_register label {
color: #3e3e3e !important;
}
body, blockquote cite, blockquote small,
.main-navigation a, .menu-toggle, .dropdown-toggle,
.social-navigation a, .post-navigation a, .pagination a:hover,
.pagination a:focus, .widget-title a, .site-branding .site-title a,
.entry-title a, .page-links>.page-links-title, .comment-author,
.comment-reply-title small a:hover, .comment-reply-title small a:focus {
color: #1a1a1a !important;
}
body {
background-color: #eee !important;
background: #eee !important;
}
.site {
background-color: #f8f8f8 !important;
}
.widget-area {
background-color: rgba(0, 0, 0, 0) !important;
}
.widget-area ul li::after {
border-right: 3px solid #ccc;
border-bottom: 3px solid #ccc;
}
/* Gistライトテーマ */
/* Line Numbers */
.gist-data tbody td:nth-of-type(1) {
color: #f8f8f8 !important;
}
/* Code */
.gist-data tbody td:nth-of-type(2){
color: #222 !important;
}
/* All & Footer & body */
.gist-data, .gist-data table, .gist-data tbody {
background-color: #ccc !important;
color: #333 !important;
}
.gist-meta, .gist-meta * {
background-color: #c6c6c6 !important;
color: #333 !important;
}
.gist {
background-color: rgba(0, 0, 0, 0) !important;
color: #333 !important;
}
.gist, .gist-data, .gist-data table td, .gist-file, .gist-meta {
border: 1px solid rgba(0, 0, 0, 0) !important;
}
/* Comments */
.pl-c
{
color: #57A64A !important;
}
/* Function */
.pl-k
{
color: rgb(229, 173, 255) !important;
}
/* Function Name */
.pl-en
{
color: rgb(255, 173, 230) !important;
}
/* Function Method */
.pl-c1
{
color: rgb(255, 196, 196) !important;
}
/* "'s around Strings */
.pl-pds
{
color: rgb(204, 173, 255) !important;
}
/* Strings */
.pl-s
{
color: rgb(204, 173, 255) !important;
}
/* val */
.pl-smi
{
color: rgb(159, 193, 255) !important;
}
.tbl {
background-color: #eee !important;
}
.tbl th,
.tbl td {
border-color: #f8f8f8 !important;
}
.tbl th {
background-color: #ddd !important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment