cabin

0 :root {

1 /* Defualt Theme */

2 --red :#cc241d;

3 --green :#98971a;

4 --yellow :#d79921;

5 --blue :#458588;

6 --purple :#b16286;

7 --aqua :#689d6a;

8 --orange :#d65d0e;

9 --gray :#928374;

10

11 /* Light Theme */

12 --light_switch_shadow: #373d4e;

13 --light_switch_icon: "🌑";

14 --light_switch_text: "dark mode?";

15

16 --light0_hard :#f9f5d7;

17 --light0 :#fbf1c7;

18 --light0_soft :#f2e5bc;

19 --light1 :#ebdbb2;

20 --light2 :#d5c4a1;

21 --light3 :#bdae93;

22 --light4 :#a89984;

23

24 --light_red :#9d0006;

25 --light_green :#79740e;

26 --light_yellow :#b57614;

27 --light_blue :#076678;

28 --light_purple :#8f3f71;

29 --light_aqua :#427b58;

30 --light_gray :#7c6f64;

31 --light_orange :#af3a03;

32

33 --light_invert :0%;

34

35 /* Dark Theme */

36 --dark_switch_shadow: #fce477;

37 --dark_switch_icon: "🌕";

38 --dark_switch_text: "light mode?";

39

40 --dark0_hard :#1d2021;

41 --dark0 :#282828;

42 --dark0_soft :#32302f;

43 --dark1 :#3c3836;

44 --dark2 :#504945;

45 --dark3 :#665c54;

46 --dark4 :#7c6f64;

47

48 --dark_red :#fb4934;

49 --dark_green :#b8bb26;

50 --dark_yellow :#fabd2f;

51 --dark_blue :#83a598;

52 --dark_purple :#d3869b;

53 --dark_aqua :#8ec07c;

54 --dark_orange :#fe8019;

55 --dark_gray :#a89984;

56

57 --dark_invert :100%;

58

59 /* Default Mode */

60 --switch_shadow_color: var(--light0);

61 --switch_icon: var(--dark_switch_icon);

62 --switch_text: var(--dark_switch_text);

63

64 --theme_red :var(--dark_red);

65 --theme_green :var(--dark_green);

66 --theme_yellow :var(--dark_yellow);

67 --theme_blue :var(--dark_blue);

68 --theme_purple :var(--dark_purple);

69 --theme_aqua :var(--dark_aqua);

70 --theme_gray :var(--dark_gray);

71 --theme_orange :var(--dark_orange);

72

73 --theme_bg0_hard :var(--dark0_hard);

74 --theme_bg0 :var(--dark0);

75 --theme_bg0_soft :var(--dark0_soft);

76 --theme_bg1 :var(--dark1);

77 --theme_bg2 :var(--dark2);

78 --theme_bg3 :var(--dark3);

79 --theme_bg4 :var(--dark4);

80

81 --theme_fg0_hard :var(--light0_hard);

82 --theme_fg0 :var(--light0);

83 --theme_fg0_soft :var(--light0_soft);

84 --theme_fg1 :var(--light1);

85 --theme_fg2 :var(--light2);

86 --theme_fg3 :var(--light3);

87 --theme_fg4 :var(--light4);

88

89 --theme_invert :var(--dark_invert);

90 }

91

92 /* Switched mode */

93 #theme_switch:checked ~ #content {

94 --switch_icon: var(--light_switch_icon);

95 --switch_text: var(--light_switch_text);

96

97 --theme_red :var(--light_red);

98 --theme_green :var(--light_green);

99 --theme_yellow :var(--light_yellow);

100 --theme_blue :var(--light_blue);

101 --theme_purple :var(--light_purple);

102 --theme_aqua :var(--light_aqua);

103 --theme_gray :var(--light_gray);

104 --theme_orange :var(--light_orange);

105

106 --theme_bg0_hard :var(--light0_hard);

107 --theme_bg0 :var(--light0);

108 --theme_bg0_soft :var(--light0_soft);

109 --theme_bg1 :var(--light1);

110 --theme_bg2 :var(--light2);

111 --theme_bg3 :var(--light3);

112 --theme_bg4 :var(--light4);

113

114 --theme_fg0_hard :var(--dark0_hard);

115 --theme_fg0 :var(--dark0);

116 --theme_fg0_soft :var(--dark0_soft);

117 --theme_fg1 :var(--dark1);

118 --theme_fg2 :var(--dark2);

119 --theme_fg3 :var(--dark3);

120 --theme_fg4 :var(--dark4);

121

122 --theme_invert :var(--light_invert);

123 }

124

125 .theme_switch { /* Hides the checkbox */

126 display: none;

127 position: absolute !important;

128 height: 1px;

129 width: 1px;

130 overflow: hidden;

131 /* clip: rect(1px, 1px, 1px, 1px); */

132 }

133

134 .switch_label {

135 cursor: pointer;

136 display: flex;

137

138 position: absolute;

139 right: 3em;

140 top: 4em;

141 z-index: 1;

142

143 width: 1em;

144 height: 1em;

145 }

146

147 .switch_label::before {

148 content: var(--switch_icon);

149 font-size: 30px;

150 transition: text-shadow .2s;

151 }

152

153 .switch_label::after {

154 align-self: center;

155 color: var(--theme_fg0);

156 font-size: 28px;

157 line-height: 40px;

158 opacity: 0;

159 padding-left: 15px;

160 transition: opacity .2s;

161 }

162

163 .theme_switch:focus ~ #content .switch_label::before,

164 .switch_label:hover::before {

165 text-shadow: 0 0 15px var(--theme_fg0);

166 }

167

168 .theme_switch:focus ~ #content .switch_label::after,

169 .switch_label:hover::after {

170 opacity: 1;

171 }