dark-mode.css

/*
Copyright (c) 2019 Ivan Grozdic(@IvanGrozdic)
Released under the MIT license
http://opensource.org/licenses/mit-license.php
*/
/*背景黒・文字色白*/
/*スマホコンテンツ全体*/
.dark #scroll-content,
.dark .cps-post-box,
/*PCコンテンツ全体*/
.dark #main-contents,
/*ウィジェット*/
.dark .widget,
.dark .widgettitle,
/*記事一覧*/
.dark .post-list-link,
/*内部リンクのブログカード*/
.dark .blog-card-title{
	color: #d3d3d3;
	background: #15202B;
}

/*背景半透明の黒・文字色白*/
/*ハンバーガーメニュー*/
.sp-menu-box.dark{
	color: #d3d3d3;
	background: rgba(31, 32, 41,.8);
}

/*背景ブルーグレー・文字色白*/
/*未選択カテゴリータブ*/
.dark .tabBtn-mag label{
	color: #d3d3d3;
	background: #3e4052;
}

/*文字色白(強制)*/
/*記事一覧のタイトル*/
.dark .post-list-title,
/*パンくずリスト*/
.dark #breadcrumb ul li,
.dark #breadcrumb ul a,
/*タグ*/
.dark .tag-box a,
/*内部リンクカードの説明*/
.dark .blog-card-excerpt{
	color: #d3d3d3 !important;
}

/*文字色青(強制)*/
/*リンクテキスト*/
.dark a{
	color:#1A94E0;
}

/*背景黒*/
/*JINコンセプトボックスのタイトル背景*/
.dark div[class^="concept-box"]::before,
/*背景色なしの表ヘッダー*/
.dark .cps-post-main table.cps-table03 th {
	background: #15202B;
}

/*背景グレー(強制)*/
/*吹き出し*/
.dark .balloon-content,
/*引用文*/
.dark .wp-block-quote,
.dark blockquote,
/*JINアイコンボックス*/
.dark .jin-iconbox,
/*JINシンプルボックス*/
.dark .simple-box6{
	background: #333 !important;
}

/*吹き出しの角*/
.dark .balloon-left.balloon-bg-blue .balloon-serif:before{
	border-color: transparent #333 transparent transparent;
}

/*文字色濃いピンク*/
/*JINマーカー1*/
.dark .marker{
	background: linear-gradient(transparent 80%,#9c1184 0%);
}

/*文字色濃い水色*/
/*JINマーカー2*/
.dark .marker2{
	background: linear-gradient(transparent 80%,#35868f 0%);    
}

/*ダークモード切り替えボタン*/
.switch,
.circle {
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; /*全体を一定の速度で移動する*/
}

/*棒の部分*/
.switch {
	width: 80px;
	height: 4px;
	border-radius: 27px; 
	background-image: linear-gradient(298deg, #00008b, #e0ffff); /*グラデーション*/
	position: fixed; 
	left: 25px; /*右からの位置*/
	bottom: 35px; /*下からの位置*/
	display: block;
	margin: 0 auto;
	text-align: center;
	opacity: .8; /*透明度80％*/
	z-index: 33333;
	transition: all 300ms linear;  /*全体を一定の速度で移動する*/
}

/*ボタン部分*/
.circle {
	cursor: pointer; 
	position: absolute; 
	top: 50%; /*位置の開始地点を中央に移動*/
	transform: translateY(-50%); 
	left: -5px; /*左からの位置*/
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #fff; /*ノーマルモードボタンの背景色*/
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	animation: border-transform 10s linear infinite alternate forwards; 
}

.circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.circle:before {
	position: absolute; 
	font-family: 'FontAwesome';
	content: '\f185'; /*ノーマルボタンのアイコン*/
	top: 0; /*上からの位置*/
	left: 0; /*左からの位置*/
	z-index: 2;
	font-size: 20px; /*文字サイズ*/
	line-height: 43px; /*行の高さ*/
	text-align: center; 
	width: 100%;
	height: 40px;
	opacity: 1; /*不透明*/
	color: #696969; /*文字色*/
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.circle:after {
	position: absolute;
	font-family: 'FontAwesome';
	content: '\f186'; /*ダークモードのアイコン*/
	top: 0; /*上からの位置*/
	left: 0; /*左からの位置*/
	z-index: 2;
	font-size: 20px; /*文字サイズ*/
	line-height: 43px; /*行の高さ*/
	text-align: center; 
	width: 100%;
	height: 40px;
	color: #c0c0c0; /*文字色*/
	opacity: 0;  /*透明*/
	-webkit-transition: all 300ms linear;
	transition: all 300ms linear; 
}

.switched {
}

.switched .circle {
	left: 45px; /*切り替え時の左からの位置*/
	box-shadow: 0 4px 4px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
	background: #15202B; /*ダークモードボタンの背景色*/
}

.switched .circle:hover {
	box-shadow: 0 8px 8px rgba(26,53,71,0.25), 0 0 0 1px rgba(26,53,71,0.07);
}

.switched .circle:before {
	opacity: 0;
}

.switched .circle:after {
	opacity: 1; 
}