Home Explore Help
Register Sign In
night-cherry
/
wiki
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

theme design

night-cherry 3 weeks ago
parent
129dd87455
commit
c10addc094
2 changed files with 30 additions and 3 deletions
Split View Show Diff Stats
  1. 3 2
      pages/sample.html
  2. 27 1
      style/sample.css

+ 3 - 2
pages/sample.html
View File 

@@ -1,5 +1,5 @@
 
 <!DOCTYPE html>
 
-<html lang="en">
 
+<html lang="en" data-theme="dark">
 
 <head>
 
     <meta charset="UTF-8">
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
@@ -15,9 +15,10 @@
 
 <body>
 
     <h3>sample</h3>
 
     <h1>Hello, World!</h1>
 
-    <p>this is a sample about boujeeshilry.com!</p>
 
+    <p>this is a sample about <a href="#">boujeeshilry.com!</a></p>
 
     <div id="app"></div>
 
     <canvas id="canvas"></canvas>
 
     <hr/>
 
+    <pre>main link : <a href="#">boujeeshilry.com!</a></pre>
 
 </body>
 
 </html>

+ 27 - 1
style/sample.css
View File 

@@ -12,9 +12,22 @@ canvas{
 
   border: 1px solid black;
 
 }
 
 html[data-theme="light"]{
 
-
 
+  --body-background-color:rgba(255, 255, 255, 0.333);
 
+  --font-color:rgb(2, 2, 2);
 
+  --a-color:rgba(71, 220, 71, 0.133);
 
+  --a-link-color:rgba(71, 220, 71, 0.133);
 
+  --a-hover-color:rgba(71, 220, 71, 0.133);
 
+  --a-active-color:rgba(71, 220, 71, 0.133);  
+  --a-visited-color:rgba(71, 220, 71, 0.133);
 
 }
 
 html[data-theme="dark"]{
 
+  --body-background-color:#121929;
 
+  --font-color:#DED8D4;
 
+  --a-color:#DED8D4;
 
+  --a-link-color:rgba(71, 220, 71, 0.133);
 
+  --a-hover-color:#862930;
 
+  --a-active-color:#DED8D4;
 
+  --a-visited-color:#DED8D4;
 
 
 }
 
 @property --vw{
 
@@ -87,4 +100,17 @@ body::before{
 
   width:fit-content;
 
   height:fit-content;
 
   margin:auto;
 
+}
 
+body{
 
+  background-color: var(--body-backdrop-color);
 
+  color: var(--font-color);
 
+}
 
+body a{
 
+  color:var(--a-color);
 
+}
 
+body a:hover{
 
+  color:var(--a-hover-color);
 
+}
 
+body a:visited{
 
+  color:var(--a-visited-color);
 
 }